HTML5 and CSS3: Craft your own websites (with 4 projects)

Explore the basics of HTML, learn the essential elements for building a project, configure image tags with attributes, create your first HTML document, and compare codes.

Learn the anatomy of an HTML tag, including opening and closing tags, angle brackets, tag names, and paragraph elements, to build structured web documents.

Learn the basic HTML document structure by using the doctype, HTML, head, and body tags, include a meta tag and a browser title, and place elements inside the body.

Learn how to use HTML headings to structure content with h1 through h6, create main and sub titles, and apply semantic HTML for better search engine optimization and accessible pages.

Learn to structure longer texts with paragraphs, block elements, and headings, using tags to separate content and format text in HTML5 and CSS3 projects.

Demonstrate how to use tags without content, such as br and hr, explain self-closing versus paired tags, and show when to apply CSS for spacing and borders.

Learn how to use HTML comments to describe how code works and to separate sections, enabling remote collaboration while avoiding exposing sensitive data.

Explore how the a tag uses the href attribute to create links that navigate to other pages or sites, with a Google example.

Learn how to open links in a new tab using the target attribute and _blank, keeping your site open while redirecting users to external websites.

Learn to insert images with the img tag using the src attribute and organize assets in an images folder with correct file paths, and note the tag is self-closing.

Learn how the alt attribute in image tags provides text descriptions for screen readers and search engines, improving accessibility and SEO by adding descriptive alt text to every image.

Explore unordered and ordered lists, create list items with li, and build nested lists using ul and ol, while applying CSS via style attributes to adjust layout and spacing.

Learn how to use ordered lists in HTML to enumerate steps, using <ol> and <li>, and distinguish them from unordered lists built with <ul>, with a practical to-do example.

Create and structure data in html tables using the table tag and table head. Use rows and cells, with columns like user id, name, and job.

Use the div tag to split a site into sections like products, testimonials, and reviews, and to create cards with distinct backgrounds and section titles with details links.

Finish the basics section of the demo by building a base male instructor, creating elements, mastering the template's main parts, using attributes and self-closing tags, then start our first project.

Explore basics of success by integrating the system of state in HTML. Learn to add success in HTML, study the main properties of success, and prepare for your first project.

Explore three ways to apply CSS: inline styles, internal styles in the head, and external styles via a linked file. External CSS improves maintainability and consistency across elements.

Explore the anatomy of CSS through selectors, element tagging, and property-value rules, then apply font-size, color, and background styles to demo files.

Master inline CSS by applying styles directly in HTML with the style attribute, such as coloring an h1 red, and learn when to use external CSS for maintainability.

Learn how to write multiple CSS rules for a single element, separated by semicolons, and apply color, font size, and borders using pixels and other units.

Apply internal css by placing a style tag in the head to style multiple elements with one selector, using rules, properties, and values.

Explore external css by creating a stylesheet file, organizing folders, and linking it to html with a rel="stylesheet" href attribute, while comparing inline and internal styles.

Explore the CSS cascade order, comparing inline, internal, and external styles and browser defaults. Discover that the last loaded rule wins, with inline styles potentially overriding external ones.

Learn how to add CSS comments, understand their syntax, and view them in the project sources to protect sensitive information while documenting styles.

Learn to use id and class attributes to target elements: assign a unique id to a single element, avoid duplicate ids, and apply shared styles with classes across multiple elements.

Apply the class attribute to multiple elements and style them using the class selector with dot notation, so the same rules apply to paragraphs and buttons.

Learn how to use id selectors with the # selector, keep ids unique, and combine a single id with multiple classes to style elements with purple background and white text.

Explore css selectors order and specificity, learning how id, class, and tag selectors determine which styles apply, and practice applying borders and overrides in practical examples.

Explore how to use CSS colors, including rgb, hex, and hsl values, adjust red, green, and blue channels, and experiment with a color picker to create web color variations.

Explore how color names are used in css through class-based styling, using a p tag with a class of caller name and colors like crimson.

Discover how hex color codes work in CSS, using six digits after a hashtag to represent red, green, and blue from 00 to FF, with practical examples in code.

Learn how to shorten hex colors by removing repeated digits and using shorthand forms, with examples like fe55 to illustrate compact color notation for a purple color.

Explore rgb color fundamentals in html and css, using red, green, blue values to create and mix colors, apply them with classes, and visualize resulting styles.

Explore rgb with opacity by adding a fourth value to colors, adjust the alpha from 0 to 1, and apply transparent effects to elements.

Explore how to use HSL to set colors in CSS by adjusting hue, saturation, and lightness, and apply practical color values in your HTML and CSS projects.

Apply background colors to elements using the background-color rule, experiment with hex and named colors, and observe how different backgrounds affect text and layout.

