Learn HTML and CSS in 7 Days: Build Responsive Websites

Create your first web page by converting a text file to an .html file, then view it in a browser and add HTML elements like headings, paragraphs, and a button.

Learn how HTML tags define elements, including self-closing tags like the br tag and the air tag, and how attributes like type and placeholder modify input elements.

Learn how to speed up web development with Visual Studio Code by auto-generating tags, using Emmet abbreviations, color-coded HTML, and customizable extensions.

Master the basic html structure—the html root, head, and body—and learn nesting and indentation. Use doctype html5, meta charset utf-8, viewport, and a title; index.html serves as the home page.

Set up a live server in Visual Studio Code to auto-refresh your browser on HTML saves, using the Live Server extension and the Go Live command.

Insert an image with the img tag using the correct src path from pixabay or a local file, placing the image in an images folder.

Learn how relative paths in html refer to images and other resources, using dot dot slash to navigate folders and update the source attribute.

Learn to use the alt attribute to describe images for accessibility and SEO, and to set height and width in HTML to reserve space and prevent cumulative layout shifts.

Discover semantic HTML tags that structure content by meaning, boost SEO with meaningful headings, and improve accessibility for screen readers, while noting non-semantic div and span.

Learn how to modify text with HTML formatting tags such as strong, b, m, I, mark, del, and INS, understanding semantic meaning versus styling and why CSS handles presentation.

Learn to create hyperlinks with the anchor tag, using href to link pages and sub pages, and control target attributes to open in the same or a new tab.

Create internal page anchors by giving a heading an id and linking with a hash in an anchor tag, so clicking scrolls to the target hello world heading.

Explore HTML comments to describe code and hide sections from the browser. Use <!-- and --> to enclose content, like a to-do login form, and test changes with ctrl+#.

Reinforce your HTML basics by building an about me website that uses headings, paragraphs, subheadings, lists, navigation links, and an image to showcase your hometown.

Learn how to structure a beginner web page with html basics: head metadata, title, body content, headings, lists, navigation, links, and images.

Explore advanced HTML concepts, forms and input types, browser debugging for SEO, and semantic tags like sections and header; learn to display videos with video players and YouTube embeds.

Create and manage HTML forms by using the form and input elements, exploring types, placeholders, values, labels, and selects; learn how to connect labels with inputs and handle options.

Explore common HTML input types such as text, number, checkbox, password, email, date, time, color, file, and search, and learn when to use them in web forms.

Use the web inspector to inspect HTML, CSS, and JavaScript, highlight elements, and debug layouts while safely editing live code in the browser and noting changes revert on refresh.

Learn to build HTML tables with the table tag and data rows using tr and td. Use th for headers and thead/tbody for semantic structure and styling.

Explore using an HTML table to create a simple two-column layout with an image and text side by side, and learn how cell spacing affects gaps while CSS handles layouts.

Learn how to display mp4 videos on a web page using the video tag, set src, height, width, controls, autoplay with muted, and loop, for decorative or embedded use.

Learn to embed a YouTube video on your site by copying the HTML embed code, setting a start time, and inserting the player at your chosen location.

Learn to create HTML tooltips using the title attribute, providing hover hints for icon buttons, text equivalents, and SEO keywords to improve accessibility and user experience.

Explore what CSS stands for and how it controls the visual appearance of web pages, transforming HTML into visually stunning, responsive designs with grid, flexbox, and animations.

Learn how CSS syntax uses selectors and declaration blocks to style HTML elements. Explore properties like color, padding, background color, font size, and borders, plus pseudo classes and simple selectors.

Learn to add CSS to HTML using inline, internal, and external methods, style with selectors and a style tag, and reference an external style.css file.

Explore how CSS colors work by using the color and background-color properties, then compare named colors with rgb and hex methods to create precise shades.

Explore the type, class, and id selectors in CSS and understand how id selectors override class and type selectors through higher specificity.

