Introduction to HTML5 and CSS3

Organize your HTML5 and CSS3 projects with a clear site root and folder structure for assets, scripts, and styles, and choose the right editor and FTP workflow.

Explore how HTML5 and CSS3 join to create fully formed, responsive webpages, with HTML outlining structure, CSS styling, and JavaScript adding interactivity and animations.

Explore deeper HTML5 elements and semantic tags such as header, nav, main, aside, and footer, and learn how the doc type and language attributes guide the browser on what version of HTML to use. See how open and closing tags define elements, distinguish tags from elements, and use h1 for headings and p for paragraphs to support search engine optimization, while noting how the basic HTML5 structure includes header, navigation, main, aside, and footer and how cascading style sheets shape layout.

download and install Notepad++ on a Windows machine, selecting the 64-bit version, agreeing to terms, and configuring features like auto-completion, plugins, and language support for HTML, CSS, and JavaScript.

Configure Notepad++ via the style configurator to set global fonts and font size, enable word wrap in the view menu, and apply the global override before starting to code.

Master HTML5 page creation by adding a doctype, html, head, title, and body containers. Include a heading and a paragraph in index.html, save with notepad++ and preview in a browser.

Apply HTML attributes to elements to extend behavior, using global and local attributes like lang, class, id, src, and alt, with the name and value in quotes.

Validate your HTML5 site with the W3C validators, ensuring a language attribute and UTF-8 charset. Upload a file or paste code, fix the warnings, and confirm conformance to the standards.

Embed multimedia into your webpage using image, video, audio, figure, and iframe elements, and compare jpeg, gif, and png image types with relative paths like assets/lake.jpg for responsive content.

Learn how the anchor tag creates hyperlinks to other pages or sources using href and target attributes, including _blank and _self, to improve navigation and SEO.

Build a semantic navigation with the nav tag and an unordered list of links. Use li items and anchor tags to create hyperlinks within the header, main, and footer.

Create image maps by defining rectangle, polygon, or circle regions on an image and linking them with HTML using image-maps.com to generate code, and consider alt text and accessibility.

Apply cascading stylesheets to HTML using CSS rules, selectors, properties, and values, and understand inline, embedded, and external styles with their cascading priorities.

Learn how tag, class, and id selectors target HTML elements across inline, embedded, and external style sheets, and master the cascade and specificity that govern color and font choices.

Create multiple column layouts by applying css floats to sections and placing a left text column beside a right image column, with background color to visualize the columns.

Learn common CSS properties to modify layout, including height and background color, and use padding and margins (with shorthand and clockwise order) to control text spacing and typography.

Explore color in CSS by name, RGB, or hex, including the 140 CSS color names and the full 24-bit color range (0–255 per channel) with practical examples.

Discover how css styles the page by applying a gray body background, a global sans-serif font, and header visuals like a banner and logo.

Center page content by wrapping navigation, main content, and footer in a wrapper div with margin:auto and max-width:1000px. This keeps content centered on resize while the banner remains full width.

Move styles from the HTML file to an external style sheet, link with href to styles.css, and manage relative paths to assets for a global CSS.

Indent the code to reveal container structure, add comments for header, nav, and main, and keep styles in an external stylesheet to improve readability and maintainability.

Learn how to choose fonts with font-family fallbacks, compare serif and sans-serif readability, and apply font properties for accessible, consistent typography.

Enhance the navigation bar by converting list items to horizontal, non-bulleted links with padding and precise typography, using current item styling and hover transparency to improve usability and visuals.

Learn to transform square navigation tabs into rounded ones using border-radius on current and hover states. Add box shadows and a linear-gradient for depth and a consistent tab look.

Create a multi-page site with a shared navigation bar across pages, save separate html files (news.html, contact.html, about.html), and implement internal root-folder hyperlinks using a reusable template.

Learn how to style navigation anchor tags with CSS by applying the four hyperlink states: a:link, a:visited, a:hover, a:active—adjusting colors, text-decoration, and order to ensure accessibility and design consistency.

Explore how tables organize tabular data using table, tr, and td tags to create readable rows and columns, while CSS handles layout.

Learn to author accessible tabular data with HTML table elements using tr, td, and th, style borders, alignment, headers, and alternating row colors for clean, readable data displays.

Understand how HTML5 forms capture data with input types and labels, and transmit via action and method (GET or POST) with encoding and validation for secure, interactive experiences.

Create a bare-bones html form for a contact us page with first name, last name, email, and text area for comments, including a label, placeholders, and submit and reset buttons.

Style the contact us form with css to create a modern layout, featuring a blue h1, centered form, calc-based widths, placeholders, borders, and hover buttons.

Learn how modern browsers render HTML5 and CSS3 consistently, and implement graceful degradation by targeting Safari and Firefox with vendor prefixes, ensuring backward compatibility across older browsers.

Explore web accessibility by applying 508 standards and WAI guidelines, add alt text, and use role attributes to define header, navigation, main content, and footer for screen readers.

Publish and deploy your website by acquiring a domain and hosting, then transfer files via ftp using FileZilla to upload index.html and site folders to the server.

Upload your HTML5 and CSS3 site to your server, learn to structure a navigation list with the nav tag, add forms to capture data, and use FileZilla for FTP.