Complete Web Design: HTML, CSS, JavaScript, Vue, React, Git

Discover how to install and use the live server extension in Visual Studio Code to auto-refresh changes when styling pages with CSS, speeding up web development.

Explore inline, internal, and external css and learn why an external style.css linked file is ideal for multi-page sites, with hands-on practice in Visual Studio Code.

Use Chrome's developer tools to see default body margins pushing the header, reset the margin to zero, and center the header text.

Explore margins and paddings to create space around and inside elements, compare margins outside vs padding inside, and learn shorthand techniques for efficient CSS like 1, 2, and 4 values.

Learn to centralize page content by resetting margins, applying top and bottom paddings, and using auto margins with a 570px max width inside the main area, plus center the footer.

Explore CSS selectors: id, class, group, and universal selectors; adjust margins, apply shorthand, and structure an iframe and related posts section.

Apply font-family css using generic families, safe web fonts, Google Fonts, or self-hosted options to enhance cross-device typography.

Examine the key CSS text properties, including text align property, font size, and line height. Discover font weight, letter spacing, and color considerations, and apply these via selectors.

Explore how descendant selectors and css nesting organize styles for scalable web design. Compare the old repetitive approach with nesting method applied to sections like main, article, and footer.

Explore css color options, including color names, hex codes, and rgb values, and apply them to headers, post categories, and global link colors for cohesive web design.

Learn how to use CSS text transform and text decoration to style the related posts section, including uppercase, capitalized, and none for links, with nested selectors and removing list bullets.

In this CSS borders module, set the footer max width to 856px, center with margin auto, add 20px vertical padding, and apply a top border of 1px #c1c1c1.

Build a responsive layout with flexbox, with a left logo and right navigation, a hero, best-seller section, and a four-column footer, using CSS media queries and live server testing.

Build the header of a web project by creating a semantic header with a logo section and a navigation menu—using ul, li, and links—and align it with the prototype.

Create a responsive page container with 1440px width and a 90% max, centered with margin auto, applying a Hebrew font while learning prototype concepts and bootstrap breakpoints for desktop design.

Use flexbox to align and distribute items in the top bar. Remove bullets and margins from the navigation list, and apply space-between with a container flex layout.

Master styling a top bar with flexbox by setting a 70-pixel header, centering items with align items center, and adding a shadow for clarity; plan for responsive changes with media queries.

Refine the header top bar by removing link underlines, applying the prototype color, and setting the logo to 27px. Add blue dots as circular spans using border-radius and display inline-block.

Learn how to build a responsive hero section with a background image or an inline image, set dimensions, adjust background properties, and prepare for overlaying hero content.

This lecture demonstrates placing hero content with absolute positioning relative to the hero section, using top:0, left:0, and 100% width/height inside a flex container.

Style the hero content by targeting section.hero h1 and p, set font weights, sizes, line heights, and a 495px max width to match the prototype.

Build the best sellers section under the hero with a centered h2 title, a horizontal separator line, and three product cards, using responsive breakpoints and semantic markup.

Create the products area with HTML and CSS, building a product slider featuring image, category, title, price, and add-to-bag button, arranged three per row using flexbox.

Style the product cards to align with the final design by refining fonts, margins, and button behavior, ensure responsive spacing, and separate image and info blocks for clarity.

Fix the product info box by splitting content into two blocks, stack the image above the info with a column flex layout, and apply space-between margins including a bold price.

Learn to display a new tag on product cards with the before pseudo element and absolute positioning, avoiding extra elements while using relative parents, the content property, and padding.

Learn how to display discounted prices alongside the original price using a flex price element, enabling wrap when space runs out and applying a discount class for red, line-through pricing.

Create a newsletter sign up section using HTML and CSS that includes an input type email with a subscribe button and a centered layout.

Style the email input and subscribe button to mirror the prototype, adjusting width, height, padding, border radius, colors, and placeholder text for a polished newsletter sign-up form.

This lecture teaches building a footer with a semantic HTML5 element, a container, four lists distributed side by side using flex and space-between, each 25% wide with titled list items.

Finish the footer by replacing text and adding links with Visual Studio Code search-and-replace workflow, turning list items into anchors; style them white with no underline and add copyright section.

Implement hover states for links, buttons, and product cards using css :hover. Ensure pointer cursors and color or background changes signal clickability for desktop users.

Learn the three types of html links—external, internal, and anchor links—using practical examples with placeholders, target attributes, and id-based navigation.

