100 Days Of Code - Web Development Bootcamp

Explore HTML and CSS basics, learn how to structure and style content, and build a two-file demo site to track and share your daily challenge progress.

Use your computer as a temporary development server to create HTML pages that load CSS and JavaScript, test in a browser, and prepare for deployment to a real server.

Create your first html page by saving index.html in a plain text editor, write a simple h1 Hello World, and open the file in a browser.

Set up your development environment with Visual Studio Code, install the editor, and learn to open projects, trust warnings, and customize themes for efficient web development.

Explore why Visual Studio Code enhances HTML editing with syntax highlighting, hover details for elements like h1, auto closing tags, and quick access to MDN documentation.

Learn how HTML serves as a markup language that adds meaning to content, describes structure to the browser, and uses opening and closing tags to form elements like h1.

Explore the range of HTML elements that annotate and structure content like titles, subtitles, images, dates, and authors, helping browsers, search engines, and assistive technologies understand web pages.

Learn to enhance a webpage by adding a second HTML element: wrap text in a paragraph using the p tag, improving semantic meaning for search engines and assistive tech.

Learn how default browser styling affects h1 and p, and override it with CSS using the style attribute on the opening tag to change font, alignment, and color.

Discover how CSS styles HTML elements using the style attribute, mastering font-family and text-align to center text, and chaining properties with semicolons, including color to set red.

Learn how to set text color using the CSS color property, including built-in colors like red, and see how CSS can alter typography and semantics without changing content meaning.

Explore how to apply color in web design using CSS, hex, rgb, and hsl notations, color pickers, and practical examples for styling paragraphs and headings.

Learn how to format long code in visual studio code using the format document shortcut and the prettier extension, improving readability by proper indentation and avoiding breaks inside HTML tags.

Open the browser developer tools to inspect elements, view and edit styles live, compare browser defaults and user agent styles, and explore pages without altering the original code.

Day 3 teaches adding a second paragraph and turning text into a link with the anchor tag and href attribute, while explaining line breaks and simple styling in HTML.

Learn how an anchor element nests inside a paragraph, illustrating HTML's ability to nest elements. Build complex content by placing elements inside other elements throughout web pages.

Learn to replace inline styles with global CSS using the style element and CSS rules, applying selectors like p and h1 to reduce duplication and improve maintainability.

Learn to structure a valid HTML document by separating metadata and content with HTML, head, and body, using a doctype declaration and a title for search engines and tabs.

Discover time-saving tricks in Visual Studio Code, including format document, indentation with tab, auto-completion, Emmet abbreviations, smart CSS and HTML suggestions, and quick reordering with drag and drop.

Master HTML basics: opening and closing tags, content, and attributes like href; learn global CSS with style tags and the html, head, and body structure.

Style anchor elements with a type selector, set an rgb plum red color, remove underline, and implement a hover state that underlines on mouse over.

Explore how cascading style sheets let multiple rules affect a single element like a link, including browser defaults, hover states, and how a paragraph's font family also influences it.

Move CSS out of the HTML by creating an external daily-challenge.css and linking it with a link element using href and rel='stylesheet' to apply styles.

Explore void elements with the link element as an example, and learn the exact syntax: use a self-closing tag with a trailing slash or an opening tag without one. The auto format shortcut may add the slash automatically.

Track how the browser loads external files separately by requesting the HTML first and then requesting CSS and JavaScript files via separate network requests.

Master targeting a single element with the id selector in CSS, using unique, machine-readable ids like today-s-challenge to apply precise color, font size, and bold styling.

Learn to adjust text with font-weight and font-size in CSS, using pixels as a device-independent absolute unit, and compare with relative units like rem and percentage for bold text.

Select and import fonts from Google Fonts to customize typography, applying Oswald for headings and Fira Sans for body text, with proper font weights and fallbacks to improve performance.

Learn how to enrich a web page with an image by using the img element, setting a src path to a local file, and adding an alt attribute for accessibility.

Apply a CSS image type selector to resize images to 200 by 200 pixels, use a 100-pixel border-radius for a circle, and center image by applying text-align on the body.

Set the page's background color and add spacing by styling the body with rgb(233, 215, 207) and a 50px margin, completing the main page layout.

Create a second html document to preview the week's challenges and goals. Use the html skeleton and set lang and charset, then link from index.html to full-week.html.

Create a shared css file to centralize common styles across pages, reducing code duplication, and import it before page-specific files to enable overrides.

