Introduction To Website Development Technologies

Explore popular web development tools and choose an efficient IDE, with Visual Studio Code as the recommended option, offering cross-platform support, extensibility, and built-in Git integration.

Install and set up Visual Studio Code, an open source IDE that supports HTML, CSS, and JavaScript, with desktop or web versions, themes, folders, and essential extensions for static websites.

Install the live server extension in Visual Studio Code and enable autosave to enable automatic preview and fast reloads as you develop. Use extensions to streamline setup and boost productivity.

Set up git and GitHub for source control, learn to track changes, commit locally, and replicate to GitHub for access across devices, with installation steps and sign-up guidance.

Create a dedicated folder for your website projects and initialize a local git repository; clone the GitHub repository into Visual Studio Code to sync code and collaborate.

Explore HTML, the hypertext markup language that defines the structure of web pages and their content, including tags, images, text, tables, and forms.

Set up your Visual Studio Code workspace and write your first HTML page with a basic skeleton, then preview it in the browser using the go live server.

Master adding text and links in HTML by using h1-h6 headings, p and br for spacing, and anchor tags with href and target attributes to create navigable links.

Create multiple html pages with consistent naming (no capitals; use underscores), and build a navigation bar to move between home, about us, and contact us.

Learn to add images to a web page using the img tag and src attribute, organize assets in an images folder, and use alt text for accessibility.

Master ordered and unordered lists in HTML using ul, ol, and li to create bullets and steps. Explore nesting anchors and proper indentation to ensure accurate web page rendering.

Learn to build HTML tables using table, tr, th, and td tags to define headers and data rows for locations with opening hours, emails, and phone numbers.

Design an HTML form with labels and inputs, choose input types (text, email, radio, textarea), use id and name attributes, mark required fields, and add a submit button.

Learn to enhance an HTML form, using labels, for attributes, and breaks, set action for navigation, and apply required and email validation for reliable submissions.

Learn how to embed external content using the iframe tag, including placing YouTube videos on your page with src, width, height attributes and basic HTML examples.

Embed video and audio on a web page using the video and audio tags with multiple sources, include YouTube embeds, and consider server load and hosting options.

Explore commenting HTML for documentation, using anchor tags for internal navigation, and styling with the style attribute to color text, like cornflower blue, while preparing for CSS and GitHub workflow.

Memorialize a website prototype by syncing local changes with GitHub through commits and pushes, using VS Code to track untracked and modified files and write meaningful commit messages.

Discover how cascading style sheets style and format HTML documents, separate presentation from content, and apply consistent, maintainable design across pages using selectors, classes, and IDs.

Learn how inline CSS uses the style attribute to set color and other properties, and why duplicating it across pages harms consistency, guiding toward an internal style sheet.

Internal stylesheets place a style tag in the head to apply global per-page styles with selectors like h2 and p, enabling shared color and fonts while noting maintenance across pages.

Convert inline and internal styles to an external css file site.css in a stylesheets folder, linked in the head across pages. Enhance maintainability and consistency with this global stylesheet.

Explore how semantic elements like header, nav, main, and footer structure pages. Understand how div and span act as non-semantic containers, while form, section, article, IDs, and classes enable CSS.

Explore non-semantic layout with divs, IDs, and classes, then compare to semantic HTML5 tags. Structure a page with header, banner, nav, main, and footer, and style via CSS.

Explore styling a non-semantic layout by applying a hex footer background, hover effects on nav anchors, centered 80% main content, and using browser inspection tools to adjust spacing.

Learn semantic web page design with header, nav, main, and footer, use article sections, and apply consistent css across pages instead of div-driven styling.

Apply a semantic approach to reuse tags, replace main content with new sections, and style images with a logo class. Create reusable CSS classes and combine multiple classes for consistency.

Explore how CSS adds personality to an HTML site and learn to track changes with Git and GitHub, including staging, committing, and reviewing diffs in Visual Studio Code.

Explore how JavaScript enables dynamic, interactive experiences in web browsers and client-side interactivity, integrating with HTML and CSS for real-time content updates.

Explore JavaScript and the browser console to add interactivity to static webpages, print to the console with console.log, and debug live in the browser.

Demonstrate JavaScript statements and variable declarations using let, semicolons, and console logging; explore strings, literals, and loosely typed values for dynamic web development.

Master JavaScript arithmetic operations, including addition, subtraction, multiplication, and division, and learn how plus handles numbers and string concatenation with augmented assignments like +=, *=, /=, and -=

Explore how JavaScript applies decision statements to code, using if, else if, and else, and switch with cases, break, and default to choose actions based on conditions.

Explore JavaScript repetition statements, including counter-controlled for loops and condition-controlled while and do...while loops, using examples that count to 10 and guard against infinite loops.

