Video Resources

How to Build Web Pages with HTML and CSS (Frontend Development Fundamentals)

A five-part frontend development learning path that takes you from how the web works to building well-structured, accessible web pages. Start with the difference between the internet and the web, web servers, and browsers, then learn HTML structure, tags, and attributes. Master CSS layout with the box model and Flexbox, and finish with web accessibility, WCAG principles, alt text, keyboard navigation, and semantic HTML.

Frequently Asked Questions

What this playlist answers

11 questions this playlist covers — skim them for a quick takeaway, or dive into the videos above for the full picture.

This five-part learning path covers the foundations of frontend development: how the web works, how to structure pages with HTML, how to control layout and spacing with the CSS box model and Flexbox, and how to make websites accessible with WCAG principles and semantic HTML.

The internet is the global network of connected computers that transmits data, while the web is a system built on top of it that lets users access and navigate websites. The web relies on web servers, browsers, and languages like HTML, CSS, and JavaScript to present information.

HTML, CSS, and JavaScript are the core technologies of the web. HTML structures content, CSS controls visual design and layout, and JavaScript adds interactivity, and together they power modern websites and web applications.

A basic HTML document includes a doctype declaration, an html root element, a head section for metadata, and a body section for visible content. HTML elements inside the body are built from an opening tag, content, and a closing tag, and attributes add details such as image sources or link destinations.

The CSS box model describes every element as a rectangular box made of content, padding, border, and margin. It determines how much space an element occupies and how it is spaced from surrounding elements, which makes it essential for accurate, responsive layouts.

Padding is the space between an element's content and its border, while margin is the space outside the border that separates the element from others. Padding controls internal spacing and margin controls external spacing.

The box-sizing property controls how an element's size is calculated. With the default content-box, width excludes padding and border, while border-box includes them, which makes layout calculations more predictable.

CSS Flexbox is a layout model for aligning and distributing space among elements in a container. Setting display: flex turns child elements into flex items arranged along a main axis and a cross axis, and properties like justify-content, align-items, and flex-wrap control alignment, spacing, and responsiveness.

Flexbox lets elements grow, shrink, and align automatically based on available space, so layouts adapt to different screen sizes without complex calculations. Properties such as flex-grow, flex-shrink, and flex-basis control how each item resizes.

Web accessibility is the practice of making websites usable by everyone, including people with visual, auditory, motor, or cognitive disabilities. The Web Content Accessibility Guidelines (WCAG) are built on four principles: content must be perceivable, operable, understandable, and robust.

Alt text describes images for screen reader users, keyboard navigation ensures every feature can be used without a mouse, and semantic HTML tags like header, nav, and main help assistive technologies interpret page structure. Together they make content easier to navigate and understand for all users.

Featured:

Turn AI anxiety into action

Featured:

Bolstering technical skills development in MENA

Featured:

Explore new digital career pathways

Featured:

Take action on generative AI

Featured:

Hear what the experts have to say

How to Build Web Pages with HTML and CSS (Frontend Development Fundamentals)

What this playlist answers

Proprietary research. Actionable frameworks.

Bridging the skills gap: The power of digital apprenticeships in a rapidly evolving economy

Leveraging AI to uncover $50M in revenue growth and $500K in savings

Data illiteracy: A hidden threat

Using customized training solutions to create new career pathways

Creating an AI talent ecosystem in Latin America

ADP: AI skills power great customer experiences