Organize web projects by creating images and styles folders, moving assets into subfolders, and updating relative paths for href and src to improve maintainability while keeping styles and images working.

Build a solid foundation in HTML and CSS, mastering the skeleton of an HTML document, semantic elements, and essential styling via CSS selectors and properties.

Deepen your web development skills by exploring advanced HTML elements like lists, semantic elements, and containers, while mastering cascading logic, inheritance and specificity, and the CSS box model.

Learn to streamline web development with the live server extension in VS Code, enabling a local development server with hot reload that updates HTML and CSS instantly on save.

Turn three paragraphs into a semantic list using HTML's ordered and unordered lists. Learn to use OL, UL, and LI to preserve semantics for browsers and developers.

Decide when to use an ordered versus unordered list, create list items, apply CSS to remove numbers or switch bullets, and explore how list styles inherit.

Understand how the HTML structure uses the html, head, and body tags to form a parent-child hierarchy with nested elements. Observe how CSS rules inherit from parents to children, override on specific elements like list items and anchors, and alter list styles and colors.

Master how inheritance, cascading, and specificity govern css behavior, showing how rules apply to descendants, how the latest style wins, and how selector specificity shapes styling.

Style the full week page by adjusting the H1 size and color, and applying anchor hover effects, borders, spacing, and list item styling with the CSS box model.

Explore the CSS box model by detailing content, padding, border, and margin, and learn to set padding and margin for top, right, bottom, and left to shape layout.

Apply the CSS box model to adjust content, padding, and margins, using dev tools to inspect. Center elements with width and auto margins, and improve list spacing with padding.

Apply semantic HTML by structuring pages with header, main, and footer elements. See how body, h1, and an ordered list convey meaning and improve accessibility and maintainability.

Explore selectors and combinators to target elements precisely in css. Master type, id, group, and class selectors, then apply descendant and child combinators to styles.

Discover how to enhance lists with dates and descriptions using h2 headings and paragraphs. Apply id selectors and descendant combinators to target elements, adjust margins, colors, and fonts.

Explore how to group elements with classes, apply styles via class selectors and dot notation, and understand specificity and combinators to highlight daily goals in a CSS workflow.

Explore how block and inline elements render on a page, showing how h1 and a paragraph act as blocks while anchors and images stay inline.

Learn the differences between block and inline elements, see how margins and padding behave, and discover how inline-block enables spacing and alignment within a header.

Understand vertical margin collapsing between adjacent block elements, where the larger margin defines the space between them; horizontal margins and inline-block elements do not collapse.

Apply the box-shadow property to list items to create a subtle 3d look by configuring offsetX, offsetY, blur radius, and RGBA color values, then adjust header margins.

Turn the page into the layout, applying a span element to highlight the date, using negative top margins on an inline image, and refining the HTML structure (image, h1, paragraphs).

Build the page layout with a main and footer, highlight the date inside the h1 using a span, and compare non semantic elements like span and dif while adding IDs.

Style the main section by setting width to 800 pixels and centering it with auto margins. Add padding, a border, border radius, a background color, and a box shadow.

Learn how to style images with borders and master negative top margins to align an image with a main element border, using replaced inline elements and precise height calculations.

Apply finishing touches to the landing page by setting h1 to 30px and dark rgb colors, and highlight the day date span and today's challenge. Clean up shared.css for readability.

Learn to structure HTML with ordered and unordered lists, grasp parent-child and descendant relationships, and master CSS cascading, inheritance, specificity, the box model, and selectors for semantic layouts.

Reinforce HTML and CSS fundamentals through the discourse section with guided practice, a hands-on project, and a summary PDF document to reference as you explore new HTML elements.

Build a demo web page with a main title, image, content box, and a footer link to a PDF; practice headings, lists, links, and CSS styling with Roboto.

Rebuild a web project from an empty folder, create index.html with a base skeleton, set lang and metadata, link a CSS file and fonts, and define header, main, and footer.

Add header content with text and images using the h1 and img elements, set the src and alt attributes, and preview with a live server while preparing for styling.

Learn to style pages with an external CSS file by applying a purple body background and Roboto font, then center the header with a 52px purple H1 and inheritance.

Target header images with a CSS selector, set 300px width while preserving aspect ratio, and master the CSS box model using header padding to adjust spacing and margins.

