The Complete Front-End Web Development: Start your journey!

Learn html page structure, including html tags, the head and body sections, and the title element, then create and save an index.html to practice.

Learn how the doctype declaration signals HTML5 to browsers, why it must be the first line, and how it distinguishes HTML5 from HTML4 in modern web pages.

Explore block and inline elements using div and span, explain block-level behavior and full width versus inline flow, with browser inspection examples.

Explore how the p tag defines paragraphs with closing tags and browser margins, add line breaks with br, and use hr, bold, italic, blockquote, and q for quotes.

Learn to create unordered and ordered lists in HTML with ul, ol, and li, and customize bullets using the type attribute (disc, circle, square; numbers or roman/letter styles).

Create a simple html structure using header and footer, and demonstrate paragraphs, lists, and the use of div alongside header and footer tags.

Learn to build a news site with semantic html using main, section, and article elements, link articles with a href, and open links in a new tab with target _blank.

Learn how to apply HTML heading elements (h1–h6) to control text sizes, and observe pixel heights from 32px to 10.72px through live examples.

Create HTML tables using the table tag to arrange data in rows and columns, with thead, tbody, tr, th, and td, and learn to add borders for a polished table.

Build a simple unstyled html5 text project using sections and articles with headings h1–h6, include links with a href and target options, and conclude with a footer centered.

Learn how to embed png and jpg images in HTML using the img tag and src attribute, then resize with width and height for article layouts. Use the same directory.

Explore html forms and the form element to collect user information, compare get and post methods, and understand when data appears in the url or remains secure.

Understand html input types, such as text and password, to build fields for first name, last name, email, and learn how type and name attributes send data to the server.

Explore building a newsletter subscription using a checkbox: create an input type=checkbox with a name and value, and pair it with a label for a subscribe option.

Learn to create radio buttons with input type radio to let users choose gender, male or female. Group options with the same name so only one can be selected.

Build a dropdown with the select element and option tags to list United States, United Kingdom, Norway, and Denmark, then use get or post to submit user data.

Discover how to embed video and audio with HTML5 using the video and audio elements, set dimensions, add sources like clock.mp4 or clock.mp3, and enable controls.

Explore meta tags in HTML5, including charset, description, keywords, author, and viewport, and learn how they describe documents and aid SEO.

Discover how to create your first css file, attach it to html using inline, internal, and external methods, and begin styling with basic css properties and syntax.

Learn CSS syntax by writing selectors, properties, and values in an external style.css, styling h1 and p elements with color, font-size, and text-align, while using comments and !important rules.

Explore CSS selectors, including class and id selectors, element, descendant, and adjacent and universal selectors, with practical examples using h1, p, div, ul, and borders and colors.

Explore css text and font styling, including google fonts, font-family, font-size units (px, em, rem), and properties like font-weight, text-transform, text-decoration, and text shadow.

Explore the CSS box model, including borders, margins, padding, and content, with a hands-on demo showing how to apply padding and margins to control layout.

Explore flexbox, a flexible box layout, for responsive designs without floats or positioning. Create a flex container, apply display:flex and flex-wrap: wrap, and use justify-content to center items.

Discover css3 features such as transitions, animations, selectors, and attribute selectors, plus advanced color formats (hex, rgb, rgba, hsla) and effects like text shadows, linear gradients, and hover transforms.

Explore css positioning by examining the position property and the five values: static, relative, absolute, fixed, and sticky, plus how margins and padding affect layout.

Learn how JavaScript, the most popular programming language, runs on web pages to control appearance and interactions, and explore core concepts, basic syntax, and frameworks like Angular, React, and jQuery.

Learn how to write your first javascript code, create and attach a script.js to index.html using script tags with a proper src, and run simple commands like document.write and alert.

Explore how to use alert and console.log in JavaScript, compare document.write, and learn when each method updates the browser DOM or the console.

Explore data types in JavaScript, including integers, strings, booleans, and variables, and learn basic arithmetic, string creation with quotes, and variable assignment.

