Build a Starbucks Landing Page Clone // TRAIN BRAIN

Build a Starbucks Landing Page Clone

In this video, we will build the homepage of Starbucks.com from scratch with HTML, CSS and a bit of JavaScript
Code:
https://github.com/bradtraversy/starbucks-homepage
? Website & Courses:
https://traversymedia.com
https://freelancemastery.dev
? Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia
? Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
1:27 - Navbar HTML
7:05 - Base & Navbar CSS
18:41 - Button Styles
23:33 - Box A & Utility Classes
35:10 - Other Boxes & Grids
50:13 - Footer & Social Icons
55:13 - Responsive Grid Styles
58:05 - Hamburger Icon & Transition
1:03:00 - Nav Toggle JavaScript
1:07:50 - Mobile Menu

Traversy Media

Traversy Media features the best online web development and programming tutorials for all of the latest web technologies including Node.js, Angular 2, React.js, PHP, Rails, HTML, CSS and much more...

TTS & Translate App | Serverless Functions, Google Translate & Web Speech API

React Admin Crash Course 2025

Has Coding Become Boring?

New 22+ Hour Course - Build an Ecommerce Platform with Next.js, TypeScript, PostgreSQL & Prisma

Feeling Stagnant As A Developer

Build A Tesla Car Configurator | Tailwind & Vanilla JavaScript

Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind

Course Announcement - Laravel From Scratch

Encore Crash Course - TypeScript Backend Framework & Toolset

Ultimate Guide To Web Scraping - Node.js & Python (Puppeteer & Beautiful Soup)

15 Myths & Misconceptions In Web Developement

5 Reasons Why Your Side Projects Are Failing

Vue.js Crash Course 2024

App Dev To Deployment - Full Stack Expense Tracker (Next.js, TypeScript, Prisma, Neon, Clerk Auth)

Course Announcement: Modern HTML & CSS 2.0

Admin Dashboard From Scratch - Next.js, TypeScript, Shadcn/ui

The Importance of Specialization in Coding

Express Crash Course (2024 Revamp)

Node.js Crash Course 2024

20 Browser Extensions For Web Design & Development

Microservices Crash Course & Moleculer JS Intro

React Crash Course 2024

20 Essential VS Code Extensions In 2024

Tailwind & JavaScript Project - Products Filtering UI

Next.js 14 Course Release With Promo

Stop Worrying About AI!

Web Development In 2024 - A Practical Guide

Should You Test As A Web Developer?

Announcement: New PHP Course Release!

Are You Too Dumb To Code? A Chat About Imposter Syndrome

15 Web Developer-Related Career Paths

Bun Crash Course | JavaScript Runtime, Bundler & Transpiler

New Course Alert - JS Challenges: Data Structures & Algorithms

Simple Next.js & React Authentication With Clerk

Write A ChatGPT Chatbot With Node.js

Build A RealTime Chat App With React & Appwrite Cloud

New Bootstrap 5 Course & Why Bootstrap?

Hosting & Form Submission Setup | Vercel & Formspree

How Much Should Beginners Rely On AI Tools?

ChatGPT Crash Course | 10 Practical Use Cases For Developers

Build a Keyword Extractor: React + OpenAI API + Chakra UI

Web Development In 2023 - A Practical Guide

I'm Back! 37-Hour JavaScript Course & New Platform

Channel Update, Short Break & Freelance Course On Udemy

Build a Shopping Cart With React JS & Stripe

Clean Code vs Preference

Create a Desktop App With JavaScript & Electron

5 Pro-Level React Do's & Don'ts

Command Line Crash Course For Beginners | Terminal Commands

3 Alternatives for Heroku's Free Tier - Full Stack & API Hosting

Astro Crash Course

Do You Need To Learn Data Structures & Algorithms As A Developer?

Create A Simple JavaScript App to Generate QR Codes

Build A Digital Resume & Host For Free

SpaceX Website Clone - HTML, CSS & JavaScript

Carbon Lang First Look & Crash Course | Google's C++ Successor

5 HTML, CSS & JS Mini Projects - Scroll Animation, Rotating Navigation, Drag Events, etc

Improve The Developer Hiring Process

JavaScript Under The Hood [5] - JavaScript Engine Overview

JavaScript Under The Hood [4] - Memory Storage

JavaScript Under The Hood [3} - Asynchronous JavaScript, Task Queue & Event Loop

JavaScript Under The Hood [2] - Execution Context

JavaScript Under The Hood [1] - Thread & Call Stack

Linux Server Setup & MERN Deployment

GraphQL Crash Course With Full Stack MERN Project

Python In The Browser! PyScript First Look

Alpine.js Crash Course

Web RTC Full Course & More

Laravel From Scratch 2022 | 4+ Hour Course

Dealing With Some Common Frustrations As A Developer

Tailwind Crash Course | Project From Scratch

PHP For Beginners | 3+ Hour Crash Course

Webpack 5 Crash Course | Frontend Development Setup

Build Strength From Struggle | My Story

CSS Grid Crash Course 2022

The Programming Language Guide

Learn The MERN Stack - Redux Goals & Deply

Learn The MERN Stack - Frontend Authentication | Redux Toolkit

Learn The MERN Stack - JWT Authentication

Learn The MERN Stack - Express & MongoDB Rest API