💻 #7 Clone the Starbuck's landing page ☕️

Hone your HTML & CSS skills by cloning the Starbuck's landing page

Hey there, developer! 👋

I hope you had a great week!

In this weekend’s project, we’ll sharpen our HTML & CSS skills by cloning the Starbucks landing page ☕️

Being able to clone an existing page is a great skill to show off when you’re looking for a front-end job. This is because oftentimes in a role as a front-end developer you’ll be expected to build a feature exactly to the designs from the design team. Let’s practice together by cloning the Starbucks website (www.starbucks.com)!

Tutorial of the week:

Length: 1.5 hours
Difficulty: Easy

This weekend’s tutorial is by one of my favourite tutorial maker’s Traversy Media. He consistently puts out fantastic content, teaching your web development in a clear and concise way.

What you’ll learn:

• Advanced HTML

• CSS Grid

• Media Queries

---

3 creative projects of the week:

1. emojimix

Ever wonder what you get when you merge your two favourite emojis? What are your two most used emojis right now mixed together? Here’s mine below 😍+🤮

Made by tikolu.net

Check it out!

Tweet at me and share your favourite mix!

---

2. rocketcrew.space

React, Next.js

Using React and Next.js as the backend, this developer made a very aesthetic job board for all space-related jobs. These jobs are pulled in from an API. This is the perfect example of developers using APIs to show data in an engaging and beautiful way. I challenge you to find an API and make a nice interface displaying the data.

Check out

---

3. Javascript Password Generator

HTML, CSS, JavaScript

What I like about codepen is that you can easily read the code and see what’s being shown in the frontend.

Take a second to read through some of the Javascript code in this codepen. One task of a frontend developer will be making changes to other developers’ existing code. Play around with this codepen and make some changes!

Check it out!

---

That’s all folks!

I hope you enjoyed this weekend’s edition of Weekend Web Dev!

I also hope these three projects give you inspiration for your future projects, portfolio, or just something cool to play around with for a bit.

Share your tutorial progress with me on Twitter! I’d love to see what you’re building.

Your fellow weekend developer,

Devan