Learn to increment and decrement values in JavaScript using ++ and --, and plus equals or minus equals, with examples like my score and full score.

Explore booleans in JavaScript, learning true and false, and key operators like and (&&), or (||), and not (!). See practical examples with money, phone, and dinner to reinforce logic.

Explore comparing values in front end web development to build a solid foundation for evaluating data and logic as you start your journey.

Explore the difference between undefined and null in JavaScript by examining variables with no value versus empty references, and learn when to use each to convey 'not there'.

Explore JavaScript conditionals with if and if-else statements, learn their syntax, and see examples that determine messages like you are getting old or you are young.

Explore how while and for loops execute code until a condition becomes false, with incrementing variables and console logging counts from 0 to 6.

Explore JavaScript events, including onclick and onmouseover, with hands-on examples using buttons and divs. Learn to attach event handlers with document.getElementById and trigger alerts or console logs.

learn to define and name a JavaScript function with the function keyword, run it as many times as you want, and pass parameters and arguments, then return a value.

Explore JavaScript arrays, learn what an array is, why to use it, and how to store multiple programming languages in a single array; access elements by zero-based index.

learn how to set and change array elements by index, mix data types in arrays, access nested elements, and use push, unshift, pop, and concat to modify and join arrays.

Learn JavaScript object oriented programming (OOP) by using dot notation and the this keyword to access properties and add methods, then create objects with constructors and the new keyword.

Explore jquery basics and syntax, learning to attach jquery to a web page, select elements with the dollar sign, and perform actions following the write less and do more philosophy.

Explore the DOM tree and the document object model, learn to select elements by id with document.getElementById, and update text via innerText and interactive prompts.

Learn to create and append new DOM elements using the append method, build multi-element outputs with loops, and update the page with dynamic text and paragraphs.

Explore jQuery events and how to trigger actions with click, double-click, and other interactions. Learn the jQuery syntax to attach handlers that hide text, adjust height, and show alerts.

Learn to implement jQuery hide and show effects using buttons with ids to control visibility of paragraphs, adjusting height and animation speed (slow, fast, or milliseconds) for smooth transitions.

Learn how to fade out visible elements with the fadeOut method, use fadeToggle to switch between fade in and fade out, and adjust speed for different opacity effects.

Explore sliding effects in front-end web development, mastering slide down, slide up, and slide toggle methods to create interactive elements.

Learn how callback functions synchronize actions with jQuery animations by executing code after a height effect finishes, ensuring alerts and other steps run in the correct order.

Discover bootstrap, an open source toolkit for front-end development with html, css, and javascript. Attach it to a project via cdn links, and use its responsive grid, components, and plugins.

Learn to set up bootstrap, include css and scripts, and use components like jumbotron and the grid system with mobile-first breakpoints for responsive layouts.

Explore Bootstrap buttons by inspecting primary, secondary, success, danger, and warning styles, their classes, and how button types render with distinct colors in a front-end development workflow.

Learn to build Bootstrap progress bars and spinners, customize with style and color variants, set progress to 50% or 80%, and implement a Bootstrap list group.

Create a skeleton website using bootstrap by building a navigation bar and sections for home, about, resources, students, and contact, and learn to implement data-spy scroll with data-offset.

Create a dark fixed-top navigation bar and add a collapsible menu with a toggle button. Build a navigation list including home, about, courses, resources, students, and contact.

Fixes and styles a navigation bar, adds div-based structure with classes for a front-end module, inserts header text and a call-to-action button, and notes ongoing styling in a follow-up video.

Set up a front-end home section with a fixed background image and a positioned home wrap, then style a navigation bar with uppercase text and padding.

Add icons to your front-end project using z-index for stacking and clip-path for clipping absolute elements. Attach the script from the website to access icons and apply javascript for interactivity.

Add a responsive footer with contact info, two student sections with avatars and comments, and a centered quote, then style a gray background with white text.