Web Design Foundation: HTML5 + CSS3 for Beginners

Identify the three parts of a website—HTML for markup, CSS for styling, and JavaScript for client-side behavior—and learn how HTML uses tags to define text types like paragraphs and links.

Explore HTML tags, learn how opening and closing tags use angle brackets, and distinguish proper from improper nesting with li and bold examples, and note attributes come next.

Explore how HTML attributes add information to elements via name and value pairs inside opening tags, using href for links and src and alt for images to support screen readers.

Discover the core pages of a website—the doctype and HTML structure—and how the head with metadata, title, and internal or external CSS and JavaScript shapes the body content for SEO.

Explore how the title tag defines an HTML document’s title, appears in the browser tab and search results, and demonstrate it with a Sublime Text example.

Create your first HTML file using Sublime Text with HTML syntax, add doctype HTML and HTML, then build a basic head with a title and a body, with closing tags.

Indent HTML tags using the tab key to improve readability and collaboration by properly indenting head, title, and body elements within the HTML document.

Compare legacy HTML tags with HTML5 formatting, using b and i versus strong and em, and underline with the u tag, while noting CSS alternatives for text formatting.

Explore anchor tags to create hyperlinks, use href to link to pages or email addresses via mailto, and apply target to open links in new windows with practical examples.

Learn how paragraph tags use opening and closing p tags to enclose text, creating paragraphs with 16-pixel top and bottom margins for readable spacing, unlike line breaks.

Explore heading tags from h1 to h6 and learn their hierarchy for document structure. See how they render in a browser and mirror sizes in a text editor using HTML.

Learn how HTML comments start with a left angle bracket, exclamation point, and two dashes, and end with two dashes and a right angle bracket, used for notes and debugging.

Apply the img tag with a src to locate images and include alt text for accessibility; organize files in the same folder or an images subfolder like images/my_picture.jpeg.

Learn about the four image formats compatible with all browsers—gif, jpeg, svg, and png—and how each supports animation, pictures, vector graphics, and transparency on web pages.

Explore how JPEG images offer thousands of colors and blending, ideal for photographs, while lacking transparency and using compression that reduces quality.

Explore the pros and cons of PNG images, including rich color gradients and transparency, the uncompressed nature, and compare them with JPEGs while noting larger file sizes for web use.

Discover how svg images, a vector format adopted by html, enable interactivity and animations while staying crisp when scaled, with small file sizes for fast web delivery.

Learn how to use HTML to create ordered and unordered lists with ol, ul, and li tags, including styling with CSS and changing bullet types to squares.

Apply the fundamentals of HTML basics to build this section project web page. Keep everything simple while applying the fundamentals learned.

Organize the HTML section project by creating a start folder and an img folder for images, applying the logo, and building in Sublime Text from the content file.

Learn to add a body tag and paste content into an HTML file. Transfer information from a separate document and review how browser rendering differs from plain text formatting.

Learn to insert HTML comments with <!-- and --> to hide notes in the head or body, and note how country rules affect displaying contact details like name and email.

Indent content inside the body tag, then insert an img tag with the src path to the img folder and fd_logo.png, and add alt text Furbo Deletto logo.

Learn to structure a web page by applying an h1 main heading and paragraph tags, create separation from an image tag, align with tab key, save, and refresh the browser.

Learn to structure restaurant information with an unordered list in HTML, using ul and li tags to group event types, add bullets, save, and refresh to view links.

Apply anchor tags to link menu items and email addresses using href and mailto. Use a placeholder hash for unknown pages and test in the browser.

Learn the basics of CSS, the cascading style sheets used to style HTML documents and create layouts. See how CSS improves visual appeal across computers, tablets, and mobile devices.

Explore how to apply CSS to HTML using inline style attributes, internal styles in the head, and external CSS linked files, including their loading order and advantages.

This lab demonstrates the css pecking order by creating an external css file, linking it to html, and testing how external, internal, and embedded css affect h1 color.

Learn how to add css comments to document the purpose of styles, show how comments explain where and why css applies to html elements, and improve readability for future editors.

Explore applying color in CSS with named colors, RGB values, and hex codes to create vibrant web pages. Understand color ranges 0-255 and browser support.