Control background opacity in CSS from 0 to 1 to fade colors and adjust text visibility, exploring nested demos and how specificity and cascading override rules.

Learn how to solve the opacity problem by applying semi-transparent backgrounds with rgba alpha while keeping text fully visible, ensuring background transparency without altering content in css3.

Learn to apply a background image to an element using CSS, referencing a relative path from an images or assets folder and using ../ to move up directories.

Learn to center a background image for two elements using background-position: center and background-size: cover, applying rules to ensure focus.

Explore the box model and how width, height, padding, border, and margin shape element size and spacing. Understand internal spacing and external margins, plus browser default styles.

Understand how width and height define an element within the box model, why block elements default to full width, and how 100% or 100 pixels adjust sizing.

Explore how padding creates space between content and an element's border, improving readability and visual balance, with demos comparing with and without padding and background color.

Explore applying padding to each side of an element using per-side properties and the padding rule, including top, right, bottom, and left values. Practice setting padding to create varied spacing.

Learn how to apply the CSS padding shorthand to set different top, right, bottom, and left values with one rule, including examples of two-value and four-value syntax.

Explore how padding adds to an element’s size and how box-sizing with border-box keeps width predictable, simplifying total size calculations and avoiding math-heavy adjustments.

Explore how borders act as the middle layer between padding and margin, and learn to set border width, color, and style (including solid, dotted, and transparent) using a border class.

Learn how to apply borders to individual sides of elements with CSS: border-top, border-right, border-bottom, and border-left. See examples with left and bottom borders, padding, and background color.

Apply the border-radius property to create rounded corners on elements, with or without borders. Adjust radius values and padding to control rounding, background color, and content spacing.

Apply margin properties to control outside space around elements, using top, bottom, left, right, and shorthand values, and compare with padding to manage spacing between items.

Put together a web layout by applying the box's elements: set width and height, add padding for text, apply margins, and style borders with border radius to combine elements.

Explore how to use the CSS text-decoration property to apply, remove, or customize underline and line-through effects on text and links, including practical examples.

Explore how the CSS text-transform property controls text appearance with uppercase and lowercase transformations, including handling text from databases, and see practical coding examples.

Explore how to adjust letter spacing in CSS to control the space between characters, using a spacing class and practical demos to see text spacing effects.

Learn how to choose and apply font families in web design, including serif, sans-serif, monospace, cursive, and fantasy. Explore browser fonts and adding external fonts via CSS in practical projects.

Explore how to use the font style property in HTML to switch between normal, italic, and oblique text, with hands-on practice creating classes for italic and oblique.

Explore font-weight in CSS, using values from 100 to 900 to adjust text thickness; understand defaults and how font-family variations affect weights, including bold.

Master the CSS font-size rule to change text size in paragraphs and classes. Explore units beyond pixels and preview results in the browser.

Discover how the CSS display property toggles block and inline behavior, enabling side-by-side or stacked layouts with sample elements using line box and block text classes.

Explore hiding elements with CSS using the display property, applying split rules, and changing visibility in the browser through a practical paragraph example.

Learn how CSS position rules shape element layout, using static, relative, absolute, fixed, and sticky values, with relative as the reference for absolute and how to place elements on screen.

Static is the default CSS position that keeps elements in the normal document flow. The lesson demonstrates moving elements with absolute positioning and using top, left, right, and bottom values.

Learn how relative positioning moves elements with top and left offsets, its effect on layout, and its limited everyday use alongside absolute positioning.

Learn how position absolute removes elements from the normal flow and places them at the upper right using top and right, and how relative context fixes layout with offsets.

Explore how relative containers anchor absolute elements, preventing overflow to the page, and practice placing absolute boxes with left, top, right, and bottom values inside a controlled parent.

Anchor elements to the screen with position fixed, use top and right offsets to place them, and understand how fixed positioning keeps elements visible as you scroll.

learn how position: sticky makes an element scroll with the page, become fixed at a threshold like fixed, and yet stay relative in its original place.

Finish the basics of this section and begin building your first website in the next section, applying what you’ve learned to expand with more projects.

Kick off your html5 and css3 project with a tribute page, using course-provided images and customizable sections about a band or bard, including quotes to practice core layout skills.

Set up a basic html and css project structure for a tribute page, copy reference images, link css, and preview a red h1 title in the browser.

Build the first section by creating a container div, adding a featurette with images and captions, and composing a biography block with a title and paragraphs.

Conclude the html project by creating a quotes section with the quote tag and a container, then add a grid using figure and figcaption, plus a more info link.

Apply a background color and font family, then center a container with a max width and margins; style the header, images, and bordered biography.

