XHTML CSS & JavaScript course - Learn webdevelopment

XHTML, CSS & JavaScript

Marwa Jawad

Enroll Now

class details

KHDA Licenced

3 Months Course

Twice a Week, 4 Hours a Day

Price: 8,500 AED

Flexible Hours

Morning & Evening Classes

Beginner Friendly

Reserve a Seat For: 2,000 AED

Meet Your Instructor

Marwa Jawad

I'm Marwa, passionate about web development since 2018. I've worked on diverse web projects, and coding changed how I see solutions.

I've been a front-end developer for years and love teaching. I enjoy learning and creating tech that impacts lives.

Sharing my knowledge with students is a joy; I inspire creativity and critical thinking, encouraging them to explore new ideas and solutions.

What's on the curriculum

3-month journey with exclusive small classes, 20 students maximum.

Week 1

Session 1

Web Fundamentals: Networks & Browser Sync

Discover the intricate web of networks and grasp the mechanics behind the internet. Dive into the world of browsers and ensure your designs shine across all platforms. Familiarize yourself with the foundational blocks of HTML, from its structure to the art of choosing the right tags. By the end, you'll craft a simple markup for your portfolio's homepage.

Dive into web mechanics, master browser compatibility, and craft your first HTML portfolio page.

Session 2

HTML Tags & Intro to SEO

Uncover the dynamic HTML tags such as forms and inputs that elevate user interaction. Dive deeper into Search Engine Optimization (SEO) essentials to amplify online presence. Through hands-on exercises, you'll meticulously select appropriate tags and design markup for your portfolio's 'work' and 'about' sections.

Master interactive HTML elements and learn SEO essentials to optimize your portfolio pages.

Week 2

Session 3

CSS Essentials: Styling & Element Selection

Delve deep into CSS's heart! Understand diverse styling methods, from inline to external, and master element selection techniques. Enhance designs using vibrant colors, borders, and captivating backgrounds. Apply these enriched skills to elevate your portfolio, imparting a polished, professional aesthetic.

Master CSS methods, style elements, and apply to your portfolio for a polished web presence.

Session 4

CSS Box Model & Positioning

Dive into the CSS Box Model, understanding margins, borders, and padding. Grasp the nuances of element positioning and master the power of Flexbox, from nested containers to alignment. Apply these skills to style your portfolio pages, and use the absolute and relative positioning on the homepage.

Master the CSS Box Model, positioning, and Flexbox to enhance your portfolio's design.

Week 3

Session 5

CSS Grids, Pseudo-Classes & Layouts

Embark on a journey through CSS Grids, crafting intricate layouts with ease. Delve into the magic of Pseudo-Classes and harness the power of Chrome DevTools. Apply transitions to your portfolio pages, ensuring smooth and captivating page layouts.

Explore CSS Grids, Pseudo-Classes, and use DevTools to refine your portfolio layouts.

Session 6

CSS Transitions: Bootstrap & Tailwind

Unravel the intricacies of the Critical Rendering Path (CRP) and the power of CSS frameworks. Dive deep into Bootstrap and Tailwind, two industry-leading tools. Apply grid styling to your work page, showcasing projects in a neat grid format for your portfolio.

Master the CRP, Bootstrap, and Tailwind to enhance and grid-style your portfolio projects.

Week 4

Session 7

JS Basics: Variables, Loops & Expressions

Dive into JavaScript's core concepts! You'll grasp variables and their types, explore expressions including 'this' and literals, and understand loops like 'do while' and 'for'. Plus, apply your knowledge by animating SVGs on your portfolio homepage.

Grasp JavaScript basics, from variables to loops, and apply them in real-world portfolio enhancements.

Session 8

JS Functions & jQuery Intro

Embark on a journey into JavaScript's core functionalities. Understand the essence of functions, explore the nuances of jQuery, and master techniques to animate your portfolio's homepage. This lesson is a blend of theory and practice.

Master JavaScript functions & jQuery, enhancing your portfolio with dynamic animations.

Week 5

Session 9

JS Classes: Inheritance & Prototypes

In this lesson, we'll demystify JavaScript classes and prototypes. Dive into class declarations, understand constructors, and explore the magic of inheritance. We'll also touch on the 'extends' and 'super' keywords. Plus, we'll style an e-shop project and tackle a coding challenge.

Explore JS classes, delve into prototypes, and apply knowledge by styling an e-shop project. Challenge your coding skills!

Session 10

JS Error Handling & Closures

Immerse yourself in JavaScript's intricate mechanisms for error management and deeply explore closures and their encompassing scope. You'll design a detailed products page for an e-shop project, and confront a coding challenge, further refining and expanding your problem-solving abilities.

Grasp JS error management, explore closures, and develop an e-shop products page. Challenge your coding skills!

