How to create Websites Build 10 Websites From Scratch

Explore the basics of HTML, including images, hyperlinks, headings, paragraphs, lists, and semantic tags like header and section, plus forms and how to structure a web page using an editor.

Explore HTML basics by building the page structure with opening and closing tags, head and body sections, and paragraph elements, while understanding how browsers render and style HTML templates.

Develop a basic html template by structuring with doctype, html, head and body, and using meta tags, charset, viewport, title, and lowercase tags for browser rendering and search engine optimization.

Explore how to structure web content using headings, paragraphs, and line breaks with HTML, focusing on H1–H6 usage, proper paragraph nesting, and clear content organization.

Learn to insert images with the img tag, set src, and use placeholder images like Lorem Pixel, with width, height, and responsive sizing.

Learn to create ordered and unordered lists, improve accessibility for screen readers, and customize list markers with letters or roman numerals, including navigation menus and basic CSS styling.

Learn how hyperlinks power web navigation with anchor text and href, including internal anchors, relative vs absolute paths, and opening external links in new tabs.

Describes using divs and spans to structure content, create anchors, and link to mailto and tel actions. Shows building a one-page site with navigable sections and easily accessible contact information.

Explore how semantic elements such as header, nav, section, article, and footer replace divs to create meaningful, accessible web structures, and learn to use wrappers for layout and top-down organization.

Transfer build content to editor demonstrates importing code from CodePen into a web page, linking HTML, CSS, and JavaScript files, and adding libraries such as Bootstrap, Foundation, and Animate.css.

Learn to build HTML forms from scratch using form, input, label, and button elements; configure GET and POST methods, placeholders, IDs, and action to send user data to a server.

Explore HTML5 input types for forms, including email, radio buttons, checkboxes, color, date, datetime, month, week, time, number, and url, with practical code pen demonstrations.

Learn to implement select dropdowns and text areas in forms, assign names and values, set defaults, and apply attributes like required, disabled, rows and columns to enhance web forms.

Explore core HTML elements and inline text semantics, structure content with semantic tags, and practice embedding media, canvas drawings, tables, and forms for web pages.

Explore cssa basics, apply it to your html, and transform a site with colors, fonts, backgrounds, and responsive design using media queries.

Learn how to style websites with CSS using inline, on-page, and external stylesheets. Understand selectors by tag, ID, and class, and how to nest and isolate elements for precise styling.

Learn to target elements with CSS using classes, IDs, or tags and apply background and text colors to headers and paragraphs, including hex, rgb, and rgba colors with alpha transparency.

Explore CSS background options by applying a background image to the body, adjusting color, position, repeat, size, and attachment, and using shorthand to simplify declarations.

Apply font choices across your site using Google Fonts, import or link methods, set font-family on the body, and customize link styles for a modern look.

Learn to style hyperlinks with CSS by removing underlines, customizing color, and using pseudo-classes for hover effects, guided by common design patterns from Yahoo patterns for clear user interaction.

Learn to use the float property to align images and create a two-column layout with a main content area and a sidebar, including clear and flow management.

Explore the CSS box model by adjusting margins and padding, centering a wrapper with auto margins, applying max width, and using shorthand margin syntax to control layout.

Apply the CSS box model using the padding shorthand to control inside spacing, borders, and content, and adjust margins to center wrappers and create space for sidebars and main content.

Learn to tailor font sizes with em units and build a horizontal navigation bar by styling an unordered list, removing bullets, float items, and applying hover effects.

Explore CSS display properties, including block, inline, and inline-block, and learn how display none and visibility hidden affect layout, positioning, and space, with examples from navigation bars.

Master CSS overflow handling by learning how to control content visibility with overflow, hidden, scroll, and auto, and how to use overflow-x and overflow-y for horizontal or vertical scrolling.

Explore CSS positioning with absolute, fixed, relative, sticky, and static to place elements; absolute floats over content, fixed stays in view, and relative and static affect flow.

Clear floats to keep navigation aligned. Enhance the page with borders, border-radius, padding, centered text, and explore pseudo elements and pseudo classes like first child and first letter.

Learn to make a website responsive using media queries, set breakpoints, and implement mobile-first design with max and min widths, managing sidebars, navigation, and content spacing across devices.

Apply CSS properties to HTML to design a website, plan the structure for flexible styling, and experiment with different layouts using an editor, CodePen, and Chrome DevTools.

Explore CSS fundamentals by working with the course's source code, copying and pasting into CodePen or your editor, and using live preview to see your own styled pages.

Explore how JavaScript adds programming logic to web pages, using variables, arrays, objects, loops, functions, conditionals, and events to enable user interactions and responsive updates.

