Become a HTML and CSS Developer - (2020)

Install a modern browser and a proper code editor, set up a project folder, and create a hello world HTML file to run in the browser.

Learn to build your first web page with HTML tags, turning text like hello world into a main heading using opening and closing tags.

Discover how HTML paragraphs and new lines render in the browser, and how the p tag creates readable paragraphs. Understand browser defaults and how CSS will control spacing.

Learn how to create hyperlinks using the anchor tag, specify href and title attributes, and connect internal and external pages through practical examples.

Learn how to include images in your HTML page with the img tag and src attribute, whether the image is in the same folder or in a subfolder.

Learn how to create unordered and ordered lists in HTML using ul, ol, and li, with examples like to-do lists and step-by-step recipes, plus indentation for readability.

Create an html form with form tag, add text and number input fields, and a submit button, then organize them with div containers and understand server-side or client-side javascript processing.

Add a checkbox and a textarea to HTML forms. Use the required attribute for client-side validation and set checked by default when needed.

Learn how to build color and location selectors using HTML select and option tags, set a default option, and enable multi-select with the multiple attribute for form inputs.

Learn to build tables with table, tr, td, and th to display data, using the first row as headings and headers to define column titles, not for page layout.

Identify the structure of a HTML document by declaring doctype, html, head, and body, then set the page title, encoding (UTF-8), language, and description meta tag.

Explore Chrome developer tools to view any page's source code, inspect elements, and experiment with live changes without saving, using browser tools to learn HTML, CSS, and JavaScript.

Learn the role of CSS in web development, then select elements with selectors and apply style rules inside a style tag above the content to control color, fonts, and layout.

Learn how to include CSS in an external file to separate content from presentation by placing code into style.css. Use the link tag with rel=stylesheet and href to connect it.

Explore how to select single elements using IDs in HTML, assign unique IDs, and use the #id selector to target specific elements.

Learn how to select by class in CSS, assign veggie and meat classes to items, and style them green and brown, using Chrome Developer Tools to inspect the results.

Learn how the css box model represents elements as rectangles and how width, height, padding, borders, and margins determine total size, using an id selector to modify a yellow box.

Explore the box model by applying border, padding, and margin to boxes, including one-sided and shorthand properties, to control size, separation, and the appearance of content.

Explore content alignment with the text line property (left, right, center, justified), and center a container using automatic margins, while vertical aligned with middle and line height ensure proper centering.

Explore typographic basics in HTML and CSS, including setting the body font size, em and rem units, font-family fallbacks, and styling words with spans, bold, italic, and underline.

Explore how to use Google Fonts to enhance web pages, copy the embed code, and apply font-family choices to swap default fonts for a distinct look.

Start a responsive landing page project with a mobile-first design, define containers and a wrapper, and use media queries to adapt image areas, intro text, and service blocks.

Style the landing page top navigation by resetting browser defaults, setting body font and 16px base size, removing margins and padding, and implementing a hover transition for the menu.

Create a hero image by styling a cover background image, centering it, and adjusting padding, while formatting the overlaid text with center alignment, black background, white text, and responsive width.

Style the intro text and services area with a centered container, max width 1020, gray font, and 24px size, using reusable classes.

Learn to design a responsive landing page using a mobile-first approach, adapting layouts with CSS media queries at 700 pixels, switching to two-up service items and inline-block alignment.

Master the basics of HTML and CSS, build a real company website, and create responsive pages that look great on mobile while understanding why coding skills are in high demand.