First Project Using Tailwind CSS (Starbucks-clone)

First Project Using Tailwind CSS (Starbucks-clone)

·

3 min read

What I was using before ?

Previously, I was using a core CSS. I wanted to pick a framework that was as close to the final design as possible. there are multiple option but i decided to go with tailwind css as I already clear all CSS concept it easy for me to play with tailwind CSS.

Why did I choose Tailwind CSS ?

Tailwind CSS has a number of good reasons to use it as a CSS framework. Let's see some of them:

  • It makes the styling process much faster since we don't have to leave our markup; we can write CSS and HTML for the website simultaneously.

  • Tailwind CSS has a lot of pre-built classes for sizing and colours that will altogether remove the need to implement a design system from scratch.

  • We can quickly implement media queries using Tailwind CSS to make our websites responsive.

Why i choose this project

Main motive to choose Starbucks site is it simpler for new learner as you can see in image there is one navbar , 4 hero section and footer which include socials. and more important its note more complex.

My Learnings and Experiences

Already i know most of concept of Core CSS so it is easy for me to use tailwind CSS but although i got stuck anywhere i take help of tailwind documentation. main motive to use tailwind doc is it not only solve my problem but also give me more knowledge about particular class.

i learn different utility class in this project like Height ,width ,padding ,flex ,hidden ,different screen size use ,hover ,colors ,margin ,min-height ,ma-height etc.

also i got more confidante about work flow of Tailwind CSS how it work , how to use classes which help me to make my next project more responsive ,more interactive.

Some explanation about project

Navbar and Hero Section

desktop.jpg

phoness.jpg

as you can see above two images of my project which show navbar and first hero section in desktop size and phone size respectively

very first you have to add tailwind CSS script to head tag and than you able to use utility class of tailwind CSS

<!-- tailwindcss -->
  <script src="https://cdn.tailwindcss.com"></script>

now below navbar code tell that use flex and flex direction column for all screen size but use flex direction row for medium width and above

<section class="navbar flex flex-col md:flex-row ">

Screenshot (19).png

Screenshot (17).png

as you can see above two images of my project which show Footer ,Socials and Terms and condition in phone size and desktop size respectively.

below codes line number two say that particular list is hidden for all screen but for medium screen and above it visible in block form

          <p class="text-lg md:text-xl font-semibold text-titleText">About us</p>
          <li class="py-3 hidden md:block">Our Company</li>

Also if you have query or any question about this project you can comment or reach out my socials .

Starbuck clone by Shailraj

Did you find this article valuable?

Support Shairlaj Blog by becoming a sponsor. Any amount is appreciated!