The Complete Front-End Web Development Bootcamp

Master HTML basics by creating an index.html, using VSCode with live server or live preview to view output in real time, and learn the HTML5 skeleton.

Learn html document structure from doctype and head metadata to body content, including headings and paragraphs, and understand paired vs single tags.

Master HTML in the complete front-end web development bootcamp by structuring content with headings, a paragraph, and lists (ul, ol, li) to learn steps for building a website.

Master anchors with the anchor tag (href, target to open in a new tab) and the img tag (src, alt, width, height), plus comments and headings.

Learn to build a basic HTML form for collecting user data, including labels, text and email inputs, a textarea, placeholders, id and name attributes, and a submit button.

Create a personal profile page using HTML5, including name, image, bio, and a skills list of HTML, CSS, JavaScript, Python, and a contact form with an email input.

Create an about me page with a heading, paragraph, and image, then add a form for users to send a message. Submit the HTML file for review.

Build a simple HTML5 table by defining table, tr, th, and td elements, add a border, and preview rows of names, subjects, and grades.

Build a plain HTML sign-up form with labeled fields for username, email, password, date of birth, gender, and bio, plus a submit button and required validation.

Embed multimedia in HTML by using the video and audio tags, adding sources, setting controls, and including fallback text for unsupported browsers.

Learn to embed external content with iframes by setting the src, adjusting width and height, and optionally adding a border to display forms, maps, or websites.

Explore semantic HTML elements like header, nav, main, section, article, aside, and footer to structure content. Learn how these tags boost readability, accessibility, and search engine optimization with live coding.

Create a simple blog layout using semantic HTML elements like header, nav, main, section, article, aside, and footer, and include a comment form for review in front-end web development bootcamp.

Learn basic HTML form validation with HTML, JavaScript, and PHP, using required, minlength, and type attributes to validate a registration form with name, email, password, and age before submission.

Learn advanced form validation in HTML5 by implementing pattern-based username and ten-digit phone inputs with custom titles, required fields, and a sign-up form.

Master HTML meta tags and SEO basics to boost your site visibility. Explore charset UTF-8, viewport for responsive design, and essential meta tags like description, keywords, and author.

Learn to implement HTML progress bars and meters to visualize data, using id, value, min, max attributes, and labels to display loading progress and scores.

Learn CSS, the cascading style sheets language for styling HTML elements with color, fonts, layout, and animations, including inline, internal, and external approaches.

Explore CSS selectors by targeting paragraph elements with id and class, using hash for id and dot for class, and practice selecting all paragraphs inside a div.

Learn to customize web pages by applying text color and backgrounds using color names, hexadecimal, rgb, and hsl codes, and to use background images with cover sizing.

Change font family and apply text styling to typography techniques, including using Google fonts such as Roboto, and adjust text align, decoration, and transforms like capitalize and uppercase.

Learn how the box model governs layout by mastering borders, margins, and padding. Practice applying width and background color to create and style a box.

Explore CSS positioning by comparing static, relative, absolute, and fixed values, with practical examples of fixed bottom-right placement and absolute positioning relative to the nearest ancestor.

Learn flexbox to master the modern layout system by building a three-box container with display flex, justify-content center, and align-items center, then adjust width, height, space around, and background color.

Explore CSS grid to create a responsive three-column layout, adjust gaps, align text, and style grid items for structured page designs.

Design and implement complex page layouts using CSS grid, defining header, sidebar, content, and footer with grid template areas and columns, and applying padding and colors.

Learn how to create smooth CSS transitions and animations, applying a hover effect to a blue login button that changes its background color to red over 0.5 seconds.

Explore CSS animations with keyframes that move a box using transform and translate. Set a duration and infinite loop to see continuous motion.

Learn how CSS media queries drive responsive design by changing styles based on screen size, such as switching background color at 600 pixels or less to create mobile friendly websites.

Build a responsive landing page with a hero section and a call-to-action button, using a grid layout and media queries to adapt at smaller screen sizes.

Discover how JavaScript adds interactivity to web pages by updating content and responding to user actions, and learn three HTML integration methods—inline, internal, and external scripts.

Learn to declare and use JavaScript variables with var, let, and const to store data efficiently, including strings and numbers, and view results with console.log in the browser.

Explore JavaScript data types by identifying strings, numbers, booleans, arrays, objects, null, and undefined, and learn how quoting, keys, and values define each type.

Explore JavaScript arithmetic operators, including addition, subtraction, multiplication, division, and modulus, through a practical example using variables, script tags, and console.log to display results.

Learn how to concatenate strings in JavaScript using the plus sign, including adding spaces between first and last names to form a full name.

Explore how to interact with users through alert, prompt, and console in JavaScript: alert shows a pop up, prompt collects input, and console.log outputs to the developer console.

Learn how to define and use functions in JavaScript, including naming, parameters, calling, returning values, and practical examples like printing, greeting a user, and adding numbers.

Build a simple calculator in JavaScript using prompt inputs, type casting, and built-in versus user-defined functions. Use variables for numbers, perform addition, and display results with alert or console.log.

Explore how if-else statements in JavaScript enable decision making by evaluating conditions, with examples on numbers and age checks using prompt, console.log, and alert.

Use if, else if, and else to handle multiple conditions in JavaScript. Assign grids A, B, C, or F by score thresholds.

