Clone of Tubidy landing Page

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Tubidy clone Landingpage

My process

Built with

• Semantic HTML5 markup
• Tailwind CSS
• JavaScript

What I learned

Working with tailwind css has made styling alot more easier and faster.Even though im still on the learning process on how to use tailwind better,i learnt alot; from styling of my text to its responsivisity... Just like adventure,knowing many more are to come...

some cool tailwind styles i liked,used on my nave bar and moblie view nav when viewed on mobile devices

<nav class="hidden lg:flex px-4 lg:px-20 py-3 bg-sky-300 text-white sticky top-0 z-50 border-b">
       <div class="flex flex-wrap item-center justify-between w-full gap-4">


<div class="lg:hidden flex justify-between items-center px-4 py-3 bg-sky-300 sticky top-0 z-50">
   <img src="https://tubidy.center/theme1/assets/logo-CsCrEMo0.png" alt="Tubidy" class="h-8">
   <button id="mobileMenuButton" class="text-2xl focus:outline-none">
     <i class="fas fa-bars"></i>
   </button>
 </div>

Continued development

Focusing on improving my skill in using Tailwind for styling...until I become best at it...

Useful resources

• Sourse1 - This helped me for my foundations in how to use html and css effectively. I really liked their pattern of teaching and will use it going forward.

• Source2 - This helped me to get the necessary syntaxs on how and where to use my styles.

• Sourse3 - This helped me ing getting the icons i needed for the webpage (i.e twitter,facebook, etc.)

Author

• Website - Okorie PraiseGod . E.
• LinkedIn - Peolite1
• Twitter - @prai79461