Tailwind Css And Alpine Js - Essentials Training

In this course we are going to get up and running with Tailwind CSS and Alpine JS.

What you'll learn

Learn and understand the basics of Tailwind CSS

Learn and understand the basics of Alpine JS

Create a new project with Tailwind CSS and Alpine JS

Make website components with Tailwind CSS and Alpine JS

Requirements

Basic understanding of html and css.

Description

This course is for people who have a basic understanding of html and css, that want to get started with either Tailwind CSS or Alpine JS.This course also includes some javascript basics, but don’t worry if don’t have much or any javascript experience, we take the time to learn these basics where needed as we complete the course.We start off by quickly building a homepage of a website to give you an overview of what is like working with Tailwind CSS and Alpine JS. Then we pump the brakes and take our time to explain each part of the homepage. This course isn’t so much about building a complete website from start to finish, it’s about giving you the tools to get started with, and complete your own project. We will build a homepage and also talk about some practical examples.Things you are going to need are a text editor and web browser. In this course I use Sublime Text and Google Chrome, it’s 100% ok for you to use whatever you are comfortable with.We are combining Tailwind CSS and Alpine JS into one course is so we’ll have a working web page or two at the end, rather than a static pages.

Overview

Section 1: Getting started

Lecture 1 Introduction to Tailwind CSS and Alpine JS Course

Lecture 2 What is Tailwind CSS

Lecture 3 What is Alpine JS

Section 2: Mini Project

Lecture 4 Adding Tailwind CSS and Alpine JS to a project

Lecture 5 Project part 1 - Building the homepage with Tailwind CSS

Lecture 6 Project part 2 - Building the homepage with Tailwind CSS

Lecture 7 Project part 3 - Navigation with Tailwind CSS and Alpine JS

Section 3: Tailwind CSS

Lecture 8 A deeper dive into Tailwind CSS part 1

Lecture 9 A deeper dive into Tailwind CSS part 2

Lecture 10 Adding Tailwind CSS custom fonts

Lecture 11 Adding Tailwind CSS custom colours

Section 4: Alpine JS

Lecture 12 A deeper dive into Alpine JS

Lecture 13 Alpine JS example - classes and text

Lecture 14 Alpine JS tip - multiple components

Lecture 15 Alpine JS tip - using javascript

Lecture 16 Alpine JS example - tabs

Section 5: Finishing Project

Lecture 17 How the navigation menu is built with Alpine JS

Lecture 18 Project details page

Lecture 19 Contact us page

Lecture 20 Making our site responsive with Tailwind CSS

Lecture 21 Outro

This course is for people who have a basic understanding of html and css, that want to get started with either Tailwind or Alpine.