The Starbucks Clone

Before going further please have a look at https://starbucksclone07.netlify.app/

Like I had mentioned in the previous blog that I will be going through some javascript concepts from MDN docs and some YouTube videos. While doing that I got a notification from Clever Programmer's YouTube Channel, that they are conducting a 5-day workshop for full-stack web development, I went through the content that they will be going through in these 5 days and I got what I wanted. I had revised HTML & CSS but I wasn't very confident whether I have a grasp on it or not, so when I saw the content, on the second day of the workshop they were trying to make a Starbucks Landing page clone. I thought to myself that this is a good opportunity to try things out, so I decided to make the Landing page on my own and whenever I am stuck I will be referring to the video.

And guys, believe it or not, the above procedure helped me a lot, it showed me the gaps between how we think and how some experienced developers think. Right from how you divide a page into several small components to how to decide what parts will be sharing the same class names.

After trying out things for a lot of time and referring to the video I have come up with this starbucksclone07.netlify.app. It is still short of some things, but I will be working on those in the coming days.

My Learnings:

• Thinking ahead reduces work.

Always take out your notebook and make a skeleton of your page, make the divs, containers, etc, try naming them the same as you will be naming the classes. Make your class names appropriate and to the point. After you are done with this, inspect the main page and compare whether you were right or wrong about the layout of the page.

• Flex Box is CRAZY!!

Try to learn flexbox and make yourself thorough with its power. If you know flexbox nothing is difficult for you. The resources to learn them are :

• Learnt how to use developer tools

There are so many things that you can learn with Inspect elements, you can pause on a specific effect on a page to learn what is exactly happening, for eg.

Here we can see what exactly happens when I hover upon a specific element.

• Be clear about properties like padding, margin, border, align, justify.

The above-mentioned properties can make or break your page as well as your mind. So be thorough of them by reading/watching and practicing them. I created the buttons on the page by using solid borders and nothing else. The hover effects and the minute transitions on the button were applied on the border and the text.

• Learned how to deploy projects using Netlify.

People have made deploying projects to the internet so simple. I just deployed the Starbucks Landing Page by just logging in to Netlify using Github. HOW MIND-BLOWING IS THAT???

Future changes to the page:

• Need to add more content between the main content and footer.

• I will be using media queries to make the page more responsive.

• I will be trying out some new colors and images on the page.

• I will be adding some code snippets to the upcoming blogs so that you understand more about what I learn from the projects I made.

What I will be working on in the coming week?

I will be focusing on Javascript and start with React fundamentals.

References:

Don't forget to subscribe Clever Programmer on YouTube. They have some amazing content if you want to become a professional full-stack developer.

And after referring them, whatever websites you make, just use Netlify to deploy them.