Week 6

Session 11

Async JS: Promises, Fetch & async/await

Unravel the power of asynchronous JavaScript, diving deep into Promises, the Fetch API, and the async/await pattern. A coding challenge to design a products cart modal for an e-shop project, enhancing your real-world web development skills.

Explore async JavaScript, master Fetch API, and craft an e-shop cart modal. Challenge and refine your coding prowess!

Session 12

JS Events & ES6 Modules

Dive into JavaScript's event handling, exploring listeners and the event object. Understand bubbling, capturing, and ES6's import/export module system. Engage in a coding challenge and design a product cart modal for an e-shop project.

Grasp JS event handling, delve into ES6 modules, and craft an e-shop cart modal. Enhance your coding expertise!

Week 7

Session 13

DOM Mastery & Web API Overview

Dive into the world of DOM, learning to select, modify, and create elements. Explore the vast realm of Web APIs and the real-time capabilities of Websockets. Equip yourself with skills to dynamically interact with web content.

Learn to manipulate DOM elements and delve into Web APIs, including Websockets for real-time actions.

Session 14

RegExp in JS: Patterns & Methods

Dive into the world of Regular Expressions, understanding pattern matching intricacies. Familiarize yourself with essential RegExp methods like test(), exec(), match(), and replace(). Equip yourself to handle text in more advanced ways.

Grasp pattern matching with Regular Expressions and utilize key RegExp methods for text manipulation.

Week 8

Session 15

Browser APIs: Storage & Graphics

Dive into essential browser APIs. Understand how LocalStorage and sessionStorage work, explore the navigator object, and harness the power of the Geolocation and Canvas APIs. Equip yourself with skills to enhance user experience and create dynamic web apps.

Master LocalStorage, sessionStorage, navigator, and delve into Geolocation & Canvas APIs.

Session 16

Intro to Functional Programming in JS

Dive into the core of functional programming in JavaScript. Learn about higher-order functions like map(), reduce(), and filter(). Understand the essence of pure functions and the importance of immutability. Equip yourself with modern coding techniques.

Explore higher-order functions, grasp pure functions, and understand immutability in JS.

Week 9

Session 17

Dive into Browser Object Model (BOM)

Dive into the core of web browsers with the Browser Object Model (BOM). Understand the pivotal 'window' object, its associated 'history', and the role of the 'Navigator' object. By mastering these, you'll gain deeper insights into web interactions and behaviors.

Delve into BOM: Learn the intricacies of the 'window' object, its 'history', and the 'Navigator' object.

Session 18

React Development Foundations

Embark on a React journey, starting with the elegance of Object Destructuring and Spread Operators. Dive into the concise world of Arrow Functions, explore the power of Higher-Order Functions, and understand the importance of Modularity with import/export.

Master React with Object Destructuring, Arrow Functions, Higher-Order Functions, and Modularity techniques.

Week 10

Session 19

React: Building First Component

Dive into React's world by understanding its project directory structure. Grasp the essence of React JSX, a syntax extension for JavaScript. By the end, you'll be adept at creating dynamic lists within React, setting a strong foundation for advanced topics.

Discover React's structure, delve into JSX, and craft dynamic lists for a solid React foundation.

Session 20

React Data Management: Props & State

Understand React's data handling. Learn about 'Props' for passing data, delve into basic and advanced 'State' management, and explore React DOM's role in rendering. Equip yourself with pivotal React skills for dynamic web applications.

Dive into React's data tools: Props, State management, and React DOM essentials.

Week 11

Session 21

React Event Handling: Callbacks & Props

Dive into React's event management. Understand how to use Handler & Callback functions within JSX. Master the art of 'Lifting State' for better data flow, and delve deeper into advanced techniques for handling 'Props'. Equip yourself for dynamic interactivity.

Explore React's event tools: Callbacks in JSX, State Lifting, and advanced Props handling.

Session 22

Advanced React Techniques Explored

Embark on an advanced journey with React. Learn to craft custom hooks tailored to your needs. Discover the power of reusable components for efficient coding. Dive into component composition, a method to assemble components in more intuitive ways.

Master custom hooks, reusable components, and component composition in React.

Week 12

Session 23

React: Dynamic Rendering & Data Fetch

Dive into React's dynamic capabilities. Learn conditional rendering to display content based on conditions. Explore memoized handlers for performance optimization. Master controlled components, ensuring consistent and predictable data handling.

Learn dynamic content display, optimize with memoized handlers, and master controlled components in React.

Session 24

React Routing, Data & Context Mastery

Embark on a journey through React's robust features. Master the React Router for seamless navigation. Delve into asynchronous data handling for dynamic content. Grasp the power of the Context API to manage and share data across components.

Master React's routing, dive into asynchronous data handling, and harness the Context API.