Coding For Beginners 2 - Get Started With Web Development!

Explore the World Wide Web, its origins and main technologies, and learn where your website and web pages fit in the bigger web picture for effective development.

Explore what the web is by understanding web pages as documents with text, images, and hyperlinks, and learn how buttons and inputs enable user interaction.

Discover the difference between the Internet and the World Wide Web and trace the early history from Ada Lovelace and ARPANET to TCP/IP and hypertext.

Tim Berners-Lee at CERN pioneers the birth of the World Wide Web by combining hypertext with the Internet and introducing HTML, URL, and HTTP, plus the browser and server.

Discover how web browsers view pages and how web servers deliver digital pages upon request, turning physical documents into web pages sent across the network for consistent browser display.

Discover how HTML encodes text and style via markup, how browsers interpret it, and how CSS and JavaScript enhance interactive web pages.

Explore how HTML and JavaScript run in the browser, and learn how the HTTP protocol transfers hypertext between web servers and browsers across the internet.

Learn how urls guide browsers to web servers and resources via scheme, domain, subdomain, and path, including index.html defaults and https with tls.

Discover how information sent over regular HTP travels in plain text, how https encrypts traffic to deter man-in-the-middle attacks, and how it prevents ISP content insertion.

Learn how browsers request remote resources over http and display local resources via file paths, and discover localhost as a way to run a local web server for faster development.

DNS translates human-friendly domain names into real IP addresses, enabling browsers to locate the correct web servers and fetch resources over HTTP or HTTPS.

Explore the growth of the web, distinguishing the internet from the World Wide Web, and see how HTML, CSS, and JavaScript power pages via HTTP and URLs.

Learn to build a web page from scratch using HTML, edit and view your code in a browser, and style with CSS to explore color, sizing, responsive design, and fonts.

Explore how HTML structures a web page as a document using elements and tags. Understand opening and closing tags, the p tag for paragraphs, and angle brackets in markup.

Master the basic html structure with doctype, html, head, and body; explore title and p tags, nesting, and how whitespace is ignored by the browser.

Explore the HTML reference on w3schools, learn to use the HTML tag reference and the DOCTYPE declaration, and bookmark the page for quick tag lookups during the course.

Create a dedicated course folder on your desktop to organize all web development coursework, using a consistent web dev name and a quick right-click to start text editor.

Open a text editor to start HTML coding, using notepad on Windows or text edit on Mac, or ipad.org; save as plain text and rename to .html.

Learn to write your first HTML document from scratch, including doctype, html, head, and body with a title and a paragraph. Save as index.html and test in a browser.

Download and install Google Chrome and set it as your default browser to open HTML files, then explore Chrome Dev Tools, including device mode and the elements panel.

Learn HTML tags to structure a web page, turning a paragraph into headings from H1 to H6 and adding line breaks with br. Understand how headings boost SEO.

Learn how to insert images into web pages using the image tag and the required src attribute, with local and remote paths, relative URLs, and copyright permissions.

Add images to a web page with the HTML img tag. Use a local project image and a hot-linked remote image, then test in the browser.

Learn to embed a remote image in an HTML page, use the src attribute, and add alt and title attributes for accessibility and SEO. Understand remote versus local images.

Explore how cascading style sheets enable precise styling of HTML elements, using the style attribute to change colors, fonts, sizes, positions, and visibility across a web page.

Learn how CSS syntax uses a property and a value to style elements, with examples like color: blue and background-color, and use the W3Schools reference for available properties.

Apply the style attribute to an HTML heading, use the color property to set purple or green with correct syntax and semicolons, and learn readable coding conventions.

Learn to apply the css background-color property to the body element, using text color to maintain readability and improve user experience.

Learn about predefined colors and cross-browser support, including 140 named colors you can use in CSS. Use named colors, hex values, and seven color-specification methods to match branding.

Learn the CSS rgb color method by mixing red, green, and blue using 0-255 values or percentages to create colors like red, magenta, and black.

Explore the rgba color method to add transparency by using red, green, blue, and alpha values. Set alpha from 0 to 1 to fade text and create see-through backgrounds.

Explore CSS hexadecimal color codes representing red, green, and blue with a hash followed by six digits, and apply them to backgrounds, for example #0000FF yielding blue.

