whatsapp

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

  • Front-End Developer
  • React Developer
  • Web Developer
  • UI Developer
  • JavaScript Developer
  • User Interface Engineer
  • Front-End Engineer
Enroll Now

From Beginner to Professional Developer A 3-months journey with exclusive small classes, 21 students max. 96 total hours, 2 days a week, 4 hours each day.

Beginner
Weekend Course
96 hours
KHDA-Licensed
Installments via Tabby
Recommended age 16+
12 Weeks Course
2 Times a Week
4 Hours a Day
Price: 8,500 AED
Request A Call Back!
Fill out the form and we'll call you back to discuss your future career!

Confirmed!

We will be in touch shortly.

Meet Your Instructor

Marwa Jawad
Front-End Development Master

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.

Price: 8,500 AED

What's on the curriculum

A 3-month journey with exclusive small classes, 21 students max. 96 total hours, 2 days a week, 4 hours each day.

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, GitHub & 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. Apply these skills to style your portfolio pages, and use the absolute and relative positioning on the homepage.

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

Week 3

Session 5

CSS Framework: 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 6

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.

Week 4

Session 7

CSS Animation

CSS transforms allow you to modify the appearance and position of elements in 2D and 3D space. They include functions for translation, rotation, scaling, and skewing of elements. Transforms don't affect the layout flow, meaning they don't alter the position of surrounding elements.

Session 8

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.

Week 5

Session 9

JS Functions: arrow function & DOM manipulation

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 10

JS Classes: Inheritance & Prototypes, If condition & iteration

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!

Week 6

Session 11

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 12

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!

Week 7

Session 13

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 14

RegExp in JS: Patterns & Methods, High order functions

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

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 16

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.

Week 9

Session 17

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 18

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.

Week 10

Session 19

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 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

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.

2
3

Careers you can apply to with HTML, CSS & JavaScript skills

Frontend Engineer

USD 98000 to USD 210000 per month

View Details

06 Jun 2024

Senior JavaScript Developer/ IgniteTech /Remote/ - /60/000/year USD

USD 60000 to USD 60000 per month

View Details

15 Jul 2024

Web Developer - MAKYEE REAL ESTATE BROKERAGE LLC

AED 10000 to AED 13000 per month

View Details

18 Jul 2024

Web Developer - MAKYEE REAL ESTATE BROKERAGE LLC

AED 10000 to AED 13000 per month

View Details

30 May 2024

Web Developer - MAKYEE REAL ESTATE BROKERAGE LLC

AED 10000 to AED 13000 per month

View Details

15 Jul 2024

Explore 98 More Jobs

with HTML, CSS & JavaScript skills

Discover HTML, CSS & JavaScript Careers

<teachmecode/>
Adam Hallak Your course consultant

consultation call

Let’s get to know each other, discuss your concerns, and answer all your questions.
30 Minutes

Confirmed!

Call booking has been created successfully!