Week 1
all done!
we have received your resume
HTML, CSS & JavaScript
Front-End Development
By Marwa Jawad
After finishing the Front-End Development course, participants will acquire the skills to craft responsive, dynamic, and engaging web applications using modern technologies.
With React.js as the primary framework, alongside proficiency in HTML, CSS, and JavaScript, they'll establish a solid foundation in web development.
Jobs you can apply with this course
KHDA Licenced
3 Months Course
Twice a Week, 4 Hours a Day
Price: 8,500 AED
Flexible Hours
Morning & Evening Classes
Beginner Friendly
Installment Payment Plan
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.
3-month journey with exclusive small classes, 20 students maximum.
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.
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.
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.
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: arrow function, Rest Parameters, Getters, and Setters
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.
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!
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!
Session 13
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.
Session 14
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.
Session 15
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 16
React Forms & controlled and uncontrolled components
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 17
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.
Session 18
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 19
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 20
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.
Session 21
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 22
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.
Session 23
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.
Session 24
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.
consultation call
30 Minutes