Learn how hsl and hsla colors specify hue, saturation, and lightness, with optional alpha for opacity; use 0–360 degrees and percent values to mix light greens and other colors.

Explore defining web colors with hex, rgb/rgba, and hsl/hsla, plus predefined names and the current color keyword. Learn to find and convert color values with online color pickers and tools.

Explore how browser default stylesheets interact with author styles, and how cascading, specificity, and inheritance determine a web page's color and layout.

Explore how to change element sizes with CSS using height and width, absolute and relative units, inheritance, relativity, and responsive design across desktop, tablet, and mobile.

Explore CSS length units, comparing absolute and relative sizing with examples like centimeters, inches, and pixels. Absolute lengths suit print layouts and explain why pixels are unreliable for responsive design.

Master CSS relative length units, including percentage, vw, and vh, to size elements relative to the parent (body) and the browser window for a responsive design.

Explore responsive web design by using vw and vh, two relative length units tied to viewport width and height, and see how images adapt when the viewport changes.

Explore em and rem relative length units. Learn how they inherit font size from the root element and use that inheritance to build responsive, scalable layouts.

Learn how the text-align property positions text and inline elements on a web page using left, center, and right values, including inheritance behavior and applying alignment to specific elements.

Master the font-family property to control typography, using web safe fonts or linked font files, with a fallback system that falls back to generic serif, sans-serif, monospace, cursive, or fantasy.

We recap section three by covering HTML syntax, structuring pages with elements, creating index.html files, testing in a browser, and exploring cascading specificity, inheritance, responsiveness, and relative units.

Take on two web development challenges: reproduce a basic HTML/CSS page with a full-width banner and four images, then design your own page using wireframes and mockups.

Watch how to access the challenge one source code with Chrome's view source, assess the instructor's html, and learn how JavaScript can dynamically alter html and css.

Learn to link web pages with the HTML anchor tag, creating hyperlinks for navigation, while tracing hyperlink history from Memex to Tim Berners‑Lee and previewing JavaScript.

