The Complete Web Developer Course - Build 20 Websites

Learn how html, the hypertext markup language, marks up text with tags to build web page structure, using elements like p, h1, div, and the html, head, body skeleton.

Master the basics of writing your first HTML page in an online editor, using doctype, head, and body, plus tags like p, h1–h6, strong and em.

Discover how HTML lists organize content with ordered lists and unordered lists, including nesting and list items, and learn to document code with HTML comments and basic CSS styling.

Learn how to nest ul and ol elements to create sublists and dropdowns for navigation, handle proper closing tags, and use comments to clarify complex nested lists.

Load images in HTML with the img tag and a src URL. Include alt text for accessibility and place images where they won’t wrap other content; closing tag is optional.

Load images into lists by nesting them inside list items, experiment with unordered lists, and combine text and images to understand how markup affects bullets and list structure.

Learn how to create hyperlinks with the a tag and href attribute, using absolute (http prefix) and relative paths, descriptive link text, and proper nesting within lists for navigation.

Learn to turn images into clickable links by wrapping an image tag in an anchor tag, linking to the image or a destination, and open in a new tab.

Create a mailto link with the a href attribute to open an email program and compose a message to a specified address, including a concrete example and proper tag closing.

Learn to use div elements to divide a web page into logical sections—header, main content, sidebar, and footer—and how nesting divs works, with semantic alternatives.

Build a minimalist, single-page website by structuring with div containers, setting header-page and logo ids, and adding a header with an h1 tag for the header logo.

Set up an image inside a new content div under the header, using an image tag with a source, and outline a logo, a picture, and three information columns underneath.

Select a black and white coffee bean image from publicdomainpictures.net, reference the image in the project folder, paste it, and apply a gray monochrome look for a coffee shop theme.

Set up a three-column layout by adding divs for the main page and column one, then insert a header two and a paragraph in column one.

Copy and paste latin text to fill three columns, then rename divs to column1, column2, and column3. Add CSS to make the columns display properly.

Set up the body css and structure multi-column content using divs for column 1, 2, and 3 with placeholder text, then apply css to render proper columns.

Style the headers by applying font-family with impact, choosing normal or 200 weight, and transforming text to uppercase; reset margins and padding to zero and set a dark color.

Edit the header logo by setting logo h1, adjust line height to 150 pixels, tweak letter spacing from positive to negative values, and resize font size for a bigger logo.

Format the header page area using overflow hidden, set image height to 600 pixels, and define header width as 1000 pixels with 150-pixel height and zero margins and padding.

Add a banner div with id banner and style it in CSS with margin 0 auto, width 1000px, height 40px, then test 600px width to see the image crop.

Learn to build a three-column layout with floats, overflow hidden, width 1000px, and margin 0 auto. Size columns to 300px with gaps and add sample content to finalize the design.

Add an image tag and set a 1000-pixel width. Create a simple one-page layout with a Google Maps link, a coffee purchase link, and a gray, artistic theme.

Adjust typography by experimenting with font sizes in ems and bold styling, rename the header logo to dark coffee, and tune CSS values to achieve a bold, balanced header.

Add links to Google Maps, Amazon, and a deals site to a simple bold coffee website, highlighting off-black on white and concise information delivery.

Learn to build a one-page website with a full-page background, using divs and IDs such as page, header page, and logo, plus a temporary dark coffee logo in the header.

Create a simple header with a logo and a three-column section. Duplicate the first column into columns two and three, then apply CSS styling later.

Select a road background image and note the aesthetic science behind its appeal. Copy the image url and apply it as the body background in css, then resize for page.

Apply CSS background settings—no-repeat, center center positioning, fixed attachment, and background size options like 100% 100% or cover—to resize images responsively across devices.

Apply Abel as the font at 20px with a gray color, then style header1 and header2 using Impact with uppercase text, zero margin and padding, and center alignment.

Size and style the logo in the header by using an h1, set line-height to 150px, adjust letter-spacing, and choose font size in em or px, fixing a missing semicolon.