Summarize HTML and CSS sections with H2 subsections, features and lists, link to MDN references, and compare inline, style element, and external CSS for inheritance, specificity, and the box model.

Style the main content as a centered, rounded box with a 700px width and 32px padding. Use a purple rgb(122,74,218) background and rgb(248,241,255) text color, with inherited color for children.

Learn how to style unordered lists and list items with CSS, including id and class selectors, highlight spans, and custom link styling with hover and active states.

Add a footer with a download pdf summary link styled as a button, opening in a tab, and center content with text-align, hover and active states, teaching selectors and specificity.

Discover how to improve page semantics and accessibility with em and strong for emphasis, and wrap content in main and section elements to aid search engines and assistive technologies.

Organize your web project by creating subfolders for images, styles, and pdfs, moving files into them, and updating index.html paths to styles/styles.css, images/html-css-png, and pdfs/html-css-basics-summary.pdf.

Reinforce the fundamentals of HTML and CSS and dive deeper into essential web features used by nearly all websites, with a reminder to review the PDF summary and earlier sections.

Learn hosting and deployment basics to take your first HTML/CSS website online. Follow concrete steps to deploy, update daily challenges, and optionally share your deployed site to track progress.

Understand how hosting and deployment move your HTML, CSS, and eventually JavaScript to a remote server, where visitors' browsers request and receive your site.

Deploy a static site quickly with Netlify Drop by dragging your project folder (html, css, images), view it on a generated Netlify domain, and share updates with peers.

Deploy your site with a custom domain and rely on free https provided automatically by Netlify and many hosting providers.

Learn to add a favicon to your website by generating favicon.ico, placing it in your project, and linking it in HTML with rel icon for local and deployed pages.

Learn how to use relative and absolute paths to reference images, styles, and pages across nested html files, and when to switch to absolute paths for root-level access on servers.

Explore version control fundamentals and learn how Git and GitHub help manage web development projects. Discover repositories, branches, commits, remote repositories, cloning, and pull requests to track progress and collaborate.

Discover how version control with Git and GitHub lets you manage code versions in repositories, save different stages without duplicating files, and collaborate by hosting projects in the cloud.

Understand human-computer interaction by comparing graphical user interfaces with the command line interface. Learn why the CLI, via Mac Terminal or Windows CMD, is favored for Git and GitHub work.

Master macOS terminal basics and the z shell, using commands like pwd, ls, cd, mkdir, touch, and rm to navigate root and home directories and compare cli with gui.

Master the Windows command prompt: navigate with cd and dir, switch drives, understand absolute vs relative paths, and create or delete files and folders with mkdir, echo, del, and rmdir.

Learn to install Git on macOS using Homebrew, verify the installation with git --version in the terminal, and explore GitHub basics.

Install Git on Windows by downloading from the official git-scm site, run the installer, customize components, and verify the installation with git --version.

Explore how Git tracks changes in a working directory and stores snapshots in a repository, using commits and branches like master and feature branches with clear commit messages.

Initialize a git repository in vscode, create and track files with git add, and commit changes to master branch. Configure user credentials and explore staging area and commit history.

Rename master to main, create and switch branches, add commits in feature branches, and merge into main, handling conflicts with git merge.

Explore practical git workflows by deleting files and commits, managing branches, and reverting unstaged or staged changes with git rm, git reset --hard, checkout --, and git restore.

Move from local Git to GitHub to store code in the cloud, access it from other machines, and support collaboration, portfolio pages, and open-source contributions.

Create a free GitHub account and connect your local git repository to a remote GitHub repository. Push your main branch to publish code on the free plan.

Discover how to create a GitHub personal access token, enable push access to a remote repository, and manage token permissions and secrecy for secure git workflows.

Learn to collaborate on GitHub by using private repositories, inviting collaborators, and managing access with personal access tokens, while syncing changes through push and pull.

Explore contributing to open-source projects on GitHub by forking repositories, cloning locally, committing changes, and creating pull requests to propose and merge features.

Learn the basics of Git as a version management tool, including init, add, commit, branches, and checkout, plus pushing to GitHub and collaborating with a personal access token.

Explore layouts and positioning with CSS flexbox and CSS grid, and work with images and background images. Learn and compare units like pixels and percentages as you prepare the project.

Design and build a travel goals landing page from scratch, featuring a hero with background image, highlight places, social links, a destinations page, and navigation with hover effects.

Open a new window in Visual Studio Code, create a named folder, drag that folder into the editor, and scaffold an index html with a styles css and Google Fonts.