Learn how to add javascript to web pages, create interactive elements with the DOM, and implement dynamic effects using HTML, CSS, and tools like CodePen and Brackets editor.

Learn how to add JavaScript to web pages by creating .js files, using script tags, and linking external scripts to render in the browser, enabling reusable and easily updated code.

Place JavaScript in HTML at top or bottom, understand the document object model, and use comments, semicolons, and whitespace to write readable code while debugging with dev tools console.

Discover how to declare and use variables in JavaScript, including numbers, strings, and booleans, and interact with prompts, alerts, and the browser console via the window and the document objects.

Learn how to name variables with camel case, avoiding spaces and starting names with letters, dollar signs, or underscores. Explore operators, declarations, and how strings interact with numbers in JavaScript.

Explore arrays and objects in JavaScript, learn indexing from zero, access values with brackets or dot notation, and handle dynamic values for looping.

Learn to work with arrays and objects in JavaScript, update and output values, access data, and push new items, while noting rendering order and array length.

Learn how to create and manipulate arrays in JavaScript, including push, pop, shift, splice, slice, sort, and reverse, to add, update, remove, and reorder items.

Explore how functions in JavaScript execute a block of code, accept arguments, and return values, and compare global and local scope in various call patterns.

Explore variable scope in JavaScript, distinguishing global and local scope within functions, and learn how returns and external values interact with local variables.

Learn how JavaScript operators work, including increment and decrement, assignment versus comparison, equality checks (== vs ===) and types, and the ternary operator and logical operators that drive conditional statements.

Master conditional statements to execute code based on conditions, using if, else, and else if. Explore switches for value-based decisions and understand true/false outcomes.

Master using switch statements in JavaScript to evaluate an expression, select the matching case, apply breaks, and handle numeric and string values with a default option.

Explore JavaScript loops, including while, do-while, and for loops, and how conditions, increments, and console.log control when a block runs and breaks.

Master JavaScript for loops to iterate arrays and objects, output values with console log, access array length, and retrieve object properties by key or index.

Learn how the document object model enables dynamic interaction by accessing and manipulating HTML elements with JavaScript and event listeners.

Learn to select and update page content with JavaScript by using the document object model, targeting elements by id or class, and manipulating innerHTML and innerText.

Learn to select elements with JavaScript using id, name, tag name, and class name, then loop through list items or use query selector to update page content via the DOM.

Learn to update CSS with JavaScript by selecting the footer element with querySelector or getElementById and changing its style properties, such as background color, color, and margins.

Learn to listen for click events with JavaScript event listeners, update styling and colors (including red and blue), and log interactions to the console. Explore keeping listeners separated in JavaScript.

Learn to move inline event listeners into JavaScript, select list items with querySelector or getElementsByTagName, loop through items, and attach dynamic click events.

Use addEventListener to attach and remove listeners, beyond on click, and loop through items to create dynamic interactive UI with mouseover and the event object.

Explore how JavaScript powers dynamic, interactive web pages by manipulating the DOM, handling events with listeners, and combining HTML, CSS, and logic to create polished applications.

Apply your JavaScript knowledge by copying code into an editor or CodePen, then run it in the console or browser. Explore output methods like document.write while interacting with HTML.

Explore how jQuery speeds up writing JavaScript, enables event listeners, animations, and ajax data retrieval to create interactive web pages; review library loading and sample source code.

Explore how jQuery, a lightweight free JavaScript library, simplifies DOM interactions, small in size and loads quickly, animations, events, and AJAX, with CSS-like selectors and easy CDN integration.

Learn to add jQuery to a web project, use the $ factory and CSS-style selectors, and rely on document ready to update a div with hello world.

Explore how to use jQuery selectors to access and manipulate HTML elements, update text, HTML, and input values, and select by id, class, and tag.

Learn to select multiple elements with tags and classes, loop through them using the each method, and update or log values for list items with jQuery selectors.

Update list items with jQuery by looping through elements and using prepend, before, after, append, empty, and remove to manipulate content. Learn the difference between empty and remove for pages.

Explore CSS selectors and jQuery selectors to target specific elements, such as the first child, and apply styles like an aqua background, with syntax parallels between CSS and jQuery.

Learn to bind events by attaching click listeners to list items without looping, prevent default on hyperlinks, and explore mouse, keyboard, form, and window events using a query-based approach.

Binds event listeners to list items with jQuery, enabling click and hover interactions that update the first name input with the clicked item's value, using on to attach multiple handlers.

Attach a keyboard event listener for keydown on the first name input to log key, value, and event type, and explore focus and change events to enhance form interactions.

