Solo Frontend Website Practice

Welcome to your first reference-based frontend project 🎉

You’ll be building a website inspired by the Frontend Practice Starbucks Project. This is a chance to practice your HTML and CSS skills, and apply everything you’ve learned so far on Scrimba! Use this exercise to refresh your learnt skills, find gaps in your understanding and perfect your skills.

👉 Don’t hesitate to ask questions in your MC class channel — no question is too small!

---

Instructions

1. Start with the files

   • Open the project folder.
   • You’ll be working mainly in page.html and style.css.
   • All the images and resources you need are in the assets folder.

2. Build the structure

   • Create the basic layout of the website in page.html.
   • Use semantic HTML (header, section, footer, etc.) to organize your page.

3. Style the website

   • In style.css, add styles to make your website look like the reference design.
   • Focus on layout first (boxes, sections, grids, flexbox), then add colors, fonts, and spacing.

4. Divide the page into sections
   The website can be broken into these parts (see the image in image-instructions/website-divided-by-sections.png):

   • Header (navigation + logo)
   • Section 1 (hero area)
   • Section 2 (featured product/offer)
   • Section 3 (another product/info section)
   • Footer (links, contact, etc.)

   Tackle them one at a time.

5. Test your work

   • Open page.html in your browser to see your progress.
   • Keep checking after every small change — this helps you debug and learn faster.

---

Tips

• Check out the full guide and helping links within the project on frontend practice (there is links to icons, colors are named etc) You can find it here: https://www.frontendpractice.com/projects/starbucks
• Don’t try to make it perfect immediately. Focus on getting the sections in place first. You can polish details later.
• Google is your friend. If you’re stuck on a CSS property, look it up!
• Ask questions in the class channel. Chances are, others are facing the same issue and you are doing everyone a favour. Also, you will already get to meet your peers even before you`ve started the bootcamp!

---

Goal

By the end of this exercise, you’ll have recreated the Starbucks page layout in your own code. 🎯

This is your first big step into building real websites on your own — have fun with it and don’t worry if it doesn’t look 100% identical. The goal is practice and confidence.

--

Too hard?

Maybe start with this project instead : https://www.frontendpractice.com/projects/oh-studio. Instructions are the same but there are fewer sections and the design is less overwhelming.

Too easy?

Alright! If you are up for a challenge or just want to get more practice check out this one instead : https://www.frontendpractice.com/projects/nintendo