How to create Websites Build 10 Websites From Scratch

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.

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.

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.

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.

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

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.

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.

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

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

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

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.

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

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.

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.

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

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

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.

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.

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.

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.

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.