Learn how to attach resize and scroll event listeners to the window object, track window width and scroll position, and display live updates.

Learn to traverse the DOM with jQuery, moving through parents, children, and siblings, and to gather form inputs with find. Implement prevent default and loop through fields to capture values.

Learn to traverse the DOM with jQuery, exploring parent and sibling relationships, accessing children, and updating styles such as background color while inspecting elements in the console.

Learn to traverse the document object model and select elements with query selectors, target siblings by id or class, and apply styling such as background color using css and jQuery.

Update css with jquery by selecting elements, applying properties, and toggling classes through click and hover interactions to style content and create simple effects.

Explore how to hide and show web page sections using jQuery, with fade, slide, and animate effects; learn event handling, traversing the DOM, and toggling display to build dynamic menus.

Learn to use jQuery fading effects to reveal or hide page sections, control fade speeds, run callbacks on completion, and toggle classes to change backgrounds for interactive content.

learn to implement jquery sliding effects to reveal and hide page sections using slide down and toggle, starting with display none and targeting wrapper elements.

Learn to animate page sections with jQuery animate, scrolling the body to section tops using offset and index, and build a responsive, fixed navigation bar.

Master how jQuery simplifies asynchronous ajax requests to load content into HTML without page reloads. Explore get, post, load, and ajax methods and the role of JSON data.

Load json data into a web page using ajax with jquery, via a button click, display results in an output area, with a callback updating the UI and codepen examples.

Explore jQuery ajax get and getJSON to fetch server data from a php file and display JSON fields like first name on the page.

Learn to use Ajax with jQuery to send data via get and post, handle callbacks, and customize requests with Ajax options for sending payloads and handling success or error.

Explore how jQuery lets you write less code and do more with Ajax and event triggers. Practice using CodePen, review the source code, and visit jquery.com to stay updated.

Explore how to manipulate arrays in jQuery by using each to loop values and map to create new arrays, then output results to HTML.

Set up your development environment with brackets and your browser, explore the Bootstrap beta version, and prepare to create web pages using Bootstrap in this course.

Learn to bring Bootstrap into web projects via CDN links, with CSS and JS files, and include jQuery and Popper.js, then set up a starter template and ensure file order.

Explore bootstrap layout containers by building two divs, one with container and one with container-fluid, and using color utilities to visualize responsive grid behavior across breakpoints.

Build a responsive Bootstrap grid using container, row, and column classes in a 12-column system. Explore breakpoints, fluid containers, and color utilities to create flexible, multi-column layouts.

Master bootstrap grid concepts with a 12-column layout, adjusting column widths, gutters, and order, and centering content with auto margins. Explore nested grids and breakpoints for responsive, centered layouts.

Explore Bootstrap's jumbotron and jumbotron fluid to highlight content with margins, padding, and rounded corners, compare their layout differences, and use related utilities.

Learn how to use Bootstrap 4 spacing utilities to control margins and padding, including margin left and padding classes with breakpoint options, and practice applying them to page layouts.

Explore Bootstrap 4 color utilities to set background and text colors using primary, secondary, success, danger, and white options, and experiment with light and dark contrasts for accessible design.

Explore Bootstrap 4 utilities, including heading classes like h-1 to h-6, display options, borders, colors, and text styles, and learn to apply padding, margins, and inline versus block layouts.

Explore how to build and style Bootstrap 4 tables, using the table class, table-striped, table-bordered, table-hover, and responsive options to create readable, color-coded tables across devices.

Learn to build a responsive image grid in Bootstrap, using image fluid and image thumbnail, with placeholder images to control width and prevent overlap inside restricted containers.

Explore Bootstrap buttons, including color variants (primary, secondary, success, danger, warning, light, dark, link), sizes (large, small), block level options, and active or disabled states, with hands-on practice.

Explore Bootstrap 4 forms, including form groups, form controls, and input groups, and learn to structure, style, and layout forms using grid layouts and buttons.

Explore Bootstrap button groups using data-toggle to toggle checkboxes and radio buttons, with labels, active states, and named groups to build a mobile-friendly input form.

Explore bootstrap alerts and how they notify users with role='alert', then build dismissible alerts with a close button via bootstrap and data attributes, including color variants like warning and danger.

Apply Bootstrap 4 badges to a div, using color variations like primary and danger, including pill formats.

Explore how to implement bootstrap progress bars, including straight, striped, and animated styles, with configurable widths and color options like success and primary, and multiple progress bars.

Explore how bootstrap cards use the card class to structure content with body, title, text, and images, then learn grid layouts and fluid images for responsive cards.

Discover how Bootstrap list groups transform unordered lists into styled items with active and disabled states. Apply list group classes and colors, and manage active states dynamically.