Concluding the CSS demonstrates styling quotes and quote containers with background colors, font weight, font size, italics, and centered alignment for readability.

Explore how to use HTML5 elements and CSS to craft your own websites across four projects, applying learned tags like figure and blockquote to build future content.

Explore how HTML forms handle data on the frontend and backend. Learn the essentials to store or send user information to a server.

Learn how forms collect user data and validate it with required attributes, using form, label, and input tags, and input types like text, select, checkbox, regulators, and bio inputs.

Create your first HTML form by using the form tag, input fields with type text, and labels, then style a basic demo form and view it in the browser.

Configure inputs with the name attribute, binding its value to the input's purpose and enabling name/value data sent to the server on form submission.

Learn how to implement the label element in forms by linking the label and input with the for attribute, ensuring semantic markup to improve performance on Google.

Learn how to send form data to a server using a submit button and input type submit, triggering an ATP request to a backend and handling data on the server.

Select an element to pass its value to the server using a name attribute and option values, and build a labeled select with options like programmer and devops.

Use the selected attribute in the option tag to set a default choice in a select input. Choose no as the preset option to require readers to acknowledge contract terms.

Explore how to implement a multiple select in HTML, enabling users to choose one or more options with the multiple attribute, using labeled options such as bag and wallet.

Learn how to use the textarea element for longer text, including labeling, open and close tags, and width and height attributes for sizing.

Learn how to use fieldset and legend to group related inputs, create semantic form sections, and label inputs like first name and last name.

Learn how to implement HTML5 datalist to provide searchable suggestions for an input, linking a list via the list attribute, with practical flavors like cherry, green tea, and chocolate.

Learn to create password inputs with HTML5, masking characters using the password type, and label fields for sign-up pages.

Learn to reset all form fields with an input type reset placed beside the submit button, clearing fields including selects and restoring the form to its initial state.

Use radio inputs to let users choose a single option, with clear labels. Group radios by the same name and provide values for backend submission.

Learn how to implement the input type checkbox, which allows selecting one or more options, use labels and name attributes, and create multiple options like a newsletter signup.

Learn to use data inputs with an input type date and a calendar picker to select and view dates, label it for a birthday, and optionally type the date.

Use the HTML file input to upload images and other files to a server through a form. Create labeled inputs, test selecting files, and submit to backend.

Explore using the input type number to collect numeric data, including linking a salary field to its label, adjusting values with arrow controls, and discussing when to prefer text inputs.

Explore how to create an email input, compare type email with text, and apply browser-based validation on form submission to ensure correct email formats.

Explore how the value attribute stores and preloads input fields, letting users see or edit default names, and enabling forms to submit or reset with predefined values.

Explore the disabled attribute for input elements: block editing, keep the displayed value, apply with a value attribute, and see the gray, non-editable field in a live form.

Use the placeholder attribute to show hint text inside input fields, guiding users on what to enter. See examples like type your current job here to improve form clarity.

Learn how the required attribute enforces form validation, triggers warnings for empty fields, and ensures users provide data such as birth year before submitting HTML5 forms.

Conclude the eight animal farms section by applying the key inputs and uses, and prepare a project to create our own farms, applying all learned knowledge in the next session.

Learn to build a real vehicle listing form by combining inputs such as title, price, description, brand, mileage, images, and a submit action to sell a car on a platform.

Set up a starter HTML5 and CSS3 project by creating a folder structure with index.html and style.css, linking styles, applying a CSS reset, and testing with a live server.

Create a page header with a container and background, place an h1 title and descriptive paragraph to feature your vehicle, then add non backend form elements for user input.

Create an HTML form layout by wrapping inputs with labels, marking required fields with an asterisk, and validating title, price, and description with placeholders and max length of 30 digits.

Finish a complete car listing form using HTML5 inputs, including required fields for model, mileage, date, gearbox, and optional feature checklists, plus multi-file image uploads.

Learn to reset and unify form styling by selecting groups of elements with shared styles, applying borders, padding, and type-specific input rules, and styling headers to create a cohesive look.

Build a Google form–style UI by centering a form container, styling headers, borders, and inputs, and applying hover effects and an uppercase submit button.

Discover how to make our websites responsive across devices—computers, tablets, TVs, and smartphones—using practical techniques introduced in this introduction.

Master responsivity by applying rules based on screen resolution to tailor a web page for each device, including tablets, using the media carry resource.

Configure HTML for responsive design by adding the viewport tag in the head with device-width and initial-scale, and structure a basic responsive project in an index.html inside a Responsivity folder.

Create breakpoints with media queries to adapt website layouts for specific screen sizes, define rules inside each query, and test responsive designs across devices.

Master responsive design with min-width media queries in a mobile-first approach, applying styles for screens larger than 800 pixels to optimize websites across devices.

