Web Development Fundamentals: HTML5 and CSS3 for Beginners

Identify the essential web development tools, choose a browser (Chrome) and a code editor (Visual Studio Code), and commit to working along with the instructor.

Learn how to install a web browser and the code editor by visiting google.com, downloading chrome and visual studio code, accepting terms, and moving them to applications.

Explore the building blocks of the web by learning HTML as the markup language with hypertext links, CSS for styling, and JavaScript for interactivity, using a car analogy for pages.

Learn how HTML elements serve as the building blocks of a web page, identified by tag names. Use opening and closing tags to nest elements and place content inside pages.

Explore the html file structure by identifying the doctype, html, head, and body sections, and learn how the title tag and metadata appear in browser tabs and search results.

Demonstrate creating a new html file, naming it, applying doctype and html tags, and saving to open in a browser to practice the basic page structure.

Learn how heading tags h1 to h6 create content hierarchy, with a single h1 per page shaping search engine optimization, and how the paragraph tag organizes text inside blocks.

Learn how to use heading and paragraph tags in HTML5 by building a sample page with doctype, html, head, title, and body sections.

Learn how the strong and em elements differentiate text within a paragraph by making it bold or emphasizing it. Close tags to avoid random behavior.

Demonstrates applying strong and emphasis formatting in HTML by bolding and emphasizing text, and previewing the result in a web browser.

Create a new dragon exercise file, delete the prefilled text, and start from an empty, clean file to craft the dragon description from China.

Duplicate the file, rename it as solution, edit in Visual Studio Code, emphasize China and Chinese New Year, then preview in a browser to build muscle memory.

Learn to name and organize web project files with short, descriptive lowercase names using underscores or hyphens, and structure folders with an index.html in the root and an images folder.

Learn how anchors and attributes enable linking between pages using the anchor tag and href, including absolute and relative paths for effective web navigation.

Create a basic html5 page structure and practice anchors by linking a home page, an instructor page, and the sections of the course page, completing the assignment.

Complete the exercise to maximize learning, review the demo, and verify anchors and links across the home page, instructor pages, and course sections.

Discover the basics of CSS, including how cascading affects styles, how to attach styles with the style attribute, and how to write property-value pairs using colon and semicolon.

Master basic CSS styles by applying text-align left, center, or right; font-size adjustments; and color or background-color. Learn color formats in hexadecimal, RGB, and HSL to pick precise values.

Learn to create and save html and css files, set up folders, and preview in a browser. Apply text alignment, font size, color, and background color with a style tag.

Create a two-page HTML5 project that uses headings, multiple paragraphs with strong and em emphasis, internal anchors between pages, and CSS3 styling for fonts, colors, background, and right-aligned text.

Explore the power of css by styling an html lion king page in a practice exercise, using emphasis, anchors, varied fonts, colors, alignment, and a soothing background.

Review the HTML5 structure and CSS basics, and master building blocks for web pages, including doctype, html, head, body, headings, paragraphs, anchors, assets, and styling.

Explore the uses of lists in web development, including regular, ordered, and unordered lists, list items, and navigation bars; learn to create and structure lists with ul and ol.

Practice building an HTML file by creating ordered and unordered lists, then preview results in Chrome and adjust tags. Learn to incorporate images to reinforce core HTML concepts.

Learn how to use the image tag and src attribute, decide between internal and external images, avoid bandwidth issues, and apply alt text for accessibility.

This demo shows how to download, save, and reference an image in an html document, add text, and preview in chrome, with cropping and resizing to contain images.

Create a three-page website with a home page listing two board games and two detail pages, each with an image and a paragraph about the game.

Create a basic web page by setting up HTML structure with doctype, creating folders and files, adding paragraphs, images, lists, and anchor links, then add simple navigation and optional styling.

Learn to use internal CSS to style multiple elements without repeating code. Apply selectors like p to set font size 24px for all paragraphs, with styles placed in the head.

Demonstrate hands-on HTML and CSS basics by applying and copying CSS styles, styling headings and paragraphs, adjusting color, alignment, and font size in a practical demo.

Learn how to use external CSS to share a single stylesheet across multiple HTML files, avoiding duplication by linking a stylesheet with the link tag to apply consistent styles.

Practice creating external stylesheets, linking CSS files across multiple pages, and consolidating styles with a single stylesheet to apply consistent design.

Learn how to style html elements with class and id selectors, and how ids override classes, with naming rules that avoid spaces for clean selectors.

Explore a quick demo of HTML and CSS styling, using classes to color elements, compare id versus class, and practice reusable, versatile styling.

Learn HTML comments, their role as documentation that does not affect rendering, and how to write single-line and multi-line comments.

Learn how to use html5 and css3 comments, including single-line and multi-line styles, to document changes like text color in h1 and body selectors.

Review HTML tags like p, a, img, strong and em, and ul/ol with li, then preview layout elements header, main, section, nav, and div; forms and JavaScript are coming later.

Explore the CSS box model by examining how block elements default to full width of their parent and grow in height with content, stacking vertically rather than side by side.

Explore the box model in HTML and CSS by manipulating header, body, and footer elements, adjusting height, padding, and margins, and observing how content flows without fixed heights.

Learn margin and padding in CSS: margin is the outside empty space, padding is the inside space; use shorthand for margins and the top-right-bottom-left order.

The lecture demonstrates margin and padding in CSS through a demo, testing pixel values, shorthand notation, and the effects on body and main elements.

Explore how borders form the boundary of the element and separate it from margin, and master the three key properties—border width, border style, and border color.

Explore css borders by experimenting with border, border-style, and border-color, applying solid and groove styles, adjusting width and per-side borders, and observing the effect on padding, margins, and box model.

Understand the CSS box model by calculating an element’s total width as content width plus left and right margins, padding, and borders, illustrated with a 320-pixel example.

Learn to create a structured web layout using HTML5 and CSS3, featuring a header, centered main section with a red border, a photo area, and styled typography and quotes.

Learn to construct a basic HTML5 page with header, main content, and image, then style it with CSS—setting background, borders, padding, and centering for a responsive layout.

Explore how flexbox turns a container into column-based layouts by arranging child elements into columns; compare with floats and learn modern CSS approaches.

Demonstrates building a basic HTML page with a header, a three-column content area, and CSS styling to adjust colors, margins, and text alignment, plus hands-on problem solving.