Learn to build a fully responsive bootstrap navigation bar by transforming an unordered list into a styled nav with navbar classes, collapse behavior, and a hamburger toggle.

Explore how to transform an unordered list into a bootstrap navigation with bars, pills, and tabs, using nav link classes and active states.

Create a Bootstrap 4 carousel slider by building a structured carousel with an id, inner items (one active), slide controls, and indicators to navigate through images.

Master bootstrap modals to create pop-up interactions using data-toggle and data-target, structure modal dialog with header, body, and footer, add close controls, and adjust size and fade effects.

Learn to build a responsive website from scratch using HTML and CSS, with a left navigation, two-column layout that stacks on small screens, and no JavaScript, with included source code.

Create HTML5 page with doctype and html, head, body tags, and a viewport meta; sketch a wireframe with header, three menu items, content, and a footer in a responsive grid.

Wrap the entire content in a wrapper, then build header, nav, main with sections, and footer to create a responsive page that stacks at 100 percent width on mobile.

Add footer information and placeholder text, embed placeholder images from lorem pixel or placehold.it, and link a stylesheet to apply consistent styling across three pages and header sections.

Style the HTML structure by wrapping content in a centered wrapper with a max width of 1100px, visualize breakpoints with borders, and color two sections with grayscale colors and padding.

Turn an unordered list into a mobile-first navigation bar by styling the nav and list items, removing bullets, and making links inline blocks with hover effects.

Apply additional styling to build a complete web layout, including a footer and header, and implement mobile-first responsive design using media queries and an 800px breakpoint for tablet and desktop.

Apply responsive design with media queries at 1200px, max-width adjustments, and navigation float to create a layout that stacks content and adapts padding, borders, and column widths as screens resize.

Design with a mobile-first approach, making images max width 100 percent and using media queries to switch from two columns to single column on small screens, clearing floats to stack.

Explore how to enhance your website with Google Fonts, import font families into your CSS, and apply responsive breakpoints for centered headers and cohesive design across pages.

Build and style a responsive website by setting up team structures, adding placeholder content, styling elements, and implementing a navigation bar with media queries and Google fonts.

Build a single-page website with a sticky header and navigable sections, using HTML, CSS, and JavaScript; implement auto scrolling, click events, and background images with Google Fonts.

Plan and wireframe a responsive single-page website with desktop and mobile views, a top menu and logo, and full-page sections that scroll or jump via menu buttons.

Build a two-part web structure with a header and a main container, including branding, a navigation area, and sections like home, products, and contact; implement a sticky, reusable header.

Build a navigable single-page site by crafting a navigation menu with an unordered list and anchor links, and structure content with heading tags for seo-ready design.

Build a structured page by nesting semantic elements such as sections and articles. Use anchor links to ids for navigation and prepare styling with css for a polished layout.

Learn to style webpages using inline styling, style tags, and external stylesheets, and understand CSS selectors like IDs, classes, and tag selectors that control colors and layout across a site.

Learn to link fonts and libraries, using Font Awesome and Google Fonts via CDN or local files, with tips on integrity, caching, and loading order for responsive navigation and typography.

Create a sticky header by fixing the header, setting full width and 80px height, applying a background, and tuning padding, overflow, and z-index for reliable navigation.

Style the navigation bar with CSS by floating the menu to the right and removing default list styles. Add borders, padding, and hover effects for a clear, uppercase navigation menu.

Apply branding by using background images and colors to sections, control background size and repeats, and use pseudo elements to alternate section colors for a responsive, visually engaging one-page website.

Apply a semi-transparent background to article sections using rgba with alpha to enhance text visibility, adjust padding, and center the section text. Explore responsive navigation by hiding the logo or using a menu icon to reveal the menu above the section areas.

Learn to build responsive websites with CSS media queries, using breakpoints and mobile-first or desktop-first approaches to adapt layouts and menus across sizes.

Use media queries to build a responsive navigation that switches between a visible menu and a mini menu on small screens; float the menu right and enable click with JavaScript.

Explore how HTML, CSS, and JavaScript work together to create dynamic web pages, using the Document Object Model, event listeners, and jQuery to trigger menu interactions.

Learn to add click events to page elements using jQuery, accessing by id or class, waiting for DOM to load, and using slide and alert interactions to build menu functionality.

Use jQuery to capture clicked targets, read their x and y offset coordinates, and implement smooth scrolling to the target while sliding the menu back up on click.

Learn to implement dynamic scrolling with jQuery animations, selecting elements by tags, scrolling to a target position with adjustable speed, and preventing default links for smoother mobile navigation.