Learn to structure a landing page with header, nav, main, sections, and footer. Build a skeleton using a hero image and highlights, plus a footer with social links.

Define the header logo as a link to index.html labeled Travel Goals, styled with a dedicated page-logo container, custom fonts, padding, and text effects like uppercase and text-shadow.

Add navigation items using an unordered list in the index.html nav element, linking to Destinations and Places pages, and prepare an About link; then style the header with css flexbox.

Explore how css flexbox turns a header's two children into a flexible layout by declaring a flex container, using flex-direction and flex-wrap, and understanding the main axis and cross axis.

Learn to align flex items in a header with align-items center and justify-content: space-between, placing the travel goals logo on the left and destinations and about on the right.

Turn an unordered list into a flex container to place two items side by side, then push them to the right with justify-content: flex-end, exploring flexbox basics.

Turn the header into a flex container, use space-between to separate logo and nav, center align items, and flex the header list in a row with no wrap and spacing.

Add a background image to the hero section via CSS, using images/places/ocean.jpg, and tune with background-position center and background-size cover to reveal content behind the image.

Create a div container for the hero content, style with a semi transparent background, 900px width, box shadow, border radius, and auto margins to center.

Learn how to position elements using the document flow and relative positioning, moving the hero content down with top 200 pixels, and comparing static versus relative layouts.

Style the hero content by targeting h1, p, and the anchor as a button with white uppercase typography, the Raleway font, exact sizes, hover feedback, and subtle borders and shadows.

Learn how absolute and fixed positioning move elements out of normal flow and position them relative to the first ancestor or the viewport. Place a header over a background image.

Demonstrates using percentage widths and box-sizing (content-box vs border-box) to make an element fill its parent, accounting for padding and borders, and contrasts position absolute with fixed against the viewport.

Finish the header by placing it behind the background image with absolute positioning and 100% width, then style the nav anchors with yellow color, no decoration, padding, and hover effects.

Learn to build the highlights section with a green background and free city images labeled with city names and countries, while applying a single new property in VS Code.

Build the highlights section in index.html as a container with id highlights, featuring a headline and an unordered list of destinations, each with images, alt text, and bold country names.

Style the highlights by turning the destinations list into a flex container, setting image height to 200px, and centering the 90% width container with bottom spacing.

Create a flex container with three list items containing images and paragraphs, each occupying one third of the container width. Make images 100% width to ensure even item widths.

Improve image presentation by adding margins on the image container and applying a box shadow and border radius, then use object-fit: cover to preserve aspect ratio.

Learn to center text with text-align, uppercase headings and paragraphs with text-transform, adjust colors using rgb, set font sizes like 24px and 40px, and refine margins in the highlight section.

Explore how margin collapsing occurs between a parent and child elements, and learn to fix white space by adding padding to the section, using a 24 pixel padding example.

Apply the CSS linear gradient function via the background property to blend two rgb colors, and tune the angle with degrees such as 0, 45, 90, and 180.

Create a footer for the landing page with a gradient grayish black background, featuring two clickable white icons for Instagram and Facebook, using the attached PNG assets in HTML.

Create a footer with an unordered list of two links to Instagram and Facebook, using icons from images/icons and accessible alt text, then style the footer.

Learn how to style the site footer using a shared.css file, applying a 70-degree linear gradient and precise sizing with flex, padding, and centered icons.

Transform the empty places page into a card-style gallery by reusing the header and footer, adding places.css, and wiring a main section with explore links to the city Wikipedia pages.

Organize city cards as an unordered list of list items, each with an image, a name and description in a content container, and an explore link in an actions container.

Size images with a fixed width and height in the main list, use a descendant selector for list-item images, and override header with position: static using shared before page-specific css.

Set the container to a fixed 800px width and center it. Make list items a flex row with the image beside the content for a card look.

Style the card with box-shadow and border radius, control overflow to clip images, and use object-fit: cover; then align the link to the bottom-right with flexbox and add hover effect.

Solve the day 19 challenge by mastering flexbox to lay out a card, distribute space between the city description and link, and push the explore link to bottom right.

Add 10 destination cards with city images and links, update the list and code attachments, and implement a two-dimensional, two-column layout using CSS grid.

Explore how CSS grid enables two-dimensional layouts by turning a list into a grid container, define two columns with grid-template-columns and fractions, and control gaps between rows and columns.

