💻 #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
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.
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!
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,
💻 #7 Clone the Starbuck's landing page ☕️
So cool! Thanks for sharing