The Complete 2020 Fullstack Web Developer Course

Learn to write basic HTML by creating a CodePen pen, inserting a simple underline tag, and understanding how HTML tags render in a browser.

Compare free code editors like VS Code, Atom, Sublime Text, Brackets, and Notepad++, learn to write raw HTML with a text editor or CodePen, and decide which editor to download.

Create a properly structured html document by defining html, head, and body elements, save a hello_world.html file with underscores, and include the doctype.

Explore HTML attributes and how they modify elements, from basic paragraphs to images, using title, id, class, src, width, and alt, with practical examples in VS Code.

Explore how HTML treats whitespace and use the br tag to create line breaks within a paragraph. Learn to apply   to control spacing between words.

Explore the differences between italic text and emphasis, highlighting how the em tag improves accessibility for screen readers. Practice nesting strong and em tags and creating a simple italics.html task.

Explore how links connect web pages and help search engines index the web. Learn about the a tag, href, external links, and opening in new tabs with target attribute.

Create internal anchors by assigning IDs to page sections, link to the middle and bottom with hrefs like #middle and #bottom, and ensure the page scrolls to demonstrate direct navigation.

Learn to add images with the HTML img tag, configuring src, alt, title, width, and height. Apply absolute and relative links, use placeholder images, and make images clickable.

Explore the difference between block and inline elements, how they affect layout and interaction, with practical examples using paragraphs, headings, spans, and links.

Learn how to create HTML lists using unordered (ul) and ordered (ol) containers with list item (li) elements, including three items and proper indentation.

Advance from HTML fundamentals to building a full web page, hosting video and audio, and adding interactivity. Review core HTML concepts and practical skills with a supportive coding community.

Explore the differences between HTML and XHTML, including strict tag rules, self-closing slash usage, proper nesting, and how attributes and browser support shape markup.

Explore how to apply inline CSS in HTML using the style attribute, with examples on divs and spans, borders, and colors, and preview why internal CSS will come next.

Explore internal CSS by wiring style tags in the head to style divs with element, class, and ID selectors, learning how to reuse styles across pages.

Explore the core head elements of an HTML5 document—charset UTF-8, viewport meta, title, link, style, and script—and learn to inspect and debug them on real pages.

Learn how to select and implement key meta tags, starting with charset, description, keywords, subject, and robots. Create a starter HTML file with five meta tags in the head.

Learn asset pathing and how to reference images and css across folders using relative paths. Practice debugging missing files and using up-one-level navigation to ensure resources load.

Understand how HTML forms submit data to servers using get and post, with elements like input, textarea, select, and button, and how the action attribute directs submission.

Explore input types, selects, radio buttons, text areas, and checkboxes, plus file uploads and various submit controls, and learn how labels, names, ids, and HTML5 validation shape forms.

Learn to build a text area in HTML with opening and closing tags, resize, and set attributes like name, id, cols, rows, placeholder, required, min length, max length, and autofocus.

Build accessible dropdown menus using the select and option elements, set names and values, apply selected, disabled, and required attributes, and observe how get form submission populates the URL.

Explore HTML5 semantic tags like nav, header, footer, article, aside, details, time, and mark, and learn why to use them over divs.

Add audio to a web page using the audio tag with an mp3 source and type audio/mpeg, enable controls and looping, and provide an ogg fallback.

Explore responsive design that adapts a website to device widths using CSS and the HTML viewport tag, ensuring 320 or higher widths for mobile and better Google rankings.

Build a web page using HTML5 semantics with a two-column layout, including a blog feed and a subscribe form. Use CodePen and VS Code for editing and preview.

Build a web page from CodePen to VS Code using HTML5, add video and image, and create a responsive navigation, main, table, aside, and footer with internal and external CSS.

Explore CSS syntax through internal CSS on a web page, using selectors and property-value declarations to set color and font size, then move styling to an external stylesheet.

Explore color types in CSS, including named colors, hex codes, and rgb values; learn how shades, shorthand hex, and browser rendering affect design choices.

Learn to apply background colors across a page by styling the body with background-color, adjust text color for readability, and use selectors and classes like div.gray and h1.

Learn to apply background images with CSS using an id selector, and compare body versus div backgrounds while sourcing royalty-free images from Pixabay.

Explore how borders enhance web layouts by applying border width, style, and color to divs, spans, and nav bars, using inline and external CSS with practical examples.

Explore the box model and its components: box size, padding, border, and margin, and learn how width and height interact with small CSS tweaks in live demos.

Learn how padding creates inner space within the box and how the box model affects the background. Create a div, apply padding longhand and shorthand, and compare to margin.

Understand margin versus padding by comparing outside versus inside spacing around a blue bordered box, and learn to inspect dev tools to apply precise margins for layout.

Learn to center a 50x50 pixel box using margins, including margin 0 auto and variations like margin 50px auto, while exploring the box model and responsive mode.

Demonstrate the difference between border and outline in the CSS box model, and guide a hands-on exercise centering a 50x50 div with a border and a large red dashed outline.

Apply css only to style a web form, using colors, background images, borders, padding, and centering, while uncommenting a line in style.css to kickstart the design and sharing results.

Apply CSS to style a form, adjust margins, padding, width, borders, and colors; fine-tune labels, inputs, textarea, and button, using dev tools for live edits and trial-and-error design.

Explore how to decorate text with CSS using text-decoration properties, including underline, overline, and line-through, and customize color and style for span elements.

Learn to transform text with CSS text-transform by switching a paragraph between lowercase, uppercase, and capitalized, using a para selector and style.css, then reset with initial.

Apply the CSS text-indent property to create paragraph indentation, experiment with pixel or percentage values, and observe how text-align: justify positions the indented text.

Learn how to adjust line height in CSS using unitless numbers, pixel values, and percentages, and understand how font size and line height interact to create readable multi-line text.

Explore word spacing in CSS, which is the distance between words rather than between letters. Practice adjusting spacing using pixels, percentages, and other units, and learn by hands-on experimentation.

Explore the difference between serif and sans serif fonts, how font family affects text rendering, and practical guidance on when to choose serif for long passages or sans for branding.

Learn how to apply italic text with CSS font-style, using initial and none to reset, compare italic and oblique, and practice styling a selected paragraph via an ID.

Explore how font size shapes text height and layout in CSS, using pixels, percentages, centimeters, ems, and rems, and learn by testing different sizes.

Explore font weight by loading the Roboto font from Google fonts and applying weights from 100 through 900, comparing bold, semi-bold, light, and default styles with a Roboto font family.

Explore font variant to convert text to small caps and compare it with lowercase and uppercase, using a simple div with an id to apply the style.

Discover how to use font awesome icons via a content delivery network, link the stylesheet, and render scalable icons with the i element and fa classes like fa-facebook and fa-twitter.

Learn how links work as plain HTML elements with href, and use pseudo selectors to target different states. Style links with color, text-decoration, font size, font family, and weight in style.css.