The Art of Doing: Web Development for Beginners

Explore the fundamentals of HTML tagging, including headings (h1–h6) and paragraphs, and learn to structure content with opening and closing tags using starter files.

Learn to format text with HTML tags, including bold, italic, underline, breaks, and horizontal rules; explore pre formatting, headings, blockquotes, and simple ASCII art examples.

Explore how to create unordered and ordered lists with ul, ol, and li, including nesting, formatting, and styling tips for clear web content.

Create a basic about me HTML site from starter files, with five headings, three paragraphs, styling tags, two unordered lists, a table, a preformatted ASCII art image, and a quote.

Design an about me webpage using HTML starter files, implementing headings, paragraphs, bold and italics, underline, block quotes, lists, tables with details and summary, and ASCII art about Pearl Jam.

Explore HTML attributes, including id and class, and practice using the style attribute to influence elements, laying groundwork for CSS and advanced table styling.

Link to external sites, internal pages, and page sections using anchor tags and href, then open in new tabs with target and use IDs for top navigation.

Learn to add images to HTML with the image tag, using src and alt attributes, resize with style while preserving aspect ratio, and embed external images.

Explore interactive html tags such as button, input, radio, select, and checkboxes, and learn how id, name, and value attributes capture user input, with JavaScript bringing these elements to life.

Learn to build HTML forms with labeled inputs, ids, names, and required constraints. Submit or reset data via an action to external pages, as shown with Google and Bing searches.

Create a collectors project front end with an index login form, a main page header, image links to Bulbasaur, Charmander, and Squirtle, plus a top pokemon list.

Finish the Pokemon trader project by applying a consistent header, navigation, and footer across Bulbasaur, Charmander, and Squirtle pages, with evolution lists and images; embrace modular HTML design.

Learn proper HTML structure by organizing pages with a doctype, html root, head including a title tag, and a body for content.

Learn how block level elements start on new lines and fill the full width, with height by content. Explore headings, paragraphs, lists, and forms, and contrast them with inline elements.

Explore how inline elements differ from block-level elements, and learn to use anchors, buttons, inputs, and images on the same line, including inline-block behavior and width considerations.

Explore the span tag as an inline container to selectively style text with css, contrasting it with divs and block-level elements, and learn practical span usage.

Organize your existing project with proper HTML structure by nesting elements in containers, using divs and spans, and styling with style attributes for header, main, article, nav, and footer.

Learn to structure a multi-section web page by creating header, main, nav, article, and footer divs, apply color styles, and highlight text with spans for a Pokemon trader site.

Finish the organized collectors project by implementing structured HTML with header, main, footer, navigation, and articles, styling divs, spans, and colors, and prepare for semantic HTML.

Learn to use semantic HTML by replacing divs with header, main, and footer tags to convey meaning. Understand how this improves readability, accessibility, and SEO.

Explore semantic HTML by using header, main, and footer, and organize content with nav, article, and section tags to create a well-structured page.

Preview the HTML project by building an HTML-only site with semantic HTML, a shared header and footer, a navigation, and a main area of articles, sections, divs, and tables.

Follow along to build a final HTML project by coding a Ninja Turtle site, creating semantic HTML structure with header, main, and footer, plus navigation, forms, and image links.

Continue the final html project by building a ninja turtles main page with enemies, a turtle table, images, and search and mailing list forms.

Complete the final HTML project by building ninja turtle pages with a shared header, footer, and nav; clone Leonardo's page for the others, swap content and images, and update colors.

learn css basics by linking stylesheets, selecting html elements, and applying properties like background color and text color, plus background images and sizing options.

Master how to select elements with CSS using universal, element, class, id, and descendant selectors, apply multiple selectors, and understand inheritance to control styling across HTML documents.

Learn how element width works in CSS by comparing pixel and percentage sizing, exploring absolute versus relative lengths, and applying these ideas to images and viewports.

Explore font size in CSS by comparing pixel, M, and REM units, and learn how absolute and relative sizing respond to the parent element and the root HTML.

Learn how to define color in css using color names, rgb(a), hex, and hex with alpha, and apply text and background colors to html elements.