Learn to build a three-page site (home page, about page, member's page) with a working navigation, using VS Code, HTML anchors, divs, fonts, external stylesheets, and Chrome dev tools.

Create a simple low-fidelity mockup of a three-page site (home, about, members) with a navigation bar and password-protected members page, then move to a high-fidelity mockup.

Create a dedicated website project folder named code club inside the web dev course folder, then set up three pages—index.html, about.html, and members.html—using Visual Studio Code.

Set up Visual Studio Code as your professional editor, download the stable version for your OS, and install it. Explore features, bookmark the docs, and use Stack Overflow for help.

Scaffold a three-page website in VS Code with index.html, about.html, and members.html using doctype, html, head, body, and title, then test in Chrome.

Explore how the anchor tag turns any content into a hyperlink via href, with browser defaults and CSS overrides, and apply it to home, about, and members links.

Create and test working hyperlinks using anchor tags in an HTML index page, linking to about and members pages with relative paths, and build a navigable multi-page site.

Explore how the HTML div element creates invisible page divisions to build two column layouts, using a row with two columns and a flex box layout to position content.

Learn to add a right-hand column background image with CSS background-image, center it, fit with background-size contain, and disable repetition using no-repeat, all from the images folder.

Discover how to use HTML comments to annotate code, structure pages, and safely remove or restore sections, while avoiding syntax errors that break the page.

Explore Google fonts to level up typography by embedding Consett one and Montserrat, applying font-family to headings and paragraphs, and using a div to style content with open license fonts.

Explore the CSS box model and how margins, borders, padding, and content define element size, using Chrome DevTools to visualize spacing and practice centering with auto margins.

Create and style a navigation bar with the HTML nav element, add links, borders, and padding, and apply responsive typography for a balanced header.

Move inline styles into a head style block and apply the dry principle by targeting elements by name. Use descendant selectors like nav a to limit styling.

Learn how to target html elements with class selectors in css, moving styles from inline to a stylesheet. Create custom classes like row, left-column, and right-column using the dot prefix.

Explore how to target HTML elements using the id selector in CSS, compare inline, element, and class selectors, and apply a clean layout with a layout container for better maintainability.

Discover how external stylesheets improve efficiency by applying a single shared style across the home page, about page, and members page, reducing duplication and following the dry principle.

Learn how to move styles to a single external stylesheet, link all pages, and tailor per-page backgrounds with ids, while weighing import vs link methods and internal versus external styles.

Review section five recap highlights using a professional code editor, namely Microsoft VZ code, linking pages with anchor tags, and structuring pages with HTML and CSS, external stylesheets, and fonts.

Explore JavaScript, the most popular web language, and learn its concepts and syntax by building a simple in-browser program that adds a password feature to the code club website.

Discover why JavaScript unlocks interactivity by running in the browser to transform HTML, respond to user input, and dynamically update page content, enabling dynamic web apps rather than static sites.

Learn to add JavaScript with the script block in HTML, place it in head or body, and run a hello world alert to understand statements and syntax.

Explore synchronous versus asynchronous code execution in JavaScript. Learn how alerts and modals affect page loading and how asynchronous operations enable a non-blocking user experience.

Explore primitive data types in JavaScript—numbers, strings, booleans, undefined, and null—and see how objects and arrays organize data with nested structures, properties, and values.

Learn how variables store data in web pages, define and assign values in JavaScript using var, understand undefined and null, and explore dynamic typing and literals.

Master assignment and arithmetic operators in JavaScript, including the assignment operator, addition and subtraction, left-to-right evaluation, and string concatenation with data type coercion.

Explore how to compare values using equality, inequality, and relational operators in JavaScript. Understand booleans, type coercion, and the difference between assignment and comparison.

Explore conditional logic in JavaScript, using if, else if, and else statements to control code flow based on true or false conditions, with practical examples like a password check.

Explore how functions organize web app logic in JavaScript, triggering via events, using modular design and hoisting, and understand function arguments, returns, and built-in functions.

Learn how JavaScript functions use arguments to accept data, return values, and display results with alerts. See examples of concatenation, numbers and strings, and global versus local scope.

Deconstruct larger tasks into component steps to solve web development challenges. Implement a password gate between home and members pages by adding a password page, input, and check logic.

Create a new password page, route home and about links to password.html, copy the home page content, and add a password input with a submit button.

Explore the HTML input element and its types: text, password, checkbox, and radio, and add a submit button. Connect the button to JavaScript code that runs on click.

Learn how HTML events trigger JavaScript via event handlers, using on click to run functions like checkPassword, capture user input, and explore the document object model for dynamic, user-driven pages.

Explore how JavaScript objects hold data and behavior by using properties and methods, accessed via dot notation to represent real-world things.

Discover the HTML DOM as a tree of objects and use the DOM API with JavaScript to access the user-entered password from an input element for dynamic checks.

Learn to capture the password box input value from the HTML using the DOM and getElementById, store it in a variable, and inspect the object with console.dir for debugging.

Capture the password with the HTML DOM and JavaScript, compare it to a defined site password using an if statement, and navigate to the members page when it matches.

Master dom editing with getElementById, innerHTML, and style. Enable navigation to the members page on correct code and move scripts to external files.

Section six recap explains how JavaScript works with HTML to add interactivity to web pages, covering data types, variables, functions, asynchronous concepts, events, and DOM manipulation.

Explore what a web development framework is, get a high-level intro to bootstrap, and learn how to apply bootstrap easily in your own projects with a quick demo.

Explain what a framework is and how it speeds web development with ready libraries like Bootstrap and Material, plus front end and back end options such as Angular and Node.

Explore bootstrap, a popular CSS framework for responsive and mobile-first websites, and learn how its grid system, jumbotron, utilities, and components enable you to build professional, responsive pages.

Explore building a Hogwarts-themed page with bootstrap. Customize the navbar and title, apply a background image to the jumbotron, and create responsive cards in a grid.

Explore how a framework bundles reusable code to speed development, and learn bootstrap as a styling framework for responsive, mobile-first web pages, including how to load it via a CDN.

Design a three-page website by scaffolding pages, wiring navigation, and adding content and images, then style with Bootstrap or CSS and add simple JavaScript for interactivity.

Publish your website by hosting on a web server or using GitHub Pages. Learn how domain names, DNS, and FTP or Git repo publishing make your site live and auto-update.

Wrap up section eight of the web development challenge and move into the final section with bonus content to sustain your momentum.

Consolidate your web development foundation in HTML, CSC, and JavaScript and map your next steps into design, styling, and programming with front-end frameworks like Angular, React, and Vue.