Apply nth of type and first of type selectors to target specific list items, then use the grid column property to span and position elements in a two-column grid.

Apply CSS grid to build a two-column layout by turning a list into a grid container, defining two columns, setting 20px gaps, and spanning the third item across both columns.

Apply UTF-8 encoding and Unicode hexadecimal references to display arrows in HTML links, enabling symbol rendering without images and expanding your knowledge of Unicode usage.

Apply precise CSS scoping to limit hover effects to header navigation and logo, override selectors for blue tones on destinations and landing pages, and fine-tune margins for cleaner card layout.

Build a structured landing page with semantic HTML and CSS, featuring header, main, and navigation, and master flexbox and grid layouts, image handling, and precise positioning.

Explore responsive web design to deliver optimal experiences across mobile, tablet, and desktop devices by using media queries and implementing a site drawer with HTML and CSS.

build a brand new responsive website to practice responsive design, including a logo, navigation, headline, and meal cards, while exploring breakpoints and a css hamburger menu for mobile navigation.

Practice constructing a finished website's html structure using semantic elements such as header, main, nav, section, and article, with cards that include images, h2 headings, and add-to-cart buttons.

Build the html structure for a food site: index html with header, logo link, nav list, main section with two cards, article, image, h2, and add-to-cart links, using ids.

Style the website header using Google fonts and a dedicated stylesheet, apply flexbox to align the logo and navigation, remove list dots, and implement color, hover effects, and uppercase logo.

Style the main section by centering the h1, applying rgb(238,164,80), and increasing font size to 38px, then set the width to 80% and use a two-column grid for latest products.

Learn how responsive design makes website content adapt to smartphones, tablets, laptops, and desktops by adjusting layout and typography, using DevTools to test across device widths and emulated devices.

Compare unit types to understand responsive design, focusing on font size and the limitations of pixel units, which are not scalable and restrict user font-size choices.

Explore how em and rem units shape responsive typography, compare them with percentage sizing, and examine cascading font-size effects relative to the root HTML element.

explores how em and rem units determine font size, contrasting them with percentage values and parent references, and shows how rem keeps scaling relative to the root font size.

Explore how em, rem, and percentage units behave in CSS, comparing their relation to parent elements and font size, and apply 0.1em and 0.1rem for responsive padding.

Apply rem, percentages, and pixels to create a more responsive header and navigation, with five rem header height, 1.5 rem logo, and 80% content width.

Compare desktop first and mobile first design, explain responsive changes across devices, and show when to favor desktop first for feature-rich, office-based sites in this course.

Explore how media queries power responsive design by using @media rules with min-width and max-width breakpoints, rem units, and font-size adjustments across devices.

Apply media queries to switch a two-column grid to one column at 768px, using max-width with cascading CSS rules for responsive desktop and mobile layouts.

Apply a media query to set the mobile h1 font size to 1.5 rem, hide the nav in mobile view, and switch the max width to 48 rem.

Learn to implement a mobile header with a three-line hamburger icon that toggles a right side drawer and hides the logo, using internal links and the CSS target selector.

Create a responsive hamburger button in the header by adding a clickable anchor with three spans, styling via CSS, and using a flex container to open the side drawer.

Create a mobile side-drawer with an aside id side-drawer, moving the navigation into a full-screen gray overlay, positioned fixed, and center the links in a vertical flex layout.

Master how the display property toggles the side drawer with a hamburger click, using display none and block, and navigate via IDs and hash URLs to jump to the drawer.

Learn how to use the css :target pseudo selector to toggle a side drawer by url id, showing or hiding it with a hamburger button and hash navigation.

Finish the side drawer by adding a second hamburger button linking to the top, using an aside with a second header, then style for mobile and desktop views with CSS.

Master responsive design by using rem and percentage units to scale typography, alongside pixels for fixed sizes, and switch between mobile-first and desktop-first approaches with media queries and breakpoints.

Explore applying HTML and CSS fundamentals to design beautiful websites, using CSS variables, transitions, and the basics of SVGs, guided by a prebuilt project example.

Learn to build a website feature by feature, starting with a single card. Prioritize core information and keep the design clean and understated, avoiding over-styling.

Analyze an existing card design to understand how sizing, spacing, fonts, and colors shape its look. Explore practical design concepts using divs, classes, and SVG icons with dev tools.

Master sizing and spacing on card layouts, using margins and padding to center content and improve readability on wide screens. Learn how margins group subscription, pricing, and actions.

