Learn Modern Web Development From Scratch - HTML and CSS

Master Emmet to speed up HTML coding, add semantic sections, and apply meaningful meta tags—like viewport and name/description keywords—for better SEO and accessible web pages.

Learn how to structure an html document with doctype, html, head, and body tags. Place metadata and scripts in the head, and use a descriptive title for Google search.

Learn the essential HTML writing rules, including using comments. Enforce a single h1 per page, use a single main element, and understand base fallback links for better search engine optimization.

Learn how HTML5 semantic elements structure pages with header, nav, section, main, and photo elements, and why using appropriate elements clarifies content and improves accessibility.

Manipulate images in a single file to fit the screen, set explicit height and width, and include descriptive alt text for accessibility and SEO.

Explore how inline, internal, and external styles affect image height, width, and styling in HTML. Learn how CSS specificity determines whether class, id, or element rules take precedence.

Apply a background image to a section with CSS, using class selectors and a local image path, and set background-repeat: no-repeat, background-size: cover, and background-position center.

Learn to embed a video element in a web page, enable autoplay and loop, provide controls, and reference a local video source for a showcase demonstration.

Style the video element to be responsive by setting width to 100 percent on small screens and centering on larger devices. Use display block and margins to prevent horizontal scroll.

Discover how block elements start on a line while inline elements share space, with examples like headings, paragraphs, divs, sections, and images. Use display to switch between block and inline.

Learn to write css by targeting elements with element names, classes, or ids, and apply properties such as background color, margin, padding, and absolute positioning with top values.

Learn to define and reuse CSS variables for color themes, applying consistent padding, margins, and border radius across sections while understanding how variable scope and specificity affect styling.

Explain using pixels, rem units, and m units, plus percentages, to declare sizes, noting a default 16 pixels and a font size baseline of 28 pixels.

Explore how to add colors to a website using color names, hexadecimal values, RGB, and HSL, weighing their upsides and downsides and learning to control lightness and shade.

Master CSS positioning, including absolute, relative, and fixed, and learn centering with top, left, and translate. See why limited absolute positioning improves responsive layouts and how parent elements influence placement.

Apply CSS flexbox to structure a header with a logo and navigation, using display:flex, flex-wrap, and justify-content options such as center, space-between, space-around, and space-evenly for responsive layouts.

Learn how to replace flexbox layouts with CSS grid, using grid-template-columns, repeat(), and place-items to create responsive card showcases, with media queries for mobile-to-desktop scaling.

Learn to implement CSS media queries with min-width and max-width breakpoints to craft responsive mobile, tablet, and desktop layouts, test with chrome dev tools, and adjust orientation.

Apply design principles with neutral colors and white-on-black contrasts, planning layouts with simple sketches. Then build projects to practice coding, learn from mistakes, and master responsive containers.

Build a header and showcase section with HTML and CSS, integrate fonts and icons, design navigation and a book now CTA, and document progress with Git commits.

Learn to build a responsive conference section in HTML and CSS by wrapping images in block elements, tuning max-width, padding, and font sizes with mobile-first media queries for layout.

Design a featured rooms section with reusable cards, a grid of card elements, images, descriptions, and hover transitions revealing details.

Learn to build a comfy bed section by reusing conference center styles to center imagery, align text left and right, and apply responsive padding and flexbox for a polished look.

Learn to build a responsive footer and about page in HTML and CSS by composing a five-item nav, social icons with Font Awesome, and flexible layouts with breakpoints.

build an about page using a grid of day cards, with padding, margins, font sizes, box shadows, and media queries to control layout.

Build a responsive services page with a multi-card grid of service cards, using html and css, including icons, hover effects, and adaptive layouts for different screen sizes.

Reuse existing css classes to build the blog page, adapting boilerplate and cards, applying hover effects, box shadows, and transitions, and include a continue reading button.

Build a responsive contact us page with a working form, including first name, second name, email, and message fields; style with css and media queries for desktop to mobile layouts.

Build a book now page with a full reservation form in HTML and CSS. Include name, email, dates, pets, and a responsive layout using flex and media queries.

Build a responsive navigation bar with a toggleable menu using HTML, CSS, and JavaScript, featuring absolute and relative positioning, transitions, and a 768px media query.

Learn how to implement Netlify forms in a modern web project by adding name attributes, handling submissions, and reviewing form data in the dashboard.