Modern Web Design HTML5 CSS3 beginners guide to Websites

Create your first html5 page by building a basic html5 template with head and body sections, save as index.html in notepad, and view Hello World in a browser.

Explore HTML metadata by declaring the doc type and language, setting the charset, and including a title in the head, plus linking internal and external styles.

Learn to add paragraph elements in HTML, distinguish tags from elements, and understand closing and self-closing tags, with CodePen real-time rendering and whitespace behavior.

Explore how HTML adds meaning to text with semantic tags such as strong, em, and small, use br for line breaks, and distinguish semantics from styling to improve accessibility.

Explore HTML headings from h1 to h6 to structure content, using a single h1 for the main title and h2–h6 for subheadings, improving organization and SEO.

Organize content with ordered and unordered HTML lists, crafting list items and markers like numbers, bullets, letters, or roman numerals. The lesson previews adding images next.

Learn to add images with the HTML img tag, specify the source, and provide meaningful alt text to support screen readers, using placeholder images from lorem pixel for practice.

Learn to build and style HTML tables with table, tr, td, and th. Apply borders, headers, colspan, and rowspan, and shift styling to CSS for flexible layouts.

Explore how hyperlinks power the web using anchor tags and href attributes to link HTML pages, with local and external paths, and options like target to open in new tabs.

Explore building HTML forms with input types like text, email, password, and number. Learn to name inputs, add submit buttons, and understand get vs post data.

Explore HTML forms, including text areas, check boxes, drop-downs, and select options, and learn to set input names and values, choose get or post, and handle file uploads across browsers.

Explore how divs and spans structure content and enable styling with CSS, and use IDs, classes, and HTML5 semantic elements to define headers, containers, and footers.

Transform your html5 pages by replacing divs with semantic elements like header, nav, section, article, and aside, improving readability and layout planning while applying css for styling.

Discover how CSS visually enhances HTML documents by applying styles, selectors, properties, and values to create engaging web pages, with practical examples and references to CSS syntax.

Learn how to add CSS to a page using inline style attributes, on-page style tags, and external stylesheets, and understand how cascading order and inheritance affect colors and backgrounds.

Learn to select and style HTML elements using tag, class, and ID selectors with an external style sheet linked to the HTML page, applying colors to spans and targeted sections.

Learn CSS color options, including hex, shorthand hex, rgb, and rgba with opacity, and apply them to background colors, while considering browser compatibility and accessibility contrast.

Learn to apply a background image with CSS, control its size, repeat, and position, use the shorthand background property, and layer it with color when needed.

Master the CSS box model by examining content, padding, border, and margin, and see how Chrome dev tools visualize these layers for block elements.

Learn how to use css shorthand to style margins, padding, borders, border-radius, backgrounds, and fonts, with practical examples and browser compatibility considerations.

Explore css font shorthand properties to control font family, weight or bold, style including italic, size, and line height, and learn when to apply full shorthand versus individual properties.

Discover how the CSS display property controls how elements render as block, inline, or inline-block, and learn to use display none for hiding elements and list items for navigation.

Explore CSS positioning by applying static, relative, absolute, and fixed layouts, with top, right, left, and bottom adjustments. Learn z-index stacking and how transparency affects element visibility as you scroll.

Explore how pseudo classes let you check an element's state and apply interactive styling such as hover. See odd/even, first-child, and last-child effects on headers and list items in CSS.

Learn how CSS3 pseudo elements let you style specific parts of an element, using before and after, first letter, and first line, with content, color, and background options.

Discover how CSS selectors target HTML elements using tags, classes, IDs, and attributes; master descendant, child, adjacent, and general sibling selectors to apply precise styling.

Apply the same style to multiple elements using comma-separated CSS selectors, then add a yellow background and padding to items such as list items, headers, and nav, all within editor.

Learn how to expand typography with Google Fonts by selecting, importing, and applying fonts like Rock Salt to a web page, updating font-family across styles.

Explore how overflow controls content in a constrained area, and leverage online tools to generate border radius, shadows, and gradients while experimenting with height, width, and scroll behaviors.

Explore css generators for border radius, box shadows, gradients, and transforms, and copy the generated css while considering browser compatibility and responsive design with media queries.

Learn how media queries enable responsive web design by defining breakpoints, such as a max-width of 600, and overriding styles to adapt layout and color across devices.

Explore CSS animations and keyframes, including slide-in effects, duration and color changes, with practical examples and Mozilla resources to continue learning and practicing.