Learn to build responsive websites with CSS media queries, using breakpoints, min-width, and max-width to adapt layout and typography across desktop, tablet, and mobile.

Explain how to style for desktop breakpoints using Bootstrap's predefined classes, adjust container widths and max widths, and tune h1, p, and button sizes for responsive design.

Continue refining desktop styles by removing borders and finalizing a three-column product grid. Plan hero image handling with the picture element and align the newsletter and footer to page container.

Translate the small desktop styles to the tablet, tweaking fonts and margins for hero and best sellers, adjust images with the picture element, and replace menu with an icon.

Create a responsive mobile menu icon by adding a menu item with a class and image, then control its visibility with CSS across breakpoints, without JavaScript in this course.

learn to implement responsive images using the picture element, serving mobile, tablet, and desktop images via media-based source tags, with a fallback main image and breakpoint-aware ordering.

Copy desktop styles to the mobile version, hide the paragraph, remove absolute positioning in the hero, center content, and refine margins, fonts, and inputs for a responsive black mobile view.

Finalize the mobile version by using flex wrap to set bestseller and footer grids to 100% width. Add 24px bottom margins, last-item zero, and center alignment for a clean layout.

Discover how to host a website on a server, choose a hosting service, upload files, and link a domain via DNS to an IP address for public access.

Discover how to find a free hosting service like InfinityFree, create an account, upload website files via the online file manager, and prepare for FTP deployment.

Compare paid hosting with free options, highlighting Bluehost's reliability, 24/7 support, SSL, backups, and added security features like domain privacy, Codeguard, and Sitelock.

Buy a .com domain and connect it to a free hosting service using the proper name servers, then upload your site files with FileZilla.

Master JavaScript from zero to advanced as you build a six-hour project, turning static pages into interactive experiences and unlocking the most important features of JavaScript.

Build an interactive page with a toggleable menu, greetings, and weather via Openweathermap. Use events to toggle the menu, apply css manipulation, and create an image gallery with Celsius/Fahrenheit switch.

Clone git repo or download a zip file, open project in Visual Studio Code, and view HTML and CSS assets; enable the live server extension for automatic browser refresh.

Explore how browsers read and run JavaScript, open developer tools, use the console for testing and debugging, and understand case sensitivity and basic functions like alert.

Learn how to include JavaScript with the script tag, place scripts at the end of the body, and connect an external main.js file, testing with alerts and semicolon conventions.

Learn JavaScript syntax, including why we use parentheses for functions, how to create custom functions, pass arguments, and display results via console, alerts, or dynamic HTML elements.

Explore how the browser builds the document object model from html, navigate the dom tree, and interact with page elements using the document object to create dynamic web pages.

Explore the dom using document.getElementById to select an element by id and modify its innerHTML, testing changes in the console and in main.js.

Explore element selection methods in the document: use getElementById for a single element, getElementsByClassName and getElementsByTagName for collections, and querySelector for css selectors; loop to modify multiple elements with innerHTML.

Learn to manipulate CSS with JavaScript by changing element styles via the style property, toggling and applying classes, and wiring click events to show or hide a menu.

Explore how to use the click event and add event listener to trigger changes on a page, such as opening and closing menus, updating images, and filtering items by clicks.

Open and close the navigation menu by toggling the nav open class on the wrapper with open and close button events, using the right property in CSS.

Learn how to use variables to store values, perform currency conversions with an exchange rate, and manage scope with var, let, and const, including updating values across an app.

Learn JavaScript naming: allowed letters, digits, underscores, dollar signs; start with a letter or underscore; case sensitivity. Prefer camel case; use underscores or dollar signs, keep names meaningful and concise.

Explore how data types influence JavaScript operations, from numbers to strings, using the typeof operator, and understand why JavaScript is weakly typed and can produce unexpected results.

Explore strings as a data type, use length and index to read characters, slice to extract country codes, and replace to clean or reassign account numbers for validation.

Students learn to work with the number data type in JavaScript, perform arithmetic (including rounding with Math.round, floor, ceil, and toFixed), handle decimals, and convert between strings and numbers.

Build a dynamic greeting area that shows good morning, afternoon, or evening with weather, location, and temperature, plus a Celsius to Fahrenheit toggle, using comments and clear variable names.

Replace dynamic values in the greeting message with JavaScript template literals, using backticks and ${} to inject weather, location, and temperature into the HTML elements.

Explore arrays in JavaScript, create lists with brackets, access elements by index, and manage collections with push, unshift, and concat, while noting that JavaScript treats arrays as objects.

