# My First Tailwind Website

### What I built

A multi-page website with a home page and a gallery page. Built using HTML and Tailwind CSS.

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/afc92f44-61f3-4754-bc85-7b21cdcf1ea3.png align="center")

* * *

## Classes Used

### Header

For my gallery, I took photos of flowers and plants, so I decided on a tropical colour theme. This gave me a good starting point when building the design. For the header and footer, I added an amber coloured background to match the custom background I chose for the main body of the home page.

I added padding for spacing and chose a `font` style. I aligned my elements using `flex` properties.

```html
<header class="bg-amber-500 p-4 font-bold flex justify-between">
```

For the navigation links, I created borders with a cyan colour and added the `rounded` class to soften their appearance.

```html
<a href="index.html" class="border-2 border-cyan-700 rounded">
```

I then chose a size and colour for the text by using the `text` class. I added a less opaque cyan to the background for a cohesive aesthetic.

```html
<a href="index.html" class="border-2 border-cyan-700 rounded text-sm text-cyan-700 bg-cyan-100">
```

To polish the appearance and add clarity, I inserted padding `p` and margins `m` and centred my text.

```html
<a href="index.html" class="border-2 border-cyan-700 rounded text-sm text-cyan-700 bg-cyan-100 text-center p-1 m-1">
```

For responsiveness, I added the following classes to my heading.

```html
w-40 sm:w-auto text-4xl sm:text-xl
```

This makes the default text size four times extra large; when the screen size increases past the small-screen breakpoint, the text scales down to extra large. (Bigger screen, smaller text). To wrap the text underneath, I altered the width.

For the links, I added the following:

```html
block sm:inline
```

This shifts the direction of the navigation links when changing the screen size.

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/56907cf3-ec89-452f-b100-27c8eef2078f.png align="center")

`text-xl` **and** `inline`

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/b34bec3f-c5c0-4126-a353-f2c07b949dcb.png align="center")

`text-4xl` **and** `block`

* * *

### Main Section

I started with a div element for the body, and added the `h-screen` class to make it take up the full height of the screen.

To centre everything, I added `flex` and centred everything across the y-axis and x-axis.

```html
<div class="h-screen flex justify-center items-center">
```

To customise the background, I used the `bg` class and inserted the file of the specific image I wanted to include. Then used the `cover` property to fill the entire space of the body.

```html
<div class="h-screen flex justify-center items-center bg-[url('background.JPG')] bg-cover">
```

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/92657bc5-46f5-4a67-9284-be90a67a6f41.png align="center")

For an interactive feature, I added the `hover` pseudo-class to the link and added the background colour I wanted to create the effect.

```html
hover:bg-cyan-100
```

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/5c780e45-fbdd-4751-819d-a19d1b3a908a.png align="center")

* * *

### Footer

I started with a similar style to the header, but instead centred the navigation links and added some extra text. I added `flex` to centre everything.

```html
<footer class="bg-amber-500 flex justify-center">
```

I created a div element for the links and text to adjust their positions into a block format.

```html
<div class="text-center p-3">
```

To add some spacing between the links and text, I created a div element to contain my paragraphs. I then added a top margin of 2 to my div element.

```html
<div class="mt-2">
        <p>Company Name</p>
        <p>Address 22 Road</p>
        <p>Tailwind CSS GT Designs</p>
        </div>
```

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/00eafc64-b074-4324-8b87-19be8676e1a0.png align="center")

* * *

### Gallery

To create a gradient background, I added the `bg` class to the body of my HTML, with the colours going from left to right.

```html
<body class="bg-gradient-to-r from-cyan-700 to-cyan-100">
```

I then created a div element to act as the container for the grid items. I chose 9 images to include; therefore, I created an equal 3x3 grid. I started by adding the `grid` class, and to create the number of columns I wanted, I used `grid-cols.`

```html
<div class="grid grid-cols-3">
```

For even spacing between each image, I added a `gap` of 5. I also added margin classes to show space from the header and footer, and the `mx` class to control the spacing horizontally. Then centred everything using `flex` properties.

```html
<div class="grid grid-cols-3 gap-5 m-8 mx-24 flex justify-center items-center">
```

For the images, I chose the same size for each image using custom width and height classes and added borders.

```html
<img class="size w-110 h-130 border-6 border-amber-200" src="Flower1.JPG" alt="Itonlinelearning Coding Challenge">
```

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/13eda1d9-d388-4047-99a8-d783f8641483.png align="center")

For responsiveness, I used various screen breakpoints to override the default styles I added. To apply the styles only when the viewport is smaller than the breakpoint, I added the `max` property.

```html
max-sm:flex max-sm:flex-wrap max-sm:justify-items-center max-md:flex max-md:flex-wrap max-lg:grid-cols-2 max-lg:justify-items-center
```

This adjusts the number of columns as the screen changes in size. I reduced the number of columns to 2 for medium screens and 1 for small screens, and added `flex-wrap` so the images would move under one another.

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/72bfd6a4-cc14-4fac-8dc6-61ac2e1b1785.png align="center")

**Medium screens**

![](https://cdn.hashnode.com/uploads/covers/6aa2c31e6913c36119ffacab/d9864b2b-d310-42c1-b34b-c59545cfc8b4.png align="center")

**Small screens**

* * *

## Challenges

This was my first time creating a website using only Tailwind CSS for the design and layout. With standard CSS, you can write your HTML and add your design separately afterwards, referring to the same elements in one CSS section using selectors, whereas in Tailwind, you have to refer to each element directly. I found this good for breaking down my design into one section at a time, but of course, it means a bit of repetition. Once my code was bulking up, I found myself getting a bit lost in where elements were.

It also took time to learn the shorthands for certain properties. In standard CSS, the name is written in full; in Tailwind, sometimes just a letter is used. I had to regularly check the [Tailwind Docs page.](https://tailwindcss.com/docs/installation/using-vite)

One of the biggest challenges for me was the gallery section. In standard CSS, there's a lot of flexibility with a grid layout; for example, you can use grid-template-areas to arrange your grid items, but in Tailwind, that property doesn't exist. It took a bit of time to figure out what the equivalent utility classes were in place of the standard CSS properties and values.

* * *

## Improvements

To improve the website, I would make the responsiveness more effective. The images overlap at certain points while decreasing the size of the screen. I'd like the images to stay equally spaced apart but scale down consistently and wrap automatically.

By playing around with different font styles, I could have made some of the text more visually enticing, such as in the footer and paragraph section.

* * *

View the [LiveSite](https://georgias-hub.github.io/First-Tailwind-Website/)

Full code on [Git](https://github.com/Georgias-hub/First-Tailwind-Website)[H](https://youtu.be/QLC_6poPIfc)[ub](https://github.com/Georgias-hub/First-Tailwind-Website)

Watch the [YT Walkthrough](https://youtu.be/QLC_6poPIfc)