Explore CSS selectors, how to apply them to HTML elements, IDs, and classes, and see examples of teal background, white text, centered headings, and font sizes via an internal stylesheet.

Learn how css attributes and values shape your web page by applying properties like background color, text alignment, and font size, with a Subtitle class example in teal.

Discover how to style fonts with CSS, selecting font-family and font-size, applying bold or italics, text-transform, decorations, alignment, and color via hex or RGB to achieve the look you want.

Style fonts on a web page by applying CSS to body, h1, h2, and p, including font family, size, color, text transform, and alignment using an internal stylesheet.

Explore how to customize fonts in css by comparing user, web, and directory fonts, explaining when each type loads and how to use @font-face for directory fonts.

Install and apply web fonts from Google Fonts via HTML link or CSS import. Test by applying Roboto and Sabatina with font-family and font-face after downloading and unzipping fonts.

Define css backgrounds by setting colors with rgb or hex codes, applying background images, and controlling repeat, size, and attachment to shape page visuals.

Define CSS backgrounds using an internal style block, apply hex color e5e6fa to the h1 and center it, then use a background image with no-repeat and cover.

Explore how classes and IDs classify elements with the class attribute and unique IDs, where IDs target a single element and classes repeat, for example #main-title and .subtitle.

Explore web layout types by comparing fixed and responsive designs: fixed uses a set width, about 960 pixels, while responsive scales with the window size and adapts to device.

Learn to structure layouts using header, nav, main content, section, aside, and footer; understand when to use divs and the HTML5 section elements to build web page layouts.

Create a main div with an id, then build header, nav, aside, section, and footer to organize content and demonstrate HTML element structure.

Master how CSS units of measurement set the size of your web pages across platforms by using pixels, points, ems, and percentages, and apply margins and padding to control layout.

apply css unit measurements in a lab by embedding an internal stylesheet, setting pixel and percent widths and heights, and coloring divs to visualize header, nav, side, section, and footer.

Explore the CSS box model, detailing content, padding, border, and margin to control element sizing. Center elements with margin auto and style borders by color and width.

Master how to use CSS floats to align elements left or right, forming side-by-side columns in a container. Use clear: left, clear: right, or clear: both to prevent layout breaks.

Join this lab to practice floating CSS elements in HTML5 and CSS3, building a header, nav, section, aside, and footer layout with a centered 1440px container and clear floats.

Learn to use media queries to build a mobile-friendly site that adapts across screen sizes with breakpoints, ensuring hover-based interactions also work in touch environments.

Learn to implement the @media rule in CSS to build a mobile-friendly, tablet-responsive web page, using percentage widths, color changes, and live responsive testing to adapt layouts across devices.

Learn how cross browser compatibility ensures your site functions across different web browsers, including older ones, by testing on multiple browsers and handling feature support.

Edit photos in the browser using filter effects such as blur with a pixel rating. Adjust brightness and contrast in percentages and apply a reddish-brown overlay for a gradient look.

Apply CSS image filters to a three-image gallery, using blur, sepia, and contrast, and explore hover effects and the first-of-type pseudo-class within a simple HTML/CSS project.

Learn to transform elements with CSS, rotating, scaling, and translating to move elements on a page, with examples like rotate 30 degrees, scale 1.5, and translate 100px by 50px.

Explore css transitions, including transition property, duration, timing function, and delay, and see how hover state triggers changes in width, height, and background color, demonstrated with a box example.

Organize a ready-to-use copy for your landing page and web site as a structured text document with sections for home page, experience, and gallery.

Create an HTML file by importing copy from the homepage into the body, build the head and body structure, format text and images, and save as index.html.

Apply default css properties to a web page by resetting margins and borders, setting the body font family to keano with fallbacks, font size to 13pt, and a gray background.

Create a fixed, full-width navigation bar using a nav with an unordered list, horizontal items, fixed height, adjusted typography with Keano, hover underline, and optional logo on the right.

Build main content area using the main tag, center it at 50% width and 500px height, and style image with a 450px border radius, 10px black border, and 0.15 saturation.

Finalize the landing page by styling the section and footer, adding top padding and paragraph spacing, center-align text, and adjust z-index for navigation to ensure clean layout and functional links.