Explore the object data type in JavaScript, comparing objects to arrays, and learn key-value pairs, dot and bracket notation for property access, and array operations like length and push.

Explore the boolean data type in JavaScript, using true and false to drive decisions through comparisons. Learn about equality operators (== vs ===) and the not operator to test conditions.

Learn how null and undefined indicate absence of values in JavaScript. See why a declared variable has undefined when unassigned, how null erases value, and how null and undefined compare.

Create and invoke functions to encapsulate reusable code, explain arguments and parameters, and use a Celsius to Fahrenheit conversion to return values for use in multiple places.

Implement a temperature switch using a parent element event listener to detect Celsius or Fahrenheit by id, then convert and update the displayed message.

Master JavaScript conditionals by implementing an if/else if structure to handle Celsius and Fahrenheit button clicks, using booleans and true/false tests with console output.

Learn to work with the JavaScript date object, including creating local and specific dates, calculating differences in milliseconds, and using get hours, get minutes, and get seconds to track time.

Create a date to obtain current time, extract hours, minutes, and seconds, and update spans with data-time attributes via a CSS selector. Repeat the update every second with a function.

Learn how to build a live clock in JavaScript using setTimeout and setInterval, updating local time every second by fetching hours, minutes, and seconds.

Demonstrates using the padStart method to ensure fixed-width strings, padding with zeros (or underscores) to two digits for clocks, and testing in code editors like Visual Studio Code.

Learn to use the for loop in JavaScript to repeat code, with initialization, condition, and end-of-iteration steps. Use for in to iterate arrays and objects, printing results with console.log.

Build an image gallery by creating an array of image objects with source and alt, rendering thumbnails, and updating the main image on thumbnail click.

Discover the for each loop for iterating over the gallery images array, gaining access to both image and index in each iteration, and printing them as needed.

Select the gallery main image by id, update its src and alt from the array, and loop to create thumbnails.

Create and populate the gallery thumbnails with dynamic image elements using a loop and data attributes for index and selected. Handle click events to update the main image accordingly.

Apply a ternary conditional to set the first thumbnail as selected by default. Use an inline ternary to assign data set selected to true when index is zero, otherwise false.

Implement a dynamic gallery where clicking a thumbnail updates the main image and highlights the selected thumbnail, using event listeners, dataset attributes, and a reset-unselect-then-select approach.

Use JavaScript to obtain the current hour from a date object and drive a time-based greeting with an if-else chain, producing good morning, good afternoon, good evening, or generic welcome.

Organize your web app by creating section-specific handler functions, executing them on page load, and promoting modular, readable code with reusable utilities like temperature conversion.

Render the products section by looping through a products array to create dynamic product elements, with an all filter by default, and load data from products.json.

Populate the products section by looping through the products array, creating a product item div with an image (src from product.image, alt from the title), and appending to the products area.

Continue populating the products section by building product details with title, author, and price in pure JavaScript, using proper classes and formatting prices to two decimals or 'free' when zero.

Explore the array filter method to separate paid and free products by price, and update the total counts on the page.

Filter products into all, free, and paid arrays, then populate labels with their counts and handle undefined prices using logical operators.

Create a reusable populate products function to render products from all, paid, or free arrays when filters are clicked. Clear the section first to show only the selected subset.

Build a dynamic footer that shows the current year using a footer handler and simple HTML, CSS, and details element, preparing to fetch weather data from an external service.

Learn to make the weather section dynamic by using the navigator.geolocation API to obtain user latitude and longitude, handle authorization, and fall back to a default location.

Explore how arrow functions in es6 replace traditional function syntax to simplify code. Apply single-argument and single-return patterns to array filtering and readying an api call for weather data.

Learn to send HTTP requests using user coordinates to fetch current weather info, and update a page without refreshing, via fetch/XHR and APIs.

Learn how to send HTTP requests with JavaScript using the fetch API, compare it to the old XMLHttpRequest, and handle responses with async/await, promises, and JSON parsing.

Learn to fetch current weather data from openweathermap.org using the api, including obtaining an api key, building the request url with latitude and longitude, and handling the json response.

Extracts condition, location, and temperature from a weather API, ensures Celsius display with metric units, supports Fahrenheit via a conversion function, and dynamically renders the weather message on page load.

Learn practical error handling in JavaScript using try and catch, including fetch error management and graceful fallbacks to prevent breaking the page when data is unavailable.