Master css fundamentals, including the box model, width and height, margins, padding, borders, rounded corners, units like px, %, em, rem, typography, and a modern centering trick.

Master CSS sizing by using width and height with pixels and percentages, learn how overflow works, and see how parent height governs percentage-based sizing for responsive layouts.

Master CSS borders by combining border width, style, and color to create solid borders, and explore dashed, dotted, double, and grooved styles with an MDN-backed exercise.

Learn how to use the border shorthand to set border width, style, and color in one line, simplifying css for div elements.

Learn how margins and padding create space around elements, use margin shorthand to control top, right, bottom, and left spacing, and inspect or remove default body margins.

Master the CSS box model by understanding padding vs margin, how padding pushes content inward, and how borders and padding determine an element’s total size.

Learn how the box sizing property controls width and height, comparing content box and border box, and how padding and border create a fixed, predictable size.

Learn how the universal selector, represented by the asterisk, selects all elements and overrides default margins and paddings to give a clean starting point for web layouts.

Differentiate block-level and inline-level elements: block-level elements occupy full width and start on new lines. Inline-level elements fit content and stay side by side.

Master the css display property by learning how block, inline, and inline-block elements behave, including vertical margins, height, and width, with practical div and span examples.

Master how the CSS border-radius property creates rounded corners for HTML elements, with a single value or four values, individual corners, and the shorthand, including circles when width equals height.

Master CSS text properties to control alignment, decoration, and capitalization. Learn text align, decoration lines (underline, overline, line through), and text transform (uppercase, lowercase, capitalize).

Learn how font size, font family, font style, and font weight work in css, and why rem units rooted at the html element enable responsive typography over pixels or points.

Define font-family to style text with backups and sans serif fallback. Use fonts.google.com to choose fonts and embed via HTML link or CSS, then adjust font-weight from 100–900 or keywords.

Learn how to center a div and its text horizontally with margin: 0 auto and vertically with align-content, and set html and body height to 100% for full-page centering.

Advance your css skills with background images, rgba colors, gradients, and image-with-gradient effects. Learn selectors, pseudo classes and elements, hover and transitions, and practical examples like an accept cookies window.

Learn to apply a background image in CSS using background-image and url with a relative path; control repeat with background-repeat, choose contain or cover with background-size, and fix with background-attachment.

Learn how alpha colors and the opacity property control transparency in CSS using rgba, hex alpha values, and the transparent keyword, with practical div examples.

Learn how to create linear and radial gradients in css, control direction and color stops, and combine gradients with images to produce effects like a black hole.

Master CSS shadows with the box-shadow property to add depth to web elements by configuring offset x and y, blur, and spread radius, color, and optional inset; combine multiple shadows.

Learn how css combinators target elements by their relationship, using the descendant, child, next-sibling, and subsequent-sibling selectors, and understand nesting, specificity, and practical styling examples.

Explore attribute selectors to target input elements by type, style email, password, and submit fields, and understand box-sizing with border-box for consistent width and height.

Explore key css pseudo-classes like hover, visited, active, focus, invalid, valid, and checked, and learn to style first/last/nth-child elements to improve user experience.

Learn to create smooth hover effects using the transition property, controlling duration and which properties animate, such as border radius and background color, with timing functions like ease-in-out.

Master CSS position concepts, from static to absolute, including relative, fixed, sticky, and z-index. Learn to use top, left, right, bottom, and centering techniques.

Create a centered popup using position fixed with an overlay and proper z-index. Center the popup by setting top and left to 50% and using translate(-50%, -50%).

Master css pseudo elements such as before and after, first letter, and first line to style parts of elements, understand the content property, and create custom bullets and animated effects.

Learn how CSS variables, or custom properties, store colors and values in root and reuse them with the var() function for consistent, efficient styling.

Develop a full multi-page website by day four of the CSS bootcamp, styling text, buttons, video players, cards, and a login form using basics and intermediate CSS.

