100 Days Of Code - Web Development Bootcamp

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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 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.

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.

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.

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.

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.

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.

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 your site with a custom domain and rely on free https provided automatically by Netlify and many hosting providers.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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 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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.