Learn to build a three-column layout by configuring overflow hidden, a 1000px container with centered margins and 30px padding, and floating column1 left, column3 right, with column2 in between.

Adjust the header styling for a three-column layout by applying top padding, setting a 50px font size, and tweaking letter spacing with subtle pixel adjustments.

Set the header width to 1000 pixels with a 200-pixel margin and auto centering to improve layout and padding. Adjust the margin to fit content and reduce scrolling.

Create a semi-transparent text background with rgba in CSS, choosing alpha values like 0.3 to separate text from the page and enhance readability.

Adjust header two by aligning text to the left and tweaking padding to improve the layout, then customize labels and capitalization to manage line breaks in CSS.

Learn how to add and maximize a logo using CSS, and design a one-page website for a small business like bike tours, featuring location, rates, and deal of the day.

Think like a business and brainstorm ideas for a bike tour company, exploring how maps, store links, and contact emails can engage customers while developers add value.

Learn to scaffold a one-page website and begin a six-column layout by creating div containers with ids page, header-page, header, and logo, and adding an h1 logo.

Add six columns by creating a div with id sixcolumns containing six child divs (column1 to column6), each with a header 2 and Latin text, before applying CSS.

Select a photo, copy its URL, and use CSS to set it as a background image with background-image, background-repeat: no-repeat, background-position: center center, background-attachment: fixed, and background-size: cover.

Apply the Abel font with sans-serif, set 20px, gray color (3b3b3b); update header one and header two with Gill Sans MT bold, uppercase, and centered text, zero margins and padding.

Set header width to 1000 and margin to 150. Center the logo and adjust line height to 150, letter spacing -1px, and font size 9.5em, then test 8.5em.

Learn to create a six-column layout using CSS floats, with fixed widths, overflow hidden, and padding, then duplicate columns across rows for a complete grid.

change the header two of six columns by adjusting padding, font size, and letter spacing, refining from 50px to 40px for balance.

Add a background to the six columns using rgba colors to improve readability. Experiment with white or green hues and adjust the alpha value to control opacity for clearer text.

Explore how to make header text pop using CSS text stroke and rgba colors, with practical tweaks like stroke width and chrome-specific rendering.

Add a graphic logo to the top with an img tag. Size the logo to 200 pixels, center it with display block and auto margins, and add a subtle background.

Add a footer with a closing note at the bottom, include a slogan or bottom text, and optionally include a logo to finish the webpage.

Create a minimalist website by building html with divs and ids such as page, header-page, header, logo, then place a header 1 Temp Logo inside the logo and explore colors.

Add six columns by creating a sixColumns container and six column divs with headers and short paragraphs, then prepare to style with CSS.

Set the page background color in CSS with an orange hue from colorcodes.info, then apply a gray 3B3B3B text color, Abel sans-serif font, and 20px size.

Style header 1 and header 2 with bold uppercase Gill Sans, center the text, set margins and padding to zero, color #111111, and align h2 left in the columns.

Set up six columns with overflow hidden, width 1000px, margins, and padding; copy and paste to create columns 1–6, float left at 300px width with 50px margin-right.

Fix the logo bleed by setting its width to 1000px via CSS, remove the white background, adjust letter spacing, and preview scalable vector graphic icons in the next tutorial.

Learn how Font Awesome works as a font with scalable vector icons, and how to integrate it into CSS using @font-face and font-family Font Awesome by copying sources.

Add and arrange paragraph tags in the HTML, labeling them p1 through p6 to align with columns, and place them above each item to complete the tutorial.

Learn to add a FontAwesome item by setting the font-family, inserting the correct code from the FontAwesome site, and adjusting the font-size for optimal display.

Center the column text with display, block, and text-align center, then create multiple columns (column 2 through 6) and add Font Awesome icons to each, improving layout.

Adjust the header two styling by applying padding of 10 pixels around each item, set the font size to 35 pixels, and fine-tune letter spacing to 2 pixels.

Set the page header to 1000px with a 50px margin and auto centering, then adjust text color to 3b3b3b or 2b2b2b; ensure the page works before applying styling.

