Tailwind CSS Crash Course - How I Built My New Product Landing Page

I used Tailwind CSS to build my latest product landing page and decided to do a Tailwind Crash Course! It’s the hottest option available for styling your applications. It is based on a series of utility classes that you can use and almost never have to write a custom line of CSS yourself.

Product Page - https://youtubefordevelopers.com/
Beginner Tailwind (the best course for learning Tailwind 🔥!!) - http://bit.ly/beginnertailwindjqq

[00:00] - Intro
[01:15] - What We’ll Build
[02:00] - The Hero with CSS Grid
[12:10] - Tailwind Apply
[12:50] - Responsive Design
[14:22] - Section 2
[16:19] - Full Width Section
[17:45] - Section 3 with Flexbox
[24:00] - Section 4 with Custom Blockquote
[27:50] - Section 5 Custom Callout

#tailwindcss #css #web-development #programming #developer

What is GEEK

Buddha Community

Tailwind CSS Crash Course - How I Built My New Product Landing Page

#tailwind css #css

Tailwind CSS Crash Course - How I Built My New Product Landing Page

I used Tailwind CSS to build my latest product landing page and decided to do a Tailwind Crash Course! It’s the hottest option available for styling your applications. It is based on a series of utility classes that you can use and almost never have to write a custom line of CSS yourself.

Product Page - https://youtubefordevelopers.com/
Beginner Tailwind (the best course for learning Tailwind 🔥!!) - http://bit.ly/beginnertailwindjqq

[00:00] - Intro
[01:15] - What We’ll Build
[02:00] - The Hero with CSS Grid
[12:10] - Tailwind Apply
[12:50] - Responsive Design
[14:22] - Section 2
[16:19] - Full Width Section
[17:45] - Section 3 with Flexbox
[24:00] - Section 4 with Custom Blockquote
[27:50] - Section 5 Custom Callout

#tailwindcss #css #web-development #programming #developer

Design A Landing Page using Tailwind CSS

When I started learning how to use the Tailwind CSS library, I really didn’t know what to expect and wasn’t quite sure how I’d fare with the library. It turns out, TailWind’s a whole lot easier to use than I thought and makes designing a landing page a breeze.

One remarkable feature I noticed was the ease with which I could define classes for various responsive breakpoints without writing a single line of CSS media queries. That for me was awesome!

For this tutorial, I’ll assume you have a Tailwind project set up, if you don’t you can grab one here. For the fonts, I’m using Poppins. All the code presented here should be placed in your body tag.

We’ll start off with creating and styling the main element that would house the hero section:

<main class="h-full flex items-center px-6 lg:px-32 bg-purple-900 text-white">

</main>

The Tailwind classes added to the main element does the following:

1. h-full: Give the main element a height of 100%. Pretty much like what you’d do with a style declaration of height: 100vh in CSS.
2. flex: Make the main element a flexbox, just like you would with a style declaration like display: flex in CSS.
3. items-center: Position the contents of the main element in the center of the main element, just like you would with align-items: center in CSS.
4. px-6 lg:px-32: Assign horizontal padding of 1.5rem to all devices from mobile to medium and horizontal padding of 8rem for devices from large to devices beyond. You can add as many other breakpoints to suit your design needs, this is the wonderful thing about Tailwind.
5. bg-purple-900: Gives the main element a purple background with an opacity of 90%. This is equivalent to background-color: purple in CSS.
6. text-white: Gives the main section and its child elements a default white color (#FFFFFF).

#tailwind #design #tailwind-css #web #css

How To Create A Stylish Email Capture Page In Tailwind CSS

Ah the classic email capture page. Just like chocolate, it’s a flavor that we all need it at some point. So it’s good to have some options ready to go when that does happen.

For this tutorial we will be building out a simple email capture page with Next.js and TailwindCSS.

If you just want to skip to the final code you can find that here.

Setup

We will start by cloning the official Next.js + TailwindCSS example repo. This will make getting setup much easier. You can find this repo here.

You can follow the instructions in the ReadMe or just run the following command locally (I am using Yarn but you can switch to npm if you prefer):

yarn create next-app --example with-tailwindcss with-tailwindcss-app

This will pull down the example to your local drive in a folder called with-tailwindcss-app. You can rename it however you like and link it to your own Github repo (comes in handy when you want to deploy).

Start Your Engines

Run the following command to start up our app:

yarn

Cleanup

Best to start with an empty slate. Let’s go in and clear out all of the divs in the return statement of index.js (our main page). You can leave the Head part in if you want (this only impacts SEO/ what the title will be in the tab).

Add Background Image

We want a full screen background image. For this we will make our main tag relative and then absolutely position our image to cover the whole space. For the image I will use the awesome Unsplash Random API (also makes it more fun with images changing on every refresh). You can change this to whichever image url you want.

<main className='relative h-screen w-screen'>
 <img
  src='https://source.unsplash.com/random'
  alt='main background image'
  className='absolute inset-0 w-full h-full object-cover'
 />
</main>

Alright so now we have an image covering our page.

Add Hero Content

Let’s add in our content now. Keeping it simple we want a headline, a supporting paragraph and a call to action. Our call to action will be a email subscription form.

Let’s create a new component called HeroContent for this.

<div className='absolute inset-0 flex justify-center items-center'
 <div className='w-full max-w-md'
  <h1 className='text-center text-3xl sm:text-4xl font-extrabold      
    sm:leading-[3rem]'>
    Your headline here.{' '}
    <span className='text-yellow-400'>Catch their attention!</span
  </h1>
  <p className='mt-6 text-lg sm:text-xl'>
   Ea esse minim reprehenderit voluptate. Ea nisi culpa magna...
  </p>
 </div>
</div>

We used position absolute to span the whole div. Then we used flex to center the div containing our content. We restricted it’s width with a max-w-md class.

For formatting we added some classes to make our text bigger and added a little color to make the headline more catchy. :D

#nextjs #web-design #tailwind-css #landing-pages #css

How To Make a Fully Responsive Landing Page Using HTML, CSS (SCSS), and JavaScript

In this tutorial, we are going to build a fully responsive Gym Landing page using HTML, CSS (SCSS) and JavaScript. We’ll use all sort of CSS tricks and also do a little bit of usability and accessibility.

I hope that you enjoy the tutorial. It would be awesome if you like the video, comment below and consider subscribing.

Source Files: https://bit.ly/3zWOhZ4

Tips:
Tips are never expected but deeply appreciated if you are able and will go towards my channel and likely food. Please only tip if you are able, I’m just happy you’re here!
Buy Me A Beer: https://www.paypal.com/donate/?hosted_button_id=YUH7JRDUN5QEY

Chapters:
0:00 Introduction:
0:39 Project Setup
6:02 HTML5 & Reset Styles
18:10 Skip To Content Button
25:17 Header & Navbar
01:12:23 Hero
01:40:16 Categories
01:57:18 Training Options
02:09:29 Get Started Today
02:20:54 We Will Help You
02:23:01 Footer
02:23:27 Ending

CONNECT with RaddyTheBrand
Website: https://www.raddy.co.uk
GitHub: https://www.github.com/RaddyTheBrand
Instagram: https://www.instagram.com/RaddyTheBrand
Twitter: https://www.twitter.com/RaddyTheBrand
Newsletter: https://www.raddy.co.uk/newsletter

#javascript #css #html #landing page #scss #fully responsive landing page