Create Your First Website with HTML, CSS & JavaScript

Create your first HTML page by organizing files in a folder, naming index.html, and using VS Code live server to launch the page in a browser.

Explore HTML, the hypertext markup language, defining page structure with tags for headings, paragraphs, images, and lists; HTML is not a programming language and uses opening, closing, and self-closing tags.

Describe how the head section uses the title tag to set the page title and meta tags to control viewport, description, and keywords for search engines.

Place content inside the body tags and use headings, paragraphs, and lists to structure a page. Recognize block level versus inline elements, including bold strong and italic em text.

Explore semantic and structural elements that organize a web page, using header, photo, section, article, navigation, and a sidebar to support structure and improve SEO.

Build a simple header with a left logo and right navigation, using a nav list linking home and about to the root page; add a horizontal rule to separate sections.

Structure the product list with a section and articles, using h1, h2, and p; add navigation links and an image. Organize assets in an assets folder and set correct paths.

Add a photo inside a section with a horizontal rule, insert your name and a copyright symbol, and display the current year twenty twenty one to create a simple footer.

Discover how CSS, or cascading style sheets, lets you select page elements and apply styling properties like background, color, text color, height, and font size to improve the page’s appearance.

Apply base styles by adding a style tag in the head, style the body, and cascade to children; use color, fonts with Google Fonts (Roboto), and refine with dev tools.

Add a header class and style it with a dark background using background-color and hex #333. Target only this header element, not all headers, by using a class selector.

Apply the display:flex property to the header to place the logo on the left and the navigation on the right, using justify-content: space-between to spread items across the row.

Change the header links from the browser's purple default to a light gray using the header a selector. Remove underlines and set the font size to 14 pixels for readability.

Learn to apply hover effects to header links by changing color on hover and animating the transition to white, using CSS pseudo selectors and transition properties.

Improve the navigation list by using display: flex to place items side by side in a row, and remove bullets with list-style: none for a clean header.

Adjust margins and padding to control spacing around and inside elements; learn how borders affect visual space, and how to apply uniform or directional values to headers and navigation links.

Constrain header content to the center with a reusable constraint class and a 960-pixel max width. Use flex layout and auto margins to center the header's elements.

Replace the header title with a free orange logo found on icon finder, then add a 64-pixel image in assets and center it with flex.

Constrain the content with a reusable class to a max width of 960 pixels, then use display flex to lay out text left and image right with vertical centering.

Add a 1px solid bottom border and padding, then use flex to render a 50/50 text and image layout with no growth or shrink.

Target product text elements to style headings and paragraphs with font sizes of 48px and 21px, adjust margins and line height, and build a horizontal navigation using display:flex and list-style:none.

Design reusable button styles with orange and white variants, add hover effects and transitions, and apply consistent padding, border radius, and color schemes across pages.

Add more products to the page by duplicating articles, updating images in assets, and editing text and alt attributes, then use flex direction row-reverse and pseudo selectors to refine layout.

Constrain the photo content with a wrapper div, apply a full-width top border, and add padding to create a clean, consistent finish.

Move inline styles into a separate file to keep the project organized and avoid duplicating across pages. Link the stylesheet in the head from assets/success style access to apply globally.

See how JavaScript, a scripting language, makes web pages interactive. It shows and hides elements, loads content, and responds to user input like clicks, scrolls, and drags, such as carousels.

Learn how to add a script tag to an HTML page, choosing head or body placement, and place the tag at the bottom of the body to avoid blocking loading.

Learn to execute code after the page loads by adding a dom content loaded listener to the document, then log 'dom is ready' in the console.

Create a cookies banner in HTML by adding a section with class cookies, a heading and paragraph, and a hash-linked close button using button and button-orange classes to trigger JavaScript.

Constrain the cookie banner content, style it with a gray background and light text, and use flex to place the text left and the button right at the bottom.

Learn how to hide a cookies banner by default using CSS transform translateY, then reveal it with a JavaScript-added class after a delay.

Create a cookies banner reveal by adding a show class with JavaScript after a delay, then animate it with a CSS transform transition to slide onto and off the page.

Learn to grab a cookies banner with document.querySelector, store it in a variable, and perform an existence check with if/else before logging.

Reveal the cookies banner after a delay using setTimeout with an arrow function, adding the show class to the cookies banner element via classList with a configurable timeout in milliseconds.

Break up the site logic into single-purpose functions and name and call them. Use comments to organize code, initialize elements, and fire a named function after a time out.

Learn to hide a cookies banner by removing the show class when the close button is clicked, using precise DOM selection with querySelector to target the nested button.

Learn to attach a click event listener to the close button, prevent default behavior, log the action, and hide the cookies banner by removing the show class.

Move your JavaScript to a separate file to avoid updating multiple pages; create an assets/js/global.js, cut code from index.html, and include it with a src attribute, then test.

Make your web page responsive for mobile by adjusting text size, stacking text over the image, stretching the image to full width, and reducing product spacing.

Learn how to use media queries to apply styles based on browser width, including min-width and max-width rules, and see how to change the body background for responsive mobile layouts.

Introduce a media query for devices up to 768 px, switch product items from flex to block, stack text, adjust font sizes, and apply inline-block buttons for mobile-friendly layouts.

add an about page by duplicating the homepage, linking it in the header, and applying a content article with a back-to-home button using the existing styles.

Add an HTML5 doctype to the top of each page and fix header spacing by setting the header image to display: block.