Hide the mini menu on small screens by forcing display block with !important and use a jQuery style query to slide it up when clicked.

Fixes a responsive navigation on a one-page site using jQuery to toggle the mini menu on window resize across breakpoints. Demonstrates display none/block checks and an animated scroll.

Explore the provided source code and implement it to create a fully responsive site with automatic scrolling between sections, using font awesome, google fonts, and jquery loaded above your scripts.

Build a responsive website template and interactive navigation menus, highlighting the current page with active classes using query or jQuery, and adapt layouts for different screen sizes.

Plan a responsive website by wiring a two-column desktop layout with header, logo, navigation, and footer, and link a stylesheet for centralized styling.

Turn the wireframe into a three-area HTML layout, header, main section with primary and secondary content, and a wrapper, with an HTML5 nav and an unordered list for links.

Apply mobile-first styling with css, using media queries and breakpoints to adapt layouts, employ min-width and max-width, and manage two-column designs with floats and clear floats.

Update the header elements by breaking the header into a left logo area and a right navigation, then use media queries to switch to a horizontal navigation on large screens.

Learn to build a responsive nav menu by turning ul items into inline, horizontal links, removing default bullets and padding, and adding hover effects for a polished header.

Add a 720px breaking point for tablet view, adjust the logo header area, and tune margins, padding, and text alignment to create a responsive two-column layout.

refine the site styling with grayscale colors, remove borders, adjust header and footer backgrounds, tune margins, padding, and line height, and prepare for a selected class on menu items.

Add a selected class to highlight the active navigation item (home, products, contact). Update the main wrapper with max-width, auto margins, and responsive padding to center content at breakpoints.

Learn how to use jQuery to detect the current page from the URL and dynamically highlight the active navigation item by applying an active class.

Apply jQuery to dynamically add a selected class to menu items based on the current page path, using selectors, variables, and simple logic.

Learn to add Google fonts to your website by selecting from over 804 font families and applying them via link or import into CSS, updating your site instantly.

Apply responsive styling across pages by setting images to max-width: 100% and adding padding. Use per-page css with specific selectors and improve forms with borders and fonts.

Update the products page by building a neat gallery of product images using an unordered list and css to ensure responsive resizing, consistent widths, and image placeholders.

Create a three-page website with a shared CSX file for uniform styling, enabling responsive mobile-ready layouts, adjustable footer color, and scalable images; customize via source code and Google fonts.

Create a responsive website from scratch, implementing URL-based active navigation to guide users. Build the structure, adjust navigation output for different screen sizes, and experiment with stacking layouts for mobile.

Learn to build a responsive five-column website from scratch using HTML and CSS, with a header, navigation, two main columns, a three-column footer, and step-by-step styling from wireframe design.

Sketch your website layout with a header, a footer, navigation, and two-column content areas, then adapt a mobile-first responsive design for different screen sizes.

Build a clean HTML structure by creating a main wrapper with header, body, and footer, then organize content using divs, sections, nav, and a sidebar with max width of 1200px.

Structure the HTML with modular containers and placeholders for logo, navigation, content, and images to plan your site layout. Add dummy text and links, then apply CSS.

Apply CSSA to transform raw HTML into a styled site, setting body background, link colors, and hover effects, and center a 1200 px wrapper with the box model for margins.

Learn to structure and style a website header by defining a logo area, search box, and navigation bar, and master absolute and relative positioning, z-index, and responsive adjustments.

Create a responsive navigation bar from a header by using absolute positioning, transforming the ul, removing bullets, floating items, and applying hover effects with grayscale colors.

Apply quick updates to the website by moving the search bar into the main navigation, aligning the list items, and adjusting padding and margins for a cleaner responsive layout.

Learn to build a two-column layout with a main container, content, and sidebar using borders, colors, a 66/33 split, floats, clears, and padding for clean alignment.

Learn quick CSS tweaks to refine a website layout, including footer styling, image alignment with text, background color, padding, text alignment, and planning a responsive three-column footer.

learn to build a three-column footer by styling first, second, and third sections with css selectors, floats, widths, padding, and responsive adjustments for mobile resizing.

Make your site fully responsive by applying breakpoints, mobile-first design, and CSS adjustments to headers, navigation, and containers for consistent presentation across sizes.

Optimize responsive design by updating header color, hiding ads on small screens, and tightening padding and margins to ensure clean, aligned layouts across devices.

Create and customize a CSSA template by tweaking the main container areas, using the provided source code, and link additional pages like contact and products with page-specific content.

Build a column-based website layout with a main content area, a site area with ads, and a footer, and learn to stack columns for different screen sizes using CSS.