Learn common breakpoints and a mobile-first approach, using 600 px as base to adapt layout structure for tablets, laptops, and desktops, with device-specific rules and framework usage.

Apply CSS rules only in landscape mode with a media query using orientation: landscape, setting properties like background color for elements. Test by rotating the device and inspecting the result.

Conclude the responsive web segment by applying breakpoint-based adjustments in a real project, reinforcing key lessons and preparing learners for the next section.

Build a hosted website from scratch with cloud servers, plans and prices, a domain and email workflow, a contact form, and a responsive design optimized for mobile devices.

Organize the project base structure by creating folders, adding images and logos, and integrating an icon library and script with a live server and browser preview.

Build a navbar using a nav container, a logo image with alt text, and list of nav items with href '#', including homepage, prices, content, and a sign in button.

Style a navbar using CSS in this HTML5 and CSS3 course, covering global resets, typography, color, spacing, and hover effects to build a polished, responsive navigation bar.

Create a banner section with a main banner div using a centered, cover background image, overlaying h1 and paragraph text with relative positioning and text shadows to improve readability.

Build a services section with a service container and a three-item ul, each using an icon from an icon library; apply flex layout, padding, sizing, and color styling.

Builds a pricing plans section in HTML and CSS, with four monthly plans—Basic, Dedicated, Cape, and Claude—displaying price per month and features like disk space, subdomains, and email accounts.

Learn to create a pricing section with a flex layout and well-styled pricing cards. Use circular price badges, typography adjustments, and interactive plan buttons.

Implement a search domain section to check if the domain is available, register a domain, and style the form with inputs and a submit button on the web page.

Conclude the desktop version by building and styling a contact form inside the main container, including name, email, and message fields with breakpoints to fix tablet and mobile layouts.

Rate responsive success across breakpoints at 1001px and 900px, adjust the plants and services containers to 95% width with small margins, and enable flex wrap for tablet and mobile layouts.

Explore flexbox, a commonly used layout resource, and learn how to connect it with prior project work to easily align and position elements.

Explore what flexbox is and how to apply it by setting display:flex on the container, organizing child elements with flex rules, and preparing for a demo.

Learn how to apply flex to a container by setting display:flex, so child paragraphs behave as flex items and align side by side in a flexbox layout.

Explore how changing flex direction from row to column reorders items, making them stack like blocks in the flex container; the default is row.

Explore how the flex wrap property lets items move to new lines when the container fills, turning a single row into multiple rows, exemplified by a three-up grid.

Learn how to use CSS flexbox justify-content to align items horizontally, exploring center, space-between, and space-around values with practical examples of centered and spaced boxes.

Learn to position elements along the vertical axis using the align-items property in flexbox, experimenting with center and stretch values within a flex container.

Learn to create space between flex items with the CSS gap property, using pixel-based distances that apply to each item, enabling wrapped layouts without manual margins.

Learn to reorder content using the flex order property to rearrange child elements, with ids guiding specific positions on small devices via media queries.

Explore how the basis property defines the flex item base size and works with flex-grow to distribute space, using a basis class and a flex-grow of one to observe behavior.

Explore the shrink property in flexbox, the counterpart to grow, to keep element sizes while others shrink, using basis and grow, with a practical atm example.

Learn to use the flex shorthand to set grow, shrink, and basis in flex layouts, compare different element rules, and observe how multiple properties determine element sizing in a container.

This lecture demonstrates using align-self to center a single flex item while others follow the container alignment, illustrating practical flexbox alignment in CSS3 and HTML5 projects.

Apply flexbox to the container to control alignments, flex, and wrap, adjust individual items, and build larger projects with this technique.

Design a social network home page layout using HTML5 and CSS3, showcasing a left panel with device imagery and a right panel with logo, inputs, and login options including Facebook.

Create a project folder structure for a clone Instagram site, organize assets (images, icons, favicon), link fonts and styles, set the title, and test in the browser.

Build a login form within a main container using left and right panels, include username and password inputs, a login button, social login options with Facebook, and forgot password links.

Practice building a register page with a sign-up flow, image placements, and a footer of links while modeling the page structure and preparing styles for the next class.

Beginning the styles teaches basic CSS setup: adjust margins and padding, apply a width-limiting rule, and style a flex layout with a logo, form, inputs, and a button.

Master the final styling of a login form by centralizing absolute elements, adding separators, and styling Facebook login, with responsive, accessible typography.

Learn to finish the desktop version by styling layout with flexbox, centering text, adjusting margins and font sizes, removing bullets from lists, and preparing the footer and copyright styling.

Learn responsive design for mobile devices by adjusting the body background, styling the main container and form, centering elements, and refining spacing for 405-pixel wide screens.