Full Course Tailwind CSS: Build a Modern Landing Page

In this video we build out a modern landing page using the utility first css framework, Tailwind CSS.

Repo: https://github.com/johnkomarnicki/modern-landing-page-with-tailwinds

Timestamps:
0:00 Introduction
2:57 Brief Introduction to TailwindCSS
5:51 Setup Tailwind with NPM
10:47 Setup Tailwind Configuration (Container, Custom Colors & Font )
23:20 Header/Naivgation
38:16 Hero
46:00 Tailwind Base Styles (Button Classes)
49:15 Hero (…Continued)
1:01:24 Features Section
1:16:05 Download Section
1:29:42 FAQ Section
1:35:53 Contact Us
1:43:35 Footer
1:49:25 Whats Next?

#tailwind #tailwindcss #tailwinds
Current Subscribers: 1,273

#tailwind #tailwindcss #css

What is GEEK

Buddha Community

Full Course Tailwind CSS: Build a Modern Landing Page

In this video we build out a modern landing page using the utility first css framework, Tailwind CSS.

Repo: https://github.com/johnkomarnicki/modern-landing-page-with-tailwinds

Timestamps:
0:00 Introduction
2:57 Brief Introduction to TailwindCSS
5:51 Setup Tailwind with NPM
10:47 Setup Tailwind Configuration (Container, Custom Colors & Font )
23:20 Header/Naivgation
38:16 Hero
46:00 Tailwind Base Styles (Button Classes)
49:15 Hero (…Continued)
1:01:24 Features Section
1:16:05 Download Section
1:29:42 FAQ Section
1:35:53 Contact Us
1:43:35 Footer
1:49:25 Whats Next?

#tailwind #tailwindcss #tailwinds
Current Subscribers: 1,273

#tailwind #tailwindcss #css

Full Course to Mastery Tailwind CSS: Build a Landing Page

In this live streaming, I will recreate a landing page template using Tailwind CSS.

Template: https://onepagelove.com/proton-lite
Code on Github: https://github.com/ThirusOfficial/tailwind_landing_page

(Note: I have removed the first 4 mins of introduction because the voice was not audible)

#tailwind #tailwindCSS

#tailwind #tailwindcss #css

Tailwind CSS Just-in-Time Crash Course to Build a Modern Landing Page

In this video we explore Tailwind CSS Just-in-Time Mode, A faster, more powerful, on-demand engine for Tailwind CSS. Just-in Time generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.

https://github.com/johnkomarnicki/tailwinds-jit

Timestamps: 
0:00 Introduction
2:43 Install & setup Tailwind
12:08 Enable Just-in Time Mode
14:00 Setup Tailwind builder watcher script
16:35 Chapter 1: Tailwind Configuration
21:16 Chapter 2: Hero (arbitrary styles & pseudo-element variants)
30:26 Chapter 2: Adding base styles (@apply directive)
33:48 Chapter 3: Features
42:10 Chapter 4 Simple access section
44:42 Chapter 5: Card's section
50:31 Chapter 6: Client's display 
52:58 Chapter 7: CTA
54:51 Chapter 8: Footer
59:45 Wrap up
 

#tailwindcss  #tailwind  #css 

How To Build an About Me Page With Laravel Sail and Tailwind CSS

Introduction

Laravel Sail is a Docker development environment included by default in Laravel since version 8. It allows you to quickly get a PHP development environment up and running, tailored for running Laravel applications with built-in support for NPM / Node.

In this guide, you’ll bootstrap a new Laravel application with Laravel Sail and create a styled “about me” landing page using Tailwind CSS, a utility-first CSS framework designed for rapidly building custom user interfaces. At the end, you’ll have a base that you can use to further develop a Laravel application using Tailwind CSS for the front end and Sail for the development environment.

Prerequisites

Although the code shared in this guide should work seamlessly across multiple environments and systems, the instructions explained here were tested within an Ubuntu 20.04 local system running Docker and Docker Compose. Regardless of your base operating system, here’s what you’ll need to set up in order to get started:

• Docker installed on your local machine. If you’re running Ubuntu 20.04, you can follow Steps 1 and 2 of How To Install and Use Docker on Ubuntu 20.04 to set it up. Windows and MacOS users need to install Docker Desktop instead.

• Docker Compose installed on your local machine. Docker Compose comes included by default with Docker Desktop for both Windows and MacOS systems, but Linux users need to install the Compose executable, following Step 1 of How To Install and Use Docker Compose on Ubuntu 20.04.

• A code editor for PHP (optional). A code editor helps making code easier to read and to format, and can improve your productivity by pointing out issues before you execute your code. You can follow our guide on How To Set Up Visual Studio Code for PHP Projects to set up VSCode, a free code editor, within your local development environment.

• Step 1 — Creating a New Laravel Application Using the Laravel Builder Script

• Step 2 — Using Laravel Sail

• Step 3 — Setting Up Tailwind CSS with Laravel

• Step 4 — Creating a Landing Page

• Step 5 — Styling Your Landing Page with Tailwind CSS

#tailwind css #laravel #css #tailwind

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