Explore logical operators in JavaScript, including and, not, compare values with equality checks for value and type, and implement a simple login check using username and password.

Build a small program using a for loop to print even numbers from 1 to 10 by testing i modulo 2 equals 0 and logging the result.

Explore arrays in JavaScript, learning how to store multiple values in a single variable using square brackets, access elements by zero-based indices, and print entire or individual items with console.log.

Learn how to transform and manipulate arrays with push, pop, unshift, and shift, using fruits as examples to add elements at end or beginning and remove from either end.

Learn to iterate through an array using a for loop, using i from 0 to array.length, and print each element with console.log, then compare with non-loop approaches.

Learn to create JavaScript objects as key-value pairs (like Python dictionaries), access and modify properties with dot notation, and iterate keys with a for loop.

Build a simple to-do list with JavaScript by prompting for tasks, pushing them into an empty tasks array, and printing the list with a for loop and console.log.

Master the document object model to access and modify HTML elements with getElementById, getElementsByClassName, and querySelector, then change text content and CSS styles like background color and padding.

Learn to handle browser events by attaching a click listener to a login button and updating a header's text content with a dedicated function.

Learn to implement mouse events by using mouseover and mouseout to alter a button's color and padding with event listeners and style changes.

Learn how keyboard events work by listening for the keydown event with document.addEventListener and logging the pressed key with event.key.

Build a keyboard event mini-project that displays the pressed key in a header by using event.key and updating the header text to show the key followed by pressed.

Create a color changer web app that changes the page background color to red, blue, or green by clicking corresponding buttons, using dom methods like getElementById and addEventListener.

Explore the color flipper project in JavaScript, building HTML5 pages with CSS and a Bootstrap library, organized in a color flipper folder, using Visual Studio Code and a live server.

Create the project banner by wiring multiple divs with glassy panels and color blocks, including labeled sections and a button, then style with box-shadow, background, padding, and font size.

Learn to style the main layout by refining buttons, backgrounds, borders, padding, margins, widths, heights, and typography, and add box shadow, transforms, and transitions for a polished hero.

Implement a simple color flip by building a color array and selecting a random color on button clicks to update the page background.

Learn to generate dynamic hexadecimal colors with JavaScript, using a loop and random numbers to create six-digit hex codes and apply them to the page via DOM updates.

Set up a counter project by creating a JavaScript and CSS folder structure, an HTML container with a zero value, and three buttons for increase, decrease, and reset.

Define and apply styling for the counter interface, including background color, container layout, font sizes, padding, margins, and borders, then implement increase, decrease, and reset behavior with JavaScript.

Build a javascript counter with three buttons (increase, decrease, reset) using querySelector and event listeners, updating the value and applying green or red styles for positive or negative results.

build a dynamic review section layout using html5, css classes, and javascript to display the author, job, image, and content with previous and next navigation.

Learn to style the review section with CSS by applying background colors, fonts, borders, shadows, and spacing for a polished, responsive presentation.

Create a reviewers array with id, name, job, image, and info, populate profiles, initialize the first item at index zero, and wire a next button.

Learn to use JavaScript to manage the current item in reviews, update images and content per item with functions, and handle missing item errors during navigation.

Implement next and previous button functionality with event listeners to cycle through an array of items, update the current index, and refresh the display at each step.

Create a responsive navbar with a logo, nav header, and links (home, about, project, contact) plus social icons (Facebook, LinkedIn) and a hamburger toggle.

Style the navbar by applying css variables to set font family, background colors, spacing, and shadows; adjust line height and font sizes, and implement a responsive flex layout with space-between.

Style the navbar with color, background transparency, typography, and smooth transitions, and enable cursor changes and simple hover effects for an interactive header.

Implement a responsive navbar that toggles link visibility with JavaScript, adjusts the layout with flex at 800px, centers content, and styles padding, margins, and social icons for seamless transitions.

Learn to add interactivity to the navbar by selecting the toggle and nav links, using a click event listener, and toggling show or hide states through class list checks.

Fix common css issues in navbar design by styling a clean, responsive menu, aligning items like project, about, and contact, and refining the logo for a cohesive front-end experience.

Build a functional sidebar by organizing folders for sidebar and JavaScript, adding a logo, header, close button, and a navigation list with social icons, then link CSS and JavaScript.

Learn to style a responsive sidebar with a toggle, logo, header, social icons, and navigation links. Apply fixed positioning, transitions, color variables, hover effects, and animations like bounce and heartbeat.

Style the sidebar with flex-aligned social icons, padding, and color transitions; make a fixed white sidebar with box shadow, and use JavaScript to toggle the show-sidebar class on click.

Add JavaScript to select the toggle, close, and sidebar elements, attach click event listeners, and toggle the show sidebar class to control visibility.

Design an faq section layout with semantic HTML, including article blocks for each question and a clickable plus/minus button to reveal answers.

Master front-end styling for a faq section by styling the title, centering sections, and designing question blocks with background, radius, padding, margin, and box shadow.

Students learn to style the faq section by toggling answer visibility with classes, changing display to block, and updating the plus icon using JavaScript to show and hide content.

Create a JavaScript-driven interactive question interface by selecting all questions, wiring click events, and toggling a show-text class and icons to reveal or hide question content.