Build a Travel Site with Tailwind CSS - 7. Testimonial Section

In this lesson, we are going to be building the testimonial section of our travel site.

The final result will look like:
You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 6-callouts-section and that is also where we will begin this lesson from.

#tailwind css #css

What is GEEK

Buddha Community

Build a Travel Site with Tailwind CSS - 7. Testimonial Section

Build a Travel Site with Tailwind CSS - 7. Testimonial Section

In this lesson, we are going to be building the testimonial section of our travel site.

The final result will look like:
You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 6-callouts-section and that is also where we will begin this lesson from.

#tailwind css #css

Jerad  Bailey

Jerad Bailey

1591105130

Build a travel site with Tailwind CSS Footer Section & PurgeCSS

In this lesson, we are going to be building the footer section of our travel site, and integrating PurgeCSS to reduce our bundle size

The final result will look like:

You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 7-testimonial-section and that is also where we will begin this lesson from.

#tailwind css #css

Building a Photo Gallery With CSS Grid and Tailwind CSS

Building a photo gallery has been a tough nut to crack for so many years. Throughout my career, I’ve used <table> layouts, <div>s with brittle margins and set widths, and tried my hand at flexbox. While all of these methods have worked, none of them felt like that silver bullet solution.

Then one day, the CSS gods bestowed upon us the magical power of CSS grids. Now, making a grid-based layout is an absolute delight. And, when we use grids with Tailwind CSS, we can create beautiful, functional UIs in a fraction of the time it used to take. So, let’s hop right in and see how we can use them to make a photo gallery.

  • The Set-Up
  • Our HTML
  • Layouts With CSS Grid
  • Mobile Layout
  • Styling With Tailwind CSS
  • The Wrap-Up

#tailwind css #css grid #css

Jerad  Bailey

Jerad Bailey

1591101398

Build a travel site with Tailwind CSS Navigation & Hero

In this lesson, we are going to be building the main navigation and hero section.

The final result will look like:

You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 1-installing-tailwind-css and that is also where we will begin this lesson from.

#tailwind css #css

Eric  Bukenya

Eric Bukenya

1624705980

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