In this lesson, you will learn the fundamentals of modern web development, including the core technologies—HTML for structure, CSS for design, and JavaScript for interactivity. You will understand how these technologies work together to create dynamic web pages and how frameworks like React and Vue simplify development. You will also explore how the web functions through client-server architecture using HTTP and HTTPS protocols. By the end of the lesson, you will be introduced to essential developer tools such as browser dev tools, code editors like VS Code, version control systems like Git, and package managers like npm. You will also learn how to set up your local development environment on Windows, macOS, or Linux to begin your journey in frontend development.

In this lesson, you will learn the foundational structure of HTML, how to use tags, elements, and attributes to build web pages, and why semantic HTML is important for accessibility, SEO, and maintainability. You will explore how to structure a webpage using elements like <header>, <main>, and <footer>, and understand how semantic HTML improves user experience for those using assistive technologies. The lesson also introduces HTML forms, including common input types, and emphasizes accessibility best practices like using labels and keyboard-friendly controls. By the end of the lesson, you will be able to structure a meaningful, accessible webpage using semantic elements and basic form controls.

In this lesson, you will learn how CSS is used to style and visually enhance HTML content. You will understand the different ways to apply CSS—inline, internal, and external—and why external stylesheets are best for scalability and maintenance. You will explore how selectors like class and ID target elements, and how to apply styles effectively using them. This lesson also introduces the box model, explaining how padding, borders, and margins affect element layout and spacing. Finally, you will learn to use browser developer tools to inspect and troubleshoot styles, equipping you with the foundational skills to create attractive and well-structured web pages.

In this lesson, you will learn how to create web pages that adapt seamlessly to different screen sizes and devices using responsive design principles. You will understand the importance of using fluid layouts with relative units like percentages, viewport widths, and flexible image settings to ensure content scales appropriately. The lesson introduces media queries, which allow you to apply different styles based on screen dimensions, enabling device-specific adjustments. You will also explore scalable units like em and rem for consistent sizing, and practice testing responsiveness using browser developer tools to deliver a smooth and user-friendly experience across all devices.

This lesson introduces the core fundamentals of JavaScript, the programming language that powers interactive web experiences. It explains how to include JavaScript in a webpage using internal or external scripts, and explores key syntax elements including variables, data types, functions, and control structures like conditionals and loops. You will learn to declare variables using let, const, and var, understand the differences in scope, and work with various data types such as strings, numbers, booleans, arrays, and objects. The lesson also covers function creation, including arrow functions, and teaches control flow with if-else statements and for/while loops. You will get comfortable with using arithmetic, logical, and comparison operators to evaluate and manipulate data, as well as capturing user input via prompts and debugging code using console.log(). These basics form the foundation for writing interactive, user-driven functionality in web applications.

In this lesson, you will learn how JavaScript interacts with the Document Object Model (DOM) to make web pages dynamic and interactive. You will explore how the DOM represents the structure of a webpage as a tree of elements, and how JavaScript can access, modify, and create these elements in real time. You will learn to use DOM methods like getElementById(), querySelector(), and createElement() to change content and styles based on user actions. The lesson also introduces modern JavaScript features like arrow functions, template literals, and event listeners to simplify your code and improve readability. By the end of the lesson, you will be able to perform DOM manipulation tasks such as updating text, changing colors, creating new elements, and triggering simple animations using setTimeout and setInterval, giving you the tools to build responsive and interactive user interfaces.

In this capstone project, you will apply everything you’ve learned to build a complete, responsive, and interactive portfolio website from scratch. This project will showcase your skills in HTML, CSS, and JavaScript, and will help you understand the process of planning, designing, coding, testing, and iterating on a real-world web project.