Learn how JavaScript functions enable reusable code through declarations and calls, with parameters and return values, and how to name, pass inputs, and perform calculations.

Explore how variables are scoped in JavaScript, distinguishing global and function scope, and see how curly braces and control structures like for and while determine accessibility.

Interact with HTML elements using JavaScript and the DOM, practice selecting by tag, id, and class, and modify content from the console in a live page.

Embed JavaScript into HTML pages using script tags, including external files, while placing scripts at the bottom of the body to boost load performance and avoid inline risks.

Explore how to add JavaScript to HTML to enhance interactivity, including event handling, on click, alerts, and external scripts to support separation of concerns and maintainable forms.

Learn how to clear a form using HTML reset or JavaScript by targeting elements with getElementById and setting values, or resetting the whole form, then compare vanilla JavaScript with jQuery.

Discover jQuery, a lightweight JavaScript library that streamlines DOM manipulation, event handling, Ajax, and animations with a simple $-based syntax and a wide range of plugins.

Learn how to add jQuery to a website. Choose between minified and unminified files, download locally or use a CDN, and order scripts correctly for reliable jQuery usage.

Explore JavaScript vs. jQuery by implementing a simple interactive exercise that hides all p tags, comparing vanilla code with library-based techniques and discussing syntax and readability.

Update your repository by adding JavaScript and jQuery, commit and push via source control, and prepare to explore Bootstrap to beautify your website.

Explore bootstrap, a popular open source css framework for building responsive websites with a css grid system, pre-styled components, customizable themes, and javascript plugins for interactive features.

Explore Bootstrap documentation to learn how to add Bootstrap to your website. Apply ready-made components such as navigation bars, buttons, and carousel components to enhance layout, typography, and interactivity.

Download bootstrap css and js, unzip the zip, choose bootstrap.css or bootstrap.min.css, include bootstrap.js, and optionally use CDN links; ensure correct order with jQuery and your code.

Learn to add a Bootstrap navbar with brand and links, manage active and disabled states, and apply a dark theme using bg primary and container layout.

Learn to reference Bootstrap CSS and JS across all pages, synchronize the nav and banner, ensure main sections use the container class, and explore Bootstrap table styling.

Learn to restyle a contact page table using bootstrap’s table classes, including table, table-striped, and table-hover, while using t head and t body concepts for structure.

Enhance a contact form by applying Bootstrap form-control and form-label classes, adding placeholders, and refactoring labels and inputs; style radio buttons with form-check for a polished, responsive layout.

Learn to enhance web forms with Bootstrap buttons by applying btn and btn-color classes to submit and clear actions, using green, amber, and danger styles.

Implement a Bootstrap carousel with indicators, captions, and autoplay; configure slides and images, adjust for consistent dimensions, and explore transitions and navigation controls.

Explore Bootstrap's 12-column grid and card components by turning daily tasks into four side-by-side cards, sizing columns with col-X, and embedding images, titles, text, and button links.

Explore how to implement a Bootstrap accordion to collapse and reveal content, link headers with panels via IDs and data attributes, and extend the pattern for reusable layouts.

clean up and standardize the website layout by applying bootstrap grid, updating the footer, and embedding media controls, while refining navigation styles and implementing an active link state with JavaScript.

Implement dynamic nav highlighting using jQuery by applying an active class and aria-current attribute to the nav link matching the current page, loaded via site.js on all pages.

Integrate Bootstrap with existing CSS and JavaScript to fix layouts, standardize components such as navbar, slider, cards, and accordion, then commit and push changes to GitHub.

Explore how web hosting makes websites accessible on the public internet, detailing DNS, IP addresses, web servers, SSL, and content delivery networks.

Explore Netlify, a cloud platform for static site hosting with continuous deployment and serverless architecture, enabling auto-scaling, branch deployments, custom domains with SSL, and analytics on a free tier.

Learn how to publish a website on Netlify through manual deployment by drag-and-drop, obtain a free subdomain, and manage domain settings before moving to automated deployment between Netlify and GitHub.

Connect your GitHub repository to Netlify to enable automatic deployments and CI/CD pipelines, then commit changes to trigger continuous deployment and keep the site up to date.

Discover advanced Netlify features, including custom domains, automatic https with letsencrypt, form handling and detection, beta split testing, analytics, and streamlined site configuration for ci/cd-ready hosting.

Recap of building a website with Visual Studio Code, HTML, CSS, and JavaScript fundamentals, including Git, GitHub, and Netlify deployment for version control and hosting.

Practice builds expertise through personal and small business web projects, expands to Bootstrap, JavaScript, and jQuery, then explores database development, ASP.NET Core, and DevOps for building complex systems.