Apply font family, size, weight, and color to improve page design, pairing a serif h1 with a sans serif body, and using font sizes from 32px to 16px and 18px.

Define gray, primary, and accent colors to craft a natural, professional website look, applying them to text, cards, and badges with predefined color ranges.

Explore css variables and css custom properties to define reusable color and font values, then apply them with var() for consistent grey scales and font sizes across your web project.

Explore how to create and apply CSS variables for color scales and sizes, enabling dynamic updates across a project with gray tones, primary colors, and responsive typography.

Explore how CSS variables on the HTML root enable inheritance across nested elements, compare the HTML, :root, and * selectors, and clarify their inheritance and specificity differences.

Discover css transformations and transitions by applying the transform property to a card container on hover, using scale to enlarge by small percentages and exploring rotate for different effects.

Master css transitions to create smooth hover effects by defining the transition on the initial state, targeting properties like transform. Tune duration and timing function, with optional delay.

Explains how to use SVGs in a web project, describing SVGs as a text-based XML for vector images and how to add and adjust icons in code.

Learn to build and fetch user input with HTML form elements, including text, email, and dropdown fields, reinforced by a concrete example.

Explore what web forms are, a collection of HTML elements used to fetch user input. See how to validate input and submit form data.

Explore essential form HTML elements to fetch user input, including input with type attribute, text area for multiline text, select dropdowns, and buttons for submit and reset.

Create a new HTML project, set up index.html with a basic skeleton and link styles.css, then explore the input element as a void element, including type='text' and a 20rem width.

Add a submit button to the form and see input and button render as inline elements, then switch to block layout with margins and note form element missing for submission.

Wrap input elements in a form element, use action and method to control submission to the server via get or post, and attach form data with name attributes.

Style the form element with css to create a 30rem wide, centered box with rgb 255,255,255 background and padding, and set the input to 100% width with box-sizing border-box.

Add labels to form inputs to guide users and indicate expected data, linking the label to the input with for and id attributes so clicking the label focuses the input.

Discover how to style forms by applying a Roboto font, overriding browser defaults, unifying typography across inputs and buttons, and refining borders, padding, focus, and hover states.

Explore how different input types like text, email, number, password, date, radio, checkbox, and file shape user input, validation, and mobile keyboard experiences in web forms.

Explore how to implement email, number, password, and date inputs, connect labels with for attributes, enable browser validation, and use date pickers for improved user experience.

Demonstrate radio buttons as single choice inputs by sharing the same name and assigning value attributes. Learn labeling, ids, and styling with a div class form control inline and flexbox.

Learn how checkboxes support single and multiple selections in web forms, with terms acceptance and contact options, and how named inputs and values are submitted to the server.

Explore how the textarea enables multi-line input, connect it to labels with an id, assign a name for submission, and style it like inputs for a consistent look.

Add a dropdown using the select element with labeled options. Connect the label with for and id, assign a name to the select, and send option values to the server.

Explore semantically structured forms using labels, sections, and lists to boost accessibility and developer readability. Apply steps like wrapping in main and converting divs to list items.

Explore how HTML form buttons control submission and how the type attribute switches behavior to submit, reset, or avoid submission within a form.

Explore form validation and how novalidate can disable it. Apply required, minlength, maxlength, min, max, and date min/max to validate email, name, password, age, birth date, and radio groups.

Apply last form attributes by using placeholders for hints, understanding placeholder vs value, and preserving accessible labels; control text area size with rows and manage resize via css.

Build a complete HTML form with inputs for name, email, phone, and a message, plus a dropdown, radio buttons, and a checkbox, featuring browser validation and styling.

Create a base page structure for a contact form by building an index.html and styles.css in a dedicated challenge folder, adding a header and centered form with styles.

Construct a multi-section contact form with labeled inputs for name, email, and phone, a message area, and how-you-found-us dropdown. Connect labels to inputs with the for attribute.

Build a functional HTML form with labeled inputs, radio groups (unique ids, shared name, values), a terms checkbox, and submit and reset buttons, plus basic styling and validation.

Configure form submission with action and method, compare get and post, and enforce validation by applying required attributes across inputs, textarea, select, radio buttons, and checkboxes.

Apply cohesive form styling using margins, label and input styling, and dark blue gray colors. Implement responsive inputs, textareas, inline controls with flexbox, and polished button styles.