Preview a three-page storefront site built with a single css stylesheet, semantic html, and a consistent color scheme, featuring header, navigation, main content, and a footer.

Build a storefront web page by crafting a full HTML structure with header, nav, main, and footer, and style it with CSS image size classes and a pets available list.

Learn to style text using css and Google fonts, applying font-family, font-style, font-weight, font-size, color, background, text-align, text-decoration, text-transform, and text-shadow to paragraphs with id and descendant selectors.

Learn to style lists and tables with CSS, using list-style-type, list-style-image, and list-style-position. Center and border tables, align text, style headers, and adjust padding and colors.

Explore how the display property distinguishes block, inline, and inline-block elements, and learn to adjust width, height, and margins to shape HTML layouts.

Learn how the display property toggles elements between inline, block, and inline-block, and apply width, height, margin auto, and text-align to center and size anchors, spans, images, and buttons.

Preview a multi-page storefront with home, about, contacts, pricing, and pictures pages, using a common header, nav, and footer, and apply css styling via a single stylesheet and semantic html.

Create a storefront homepage with semantic HTML—header, main, and footer; a welcome section with an image and enter link; and a CSS-styled nav and article-based content blocks.

Style a multi-page site with CSS, centering navigation, formatting articles, and styling a review section. Apply modular styling that carries across pages, including inline blocks, borders, and shadows.

Reuse modular HTML from the about page to build a contact page with a newsletter signup form, then style a pricing table and a picture gallery with CSS.

Learn flexbox by building horizontal and vertical layouts with nested wrappers. Center content and text using align-items, justify-content, and text-align in HTML and CSS.

Explore the css grid system to layout content in two dimensions, using grid containers, grid items, and properties like grid template rows, columns, gaps, and justify content.

Wrap up the search engine project by styling header text with colored spans to resemble the Google logo, using HTML spans and CSS color classes alongside flexbox and grid layouts.

Explain debugging a centering issue in a grid and flexbox layout, apply justify-content and align-items, and clarify why child width percentages depend on the parent container.

Master pseudo classes to style hover, active, focus, valid and invalid states, and apply nth-of-type with flexbox and basic transitions for interactive web components.

learn how css transitions animate property changes smoothly, using transition properties on hover and active states, with examples of background color, border radius, transform, margin, and timing functions.

Explore CSS animations by using keyframes to create multi-step effects, bind to elements with animation properties like duration, delay, iteration count, direction, and timing functions such as ease.

Preview the final css project featuring a club website with animated header, hover effects, two css pages, and semantic html across index, home, join, news, projects, and members pages.

Construct a welcome page with doctype html, head, body, header, main, and footer, linking a welcome_style.css and styling a flex main, an enter button with hover transitions.

Master final css project part 2 by animating two divs with keyframes, color transitions, and mirrored vertical motion, then design a modular home page with header and navigation.

Style the header with a background image, set height and cover positioning, adjust fonts and colors, and enhance navigation with borders and hover effects for a polished layout.

Explore final css styling for the web project, using flexbox to lay out a secondary section, style article cards, and implement hover transitions and focus states on a join form.

Explore JavaScript basics by declaring and using let, var, and const, manipulating the console, alerts, and prompts while understanding scope and immutability in web pages.

Explore JavaScript data types, including strings, numbers, booleans, objects, undefined, and null; create and manipulate arrays with push and pop, inspect types with typeof, and access indices.

Learn how to use for loops in JavaScript to run code a number of times and iterate arrays with for of loops, then master while loops with conditions and prompts.

Explore conditional statements in JavaScript, mastering if else, else if, and switch cases, and control statements like for loops with continue and break, plus the ternary operator for concise decisions.

Write and call JavaScript functions with parameters and return values. Parse prompt input and use built-in math functions like random and floor to generate random integers.

Preview the next project: a simple JavaScript guess the number game that asks for a range and guesses, generates a random number, and reports high, low, or correct with replay.

Build a guess the number game in JavaScript by creating an HTML shell, loading a defer script, and implementing a main game loop with get values and play game.