Build a fixed top navigation bar with HTML and CSS, linking home, about, products, and login, using semantic nav, font imports, hover effects, and an active link.

Create a homepage header with a slogan, paragraph, and login CTA button, styled with a fixed nav, CSS calc padding, and a gradient hover button.

Create an about page by reusing the navbar and styles, embed a YouTube video via iframe, and implement a responsive video player with min() and aspect-ratio.

Master how max-width and min-width drive responsive layouts, prevent horizontal scrolling, and resize elements with the viewport using percentage values and overflow controls.

Create a products page with three card views inside a products container, each card with a heading and sample text. Style with CSS using first-child, nth-child, and last-child.

Build a login page with a navigation bar, a styled form using style.css for username and password inputs and a submit button, and ensure font inheritance and clean spacing.

Learn to implement CSS animations using keyframes and the animation shorthand, compare transitions for simple state changes, and tune duration, timing, delay, iterations, direction, fill mode, and play state.

Create a loading screen animation by rotating a square div on all three axes with transform rotateX, rotateY, and rotateZ, centered with absolute positioning and a glow using box shadows.

Advance your CSS skills on day five of the bootcamp by learning responsive design with flexbox, media queries, and responsive units to optimize websites for mobile.

See how flexbox aligns five div boxes by setting the parent to display:flex; use justify-content for main-axis alignment and align-items for cross-axis alignment, including space-between.

Explore flex-direction and gap in flexbox, showing how row and column layouts shift the main and cross axes, and how justify content and align items center items in vertical layouts.

Explore how space-between, space-around, and space-evenly distribute flex items in a single row with flexbox, balancing gaps as the container resizes and illustrating the cross-axis effect of align-items.

Use flex-wrap to create responsive flexbox layouts that wrap onto new lines. Differentiate align-items and align-content: align-items controls each line's cross-axis alignment, align-content aligns all lines along their main axes.

Explore nested flexbox layouts and column gap versus row gap to control horizontal and vertical spacing; center content and resize boxes responsively with display flex, justify content, and align items.

Learn how flex grow and flex shrink resize boxes on the main axis to build responsive layouts, using flex grow, flex shrink, and flex rank to prioritize content.

Combine flex grow with min-width and max-width to control when elements grow or shrink, prevent overflow, and apply flex wrap via media queries for responsive layouts.

Master media queries to build responsive websites that adapt to mobile and desktop using max-width and min-width breakpoints, switch layouts with grid and flexbox, and hide elements for small screens.

Discover advanced flexbox techniques with align-self and justify-content nuances, use margin-right auto for nav bars, and preview css grid as a simpler alternative for complex layouts.

Apply flexbox to build a layout centered horizontally and vertically with four containers, headings, and example text. Practice flexbox properties and responsive css techniques to ensure wrapping on smaller screens.

Master CSS grid, an advanced CSS concept for responsive web design, by learning columns and rows, grid flow, alignment, and stretching across multiple cells to create modern bento grids.

Translate the layout to css grid for nine boxes in three 200-pixel columns, centered numbers, and optional rows, using grid template columns, grid template rows, and gaps.

Use fr fractions to create responsive grid columns that fill the page. Position items with align-self and justify-self inside each cell.

Learn to manage grids with unknown element counts by using grid auto rows to generate automatic rows, ensuring consistent layouts as elements from databases or searches vary.

Discover grid auto flow, default row behavior, and how switching to column creates automatic columns, enabling horizontal scrolling like Netflix; learn when to use grid template vs auto columns.

Stretch elements across multiple grid lines to create bento-grid layouts using grid template columns and rows, grid column start and end, grid row start and end, and grid template areas.

Use grid-template-areas to build a large, complex grid quickly. Create a 4x4 layout with nine boxes by naming each grid area, declaring grid-template-areas and grid-template-columns, and setting four 250-pixel columns.

Learn to build responsive CSS grid layouts that wrap and resize using grid template columns, auto-fit, minmax, and fractional units to create stable, centered grids across devices.