Learn to enhance pages with color by using span tags in HTML, applying white and off-white rgba colors to headers and logos, and adjusting color opacity for a subtle effect.

Learn to enhance a themed logo site with Font Awesome icons, choose relevant icons, and handle icons that don’t work while shaping clear marketing messages.

Experiment with a new color theme by adjusting background and text lightness to boost contrast. Invert colors or map to light, medium, and dark for balance.

Set up a minimal HTML page by creating divs with ids page, header-page, header, and logo, and insert an h1 labeled temp logo, introducing foundational page structure.

Add six columns by creating a sixColumns container and six column divs, each with an h2 and a paragraph of Latin text to keep the design minimalist.

Set the body's background to near white using RGBA 252,252,252 and the text color to #2B2B2B, with font family Abel, sans-serif, at 20px.

Style header 1 and header 2 with Gill Sans MT, bold and uppercase, center them, and zero out margins and padding, with header 1 darker and header 2 slightly lighter.

Adjust the header layout by setting header width and auto margins, then style the logo with line-height, width, and font-size (em) to keep the logo on one line.

Create a six-column layout with overflow hidden, width 1000px, centered margins, and 30px padding, then float 300px logos with 50px right margins for a simple, clean grid.

Learn to integrate Font Awesome by adding the font-face, loading icons from the web, and inserting the Font Awesome logo in HTML with proper code structure.

Set up Font Awesome icons in css by defining the font family, using content values for a wine glass glyph, and centering each logo while fixing column placements.

Learn to use span tags for inline formatting and define a span CSS class, apply rgba and hex colors, and preview a stroke in the next tutorial.

Apply WebKit text stroke and fill color to create outlined text, testing stroke widths from 1 to 20 pixels, and explore a minimalist look with three to four pixels.

Add and replicate span tags across the page, assign an id like small span, and apply css rules to outline and style each instance, demonstrating consistent styling across multiple elements.

Explore color in a minimalist interface by changing text and background colors, trying red, orange, blue, greenish, or yellow, and learn HTML color codes and RGBA values.

Select a color scheme that works with this design, exploring white, dark gray, and black as base options, and optionally build out the rest of the cycle website.

Learn to build a bigger website by using multiple div tags with IDs such as page and header. Close div tags correctly and place content in the header and logo.

Learn to build a six-column layout by adding div tags with ids for sections, populating each column with headers and latin text and font awesome icons.

Set up the body CSS with a dark 3b3b3b background and an off-white rgba(250, 250, 250, 1.0) text color for testing, and apply the Abel font with 20px size.

Style headers with CSS by adjusting font-family, font-weight, and text-transform for header1 and header2. Fine-tune margins, padding, color, text-align, and line-height for better header typography.

Add and format div sections using firstSection with a background color and CSS tweaks. Practice testing layouts by duplicating content and applying simple paragraph styling to showcase section formatting.

Learn to build six CSS columns using a sixColumns container, overflow hidden, 1000px width, auto margins, and 30px padding; style each column with float left, 300px width, and 50px gaps.

Add a new div with the id columnsFullPage under the six columns and apply CSS to make the background extend to the full page width.

Set the paragraph container to 1000px width, hide overflow, center with auto margins, and add 30px padding; apply these styles across the page with a background color.

Add full width to the paragraph sections by duplicating the div structure and naming the sections firstSectionFullWidth and lastSectionFullWidth, then remove the background color to verify the full-width layout.

Add a logo h1 to the header with line-height 150px and width 1000px. Set font size to 8.0em, center with auto, and add 30px padding for a blocky look.

Integrate font awesome by copying the font-face block to enable scalable vector icons, then add two paragraph tags in column one and paste the icon codes above them.

Add font awesome graphics by applying font-family FontAwesome to the before pseudo-element, setting content to F004, and styling with large font-size, center alignment, and orange color.

Update the user interface by changing icons through copy-and-paste of assets and optional custom icons. Review fonts and color schemes, noting how orange on dark grey enhances the design.

Adjust h2 spacing and font size using em units to make headers pop, fix alignment and capitalization issues, and refine CSS styling for better headings.

Adjust font size to improve readability by experimenting with 24 and 30 pixels, apply font size to the paragraph tag, and format content including company statements, names, and closing statements.

Add a span to the title and apply CSS color styles to customize its look. Use a span to color text white and prepare for changing a word, Mammoth Construction.

Add and close the second span tag using header two, duplicate the header line, and then adjust span header two’s background color to improve contrast.

Practice adding another div tag with a black background, orange title text, and white body text to extend the project layout.

Learn to structure a simple web page using multiple div tags, assign ids such as page, header page, header, and logo, and add a header with the temp logo text.

Add and nest div tags with ids like firstSection and section1Content, include a header two and a Latin text paragraph to build five sections for the layout.

Set the page background to a dark navy blue with an off-white text color, and style h1 and h2 in orange using CSS to create contrast.

Add a class to the sections named sectionContent to apply styles across all items, then edit them collectively via CSS, such as setting a background color.

Apply section css to structure a page with a fixed width, overflow hidden, centered margins, and padding. Alternate section backgrounds to create a visually engaging layout for a multi-section website.

Apply font-family Abel with sans-serif and set font-size to 20px, uppercase headers, and center text; fix section width and overflow for a neat, stock-like layout.

Adjust the header logo in CSS by styling the H1 with line-height, width, font-size, and padding, then extend the logo text to create a fuller header.

Add span tags to header text to apply color styling and font sizes with em units, assign ids for sections one and two, and note upcoming CSS edits.

Modify the CSS to apply a dark blue background and a white logo color, then add a span with logowhite and style its color in CSS.

Experiment with text styling by applying font-stretch ultra-condensed and adjusting letter spacing in CSS to achieve a condensed typography look, then fine-tune font sizes and spacing to harmonize the design.

Explore how text justification aligns edges to create flush sides and a cleaner layout, boosting readability. See how a blocky corporate aesthetic, like a skyscraper, guides template choices for clients.

Add font awesome icons to a three-column section with icons on top, and type the word auto into header 1 to create a header and test by resizing the window.

Learn to build a simple website layout using divs with ids page, header-page, header, and logo, including an h1 temp logo and swapping background images and color divs.

Add divs with ids section 1 and section content 1, apply the section content class, and insert an h2 and paragraph across five sections.

Apply body styles in css by setting font-family to Abel, sans-serif, font-size to 20px, and text color to #3b3b3b, while making headings uppercase and centering text with zero margins.

Shows how to style a logo with h1, adjust line-height to 100px then 200px, set width to 1000px, font-size to 10em, and apply 30px padding, ultra-condensed font-stretch, and -3px letter-spacing.

Add the section content class to style the content with width 1000px, overflow hidden, margin 0 auto, and padding 30px; center content to create buffers that adapt to screen size.

Add debug colors to visualize layout: set the body's background to blue, then yellow, create section content with a light eaeaea background for section one, and duplicate with orange.

Add free public domain images as background images to div sections by copying image URLs into background-image properties. Explore how swapping images and adjusting colors affects layout across sections.

Learn to set up a background image with css: no-repeat, center positioning, fixed attachment, and size 100%. Adjust logo line height and padding to shape the site's opening.

Learn to style multiple div items by applying relative positioning, a 500px height, a grey background, and padding to move content toward the middle; duplicate items to expand the layout.

Swap the image by updating the CSS background with a copied URL, boost readability by setting text to 30px, and increase logo padding to 300 to explore layout across sections.

Learn to make text pop over images by using a translucent rgba background and adjusting text color in CSS. Tweak rgba values and darken tones to improve readability and contrast.

Adjust header 2 by applying font stretched options like ultra condensed, navy blue color, and negative 2 pixel letter spacing, then fine-tune padding and font sizes from 5.0em to 12em.

Experiment with logo color by applying HTML color codes to try greens, whites, and dark grays, then settle on a balanced logo color for a polished website.

Change a div tag to a dark green to make the section work, emphasizing contrast and proper use of offsetting divs with a background image in a simple layout.