DEV Community: Chris Dixon

Learn In-Demand Web Development & Coding Skills For Free

Chris Dixon — Sat, 28 Jun 2025 18:15:17 +0000

Like many others, when I first started learning web development, I leaned on lots of the free content the web has to offer. And still do today.

The wonderful thing about the web is the huge amount of content on offer. We often take for granted being able to search for solutions to our coding problems, tutorials and guides to learn new languages, help with error messages, and just for those why is this not working moments.

Why for free?

Often the reason people create content is to give back to the same community they have learned from in the past.

I have consumed my fair share of free content, I have also been creating video courses for over 10 years and had lots of notes, guides, and content built up. Also providing training bootcamps to companies and individuals for many years, teaching web development is something I am passionate about.

I decided to use this as a foundation to give back to the community and offer a central learning resource for new and existing developers.

This is why I created a completely free learning platform at Learn WebDevelopment.com.

Learn WebDevelopment.com includes comprehensive, project-based courses on JavaScript, Vue.js, Markdown, Image Performance, Command Line, JavaScript projects, and HTML/CSS. A more recent introduction is the reference pages, including focused pages relating to a specific topic, method, property etc.

But there are lots of other learning sites!

Yes, there are others out there. Many are great, but often overwhelming for beginners. Some are also very useful for simple examples, often providing generic examples that are not applied to real-world use cases.

I like to think we pitch somewhere in the middle. We lean more towards project-based learning using practical use cases. Enough info to be detailed, but also a friendly enough language for newcomers.

Current courses

The future

The project is relatively in the early stages, but new content is added on a regular basis, and we currently have 200+ pages of free, educational content, and growing every day.

There are also many courses planned including Python, Rust, along with platform improvements such as interactive code, performance improvements, saving progress, and many more.

Check us out at Learn WebDevelopment.com 😄

Deleting Git Branches Locally And Remotely

Chris Dixon — Mon, 07 Sep 2020 07:43:50 +0000

When working with Git, we can create branches to work on new features and keep the code separate from the rest of the project.

It is common to have a "main" master branch, and once we are happy with the changes made on the branch, we can then merge them in with the master.

If the branch code does not work out and we want to remove it, or, after merging we can delete the branch. Let's begin by removing the branch locally.

To delete a branch locally the first thing to do is to make sure we are not currently working on it. We can change branches, i.e back to the master like this:

   git checkout master

Then to delete the branch, we have 2 options, depending if you have pushed and merged with the remote branch:

   // -d (delete) to remove only if you have pushed and merged
   // it with your remote branch
   git branch -d branch_name

   // -D (delete/force) to remove even if you have not pushed and merged
   // it with your remote branch
   git branch -D branch_name

We have now successfully removed our local branch. We now need to remove it remotely too using the following command:

   git push <remote> --delete <branch_name>

   // which looks something like this with your variables:
   git push origin --delete new_checkout_flow

Enter your password, and all done! You can check GitHub and the branch should now be removed.

Learn Javascript By Building Projects (for free!)

Chris Dixon — Thu, 06 Aug 2020 08:37:08 +0000

This week, I have just released a free, project based Javascript course.

Fun Javascript Projects.com!

The course is aimed at beginners, and currently included 6 projects to see how HTML, CSS and Javascript all fit together.

Although I do explain as we go, the intention is to just jump in and build things, to give beginners a portfolio of projects they can use, modify and reference in the future.

What will you build? Let's take a look.

This course is completely free, and the project can be taken at your own pace, in any order.

Hope you enjoy!

How To Create A Simple Parallax Style Effect With CSS

Chris Dixon — Thu, 09 Jul 2020 09:45:51 +0000

Adding a parallax style effect to our web page can really make it stand out.

You may have seen this effect when scrolling on web pages or apps.

It basically involves the background, in our case an image, scrolling at a different rate to the rest of the content on top of it.

You can find a working codepen example here:

https://codepen.io/chrisdixon161/pen/VwexxYO

There are many options out there to achieve a similar effect, and many making use of Javascript, but we are going to be doing a simple CSS only version.

EDIT: Some people have commented that this is not true parallax, please not this is labelled as parallax style and intended to be a quick and simple CSS effect.

How? Let's take a look.

First, we need some HTML content:

<section class="top">
  <p>
~ Scroll down ~
  </p>
</section>

<section class="parallax">
  <p>Some cool overlay text...</p>
</section>

<section class="bottom">
  <p>
~ Scroll up ~
  </p>
</section>

This will give us 3 sections, a top and bottom which is our "regular" content. And a middle section which contains the image.

Now onto the CSS, to begin, this will just be some simple styling not related to the parallax:

.top, .bottom {
  background: lightslategray;  
  height: 100vh;
}


section {
/*  align text  */
  display: flex;
  justify-content: center;
  align-items: center;
}

This will give a gray background to the top and bottom sections, and these sections will appear to move over the middle section soon.

For the parallax to work, we need to add a background image to scroll over:

.parallax {
  /* set image for background   */
  background-image: url('https://res.cloudinary.com/djn1ticju/image/upload/v1594285691/parallax-background.jpg');

/*  full height image  */
  height: 100vh;

/*  image starting position- eg. top, right, left, bottom  */
  background-position: center;

/*  size of image, eg- 50%, 3rem, 500px etc.
    cover= scales the image as large as possible without stretching
  */
  background-size: cover;
}

This will leave us with a pretty regular website with 3 sections, all scrolling together:

To get the desired effect, the key part is to set this background image to be fixed

.parallax {
  /*... at to rest of code in this .parallax selector: */

/*  To get the desired effect, the key part is to set this background image to be fixed  */
  background-attachment: fixed;
}

Now try to scroll in the browser and see the effect!

Quick & Easy Vue.js Search Facility

Chris Dixon — Fri, 05 Jun 2020 08:57:09 +0000

Adding a search facility to your project can be complex, but only if you need it to be. Sometimes, we just need a simple filter, and return the results.

This post is going to show you how to do this in Vue.js, but the same principle can be applied to React or almost anything else.

I am going to create a simple blog style app, with a search input to filter the posts by the post's content.

You can find the finished demo app here:

Easy Vue.js Search on codesandbox

And a video version on YouTube here:
https://youtu.be/mCl5LxO5FEc

To follow along, you can either use Codesandbox, and create a new project with a Vue.js starter, or use the Vue-CLI to create a new project.

This is how the starter looks in codesandbox.

Remove HelloWorld.vue from the components folder, and clean up the App.vue to look like this:

// App.vue
<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  components: {}
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

In the components folder, create a new file called Post.vue, and add our basic Vue.js structure:

// components/Post.vue
<template>
  <article>
    hi
  </article>
</template>

<script>
export default {};
</script>

Next, to include the post into our app we need to register it, which I will do in the App.vue:

// App.vue
<template>
  <div id="app">
    // 3. output component
    <post></post>
  </div>
</template>

<script>
// 1. import component 
import Post from "./components/Post";

export default {
  name: "App",
  // 2. register component
  components: { Post }
};
</script>

The browser should now show our message of "hi".

We now need some sample blog posts to work with and display in the Post.vue component, for this example I will add some content into the App.vue "data" property:

// App.vue
<script>
import Post from "./components/Post";

export default {
  name: "App",
  components: { Post },
  data() {
    return {
      // add blog posts array:
      posts: [
        {
          id: 1,
          title: "Post 1",
          body: "Vue.js is cool"
        },
        {
          id: 2,
          title: "Post 2",
          body: "Javascript is cool"
        }
      ]
    };
  }
};
</script>

We now have 2 sample posts and with Vue.js, we can loop through each post and display the "Post" component:

// App.vue
<template>
  <div id="app">
    <div v-for="post in posts" :key="post.id">
      <post></post>
    </div>
  </div>
</template>

We should now see the "hi" message twice in the browser. This makes sense since we have 2 blog posts.

However, we want to pass the blog post data to the Post.vue component, and we do this via props:

// App.vue- add props to post:
<post :post="post"></post>

Back over in the Post.vue, we receive these props (note prop validation is skipped for simplicity):

// components/Post.vue

<script>
export default {
  props: ["post"]
};
</script>

And we can modify the template to output the blog title and body:

// components/Post.vue
<template>
  <article>
    <h3>{{ post.title }}</h3>
    <p>{{post.body}}</p>
  </article>
</template>

And we should now see the posts display in the browser!

But what about the filter? Let' begin with an input box to type in, inside of the App.vue:

//App.vue
<template>
  <div id="app">
    // add input:
    <input type="text" v-model="search">
    <div v-for="post in posts" :key="post.id">
      <post :post="post"></post>
    </div>
  </div>
</template>

Notice here we are using v-model, this is to create 2 way data binding with a data property called search, so we also need to add this to our data property:

  // App.vue
  ...

  data() {
    return {
      search: "",

 ...

This search property will now hold the value typed into the input field by the user.

We now need to get all blog posts, filter them using this search term, and return the new blog posts.

To do this, I will use a computed property. This will be ideal to re-calculate the matching blog posts each time the input is updated:

// App.vue- final script section:

<script>
import Post from "./components/Post";

export default {
  name: "App",
  components: {
    Post
  },
  data() {
    return {
      search: "",
      posts: [
        {
          id: 1,
          title: "Post 1",
          body: "Vue.js is cool"
        },
        {
          id: 2,
          title: "Post 2",
          body: "Javascript is cool"
        }
      ]
    };
  },
  // Add computed section:
  computed: {
    filteredPosts() {
      return this.posts.filter(post =>
        post.body.toLowerCase().includes(this.search.toLowerCase())
      );
    }
  }
};
</script>

Here we are filtering the blog posts, and returning only the values which includes the search term.

This search is matching any letter, word, phrase in the blog post body section. To make the search as inclusive as possible, we also make it case insensitive by lower casing all text.

The final thing to do is to loop through this "filteredPosts" computed value, rather than all posts:

// App.js
...

<div v-for="post in filteredPosts" :key="post.id">
  <post :post="post"></post>
</div>


...

And thats it! Go ahead and give this a test in the browser.

And now you can type into the input field, and only return blog posts which match...

How to add a Gravatar in Vue.js

Chris Dixon — Wed, 27 May 2020 11:06:09 +0000

Adding a Gravatar (Globally Recognised Avatar) is a nice way to personalise the users experience.

It adds a familiar image, which the user uploads, to each site they visit which has it enabled:

First of all, if you want to upload your own Gravatar image, head over to http://en.gravatar.com/, sign in and upload from here.

We are going to be focusing on the developer side, and how to enable it on your Vue.js website or app.

The process is pretty simple, not authentication is needed, and there is only a few steps to take:

Get the users email (we will already assume you have this)
Trim all of the email's leading and trailing whitespace
Set email to lower case
md5 hash the string

Since we are using Vue.js, we will assume you have the user stored as a data property called user:

  data() {
    return {
      user: {
        email: "awesome@coolcompany.com"
      }
    };
  },

To hash, I am going to use the md5 NPM package, and install in our Vue project:

// npm
npm i md5

// yarn
yarn add md5

Then import into our component's script section:

<script>
import md5 from "md5";

export default { ...

Next, we can use a computed property to calculate the value we need. This will also mean it will watch out for any changes in the user, and update the UI:

  computed: {
    gravatar() {

    }
  }

Using the md5 package, we can hash the users email:

  computed: {
    gravatar() {
      const hash = md5(this.user.email)
    }
  }

We then call the trim() method to remove the whitespace, and lower case the email too:

  computed: {
    gravatar() {
      const hash = md5(this.user.email.trim().toLowerCase());
    }
  }

Now we have the hash, we use it to create a URL to make a "GET" request, which looks like this:

https://www.gravatar.com/avatar/HASH

To create this, we just need to return the URL as our computed value:

  computed: {
    gravatar() {
      const hash = md5(this.user.email.trim().toLowerCase());
      return `https://www.gravatar.com/avatar/${hash}`;
    }
  }

Then in the template, we use the computed value as the image src (don't forget the colon before src since we are using a dynamic value):

<img :src="gravatar" alt="user profile image"  />

And you should see a Gravatar in the browser!

If you don't have your own Gravatar image set, you may see the default image. Personally, I like to change this.

You can either use your own alternative default image, or change the default set by Gravatar.

To use your own, you can add the ?d= parameter, with a URL to your chosen image:

return `https://www.gravatar.com/avatar/${hash}?d=https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png`;

Or, use one of the other defaults provided by Gravatar (http://en.gravatar.com/site/implement/images/) like this:

return `https://www.gravatar.com/avatar/${hash}?d=robohash`;

And you can also use the "s" parameter too, which will set the Gravatar size:

return `https://www.gravatar.com/avatar/${hash}?d=robohash&s=200`;

Above we set the width to be 200px x 200px, but the accepted range can be 1px-2048px.

You can also find some more options at http://en.gravatar.com/site/implement/images/, which is worth checking if you want further customisation.

Visual Studio Code Extensions You Might Not Know

Chris Dixon — Thu, 21 May 2020 09:48:49 +0000

Visual Studio Code has exploded in popularity over the last few years. By default, it has lots of features, but we can also download extensions to add almost any type of feature we need.

I have used VS Code for a few years now, but there is always something to learn from others. I recently asked on Twitter for everybody's top 3 extensions, hoping to uncover some hidden gems, and I think I did just that.

Why top 3? This was intentional. Yes, most of us have many more installed, but limiting it to 3 makes people think about what is really important.

There was lots of extensions which got 1-2 votes, as you would expect, but also some emerging patterns too. If you want to find any of these extensions, open up VS Code, click on the extensions icon in the sidebar, and use the search box.

Before we get started, you may notice a popular extension called Emmet is missing. This was a popular choice, but is now built into VS Code, so I have left this one off.

Top Picks

Live Server
Prettier
Git Lens
Bracket Pair Colorizer

These 4 were the most chosen extensions, by far. The next group also got a good share of the votes too:

Visual /color extensions

Indented Block Highlighting
Better Comments
Rainbow Brackets
Color Highlight
VSCode Icons
Notes
TODO Highlight
Emoji
Beautify
VS Code Styled Components
Peacock

Improving workflow & productivity

IntelliSense for CSS class names in HTML
Code Spell Checker
Bookmarks
Settings Sync
REST Client
Remote Development
WakaTime
Project Manager
Version Lens
Error lens
Spellchecker
TODO Tree
TabNine
Turbo Console Log
Import Cost
Better Comments
Polacode
Live SASS Compiler
Node Exec

Automating tools

Auto Rename Tag
Auto Complete Tag
Auto Close Tag
Auto Import
Auto Save (lots of different varieties, search for "save" )
Path Autocomplete

Markdown tools

Markdown All in One
Markdown Preview

Vim Tools

Vim
Neo Vim

At the time of writing, a new tool called Kite has also been released which may be worth checking out. It is a powerful, auto complete tool which uses machine learning to provide intelligent suggestions. It is currently available for Javascript and Python users.

Many of the above tools depend on your type of coding, but hopefully you will discover some new ones to help you out.

Javascript: Check an array value is included in another array

Chris Dixon — Mon, 18 May 2020 09:15:33 +0000

A common situation is when we have 2 arrays, and want to know if the value of one is included in the other:

const array1= ["cheese", "dough", "sauce", "pepperoni"]
const array2= ["mozzarella", "peppers", "chicken", "cheese"]

Here we see that "cheese" is in both arrays, but how we use Javascript to check?

First of all, we need to decide what we want to be returned:

Do we want a boolean, if there is a match return true, if not return false
Or, do we want the matching values returned i.e "cheese"

For option 1, we can use the some array method to get a boolean value. This is simple enough for checking one array, but we want to compare 2. So, we can also combine with the includes array method:

const isIncluded =  array1.some(value => array2.includes(value))
// true

This will get each "value" from array1, then check this value is included in array2.

The true or false value is then stored in the isIncluded constant.

Next we can also store these matching values too. We can do this with the filter array method, this will create a new array with the matching values:

const values = array1.filter(value => array2.includes(value))
// "cheese"

The code above is the same as the first example, but using filter in place of some. Again checking each value in array1 is included in array2, then storing in the values constant.

You can also find a working Codepen demo here too: https://codepen.io/chrisdixon161/pen/OJyPJdB

Working From Home or Being at Home?

Chris Dixon — Wed, 13 May 2020 13:54:19 +0000

Working From Home or Being at Home? That is the big question.

I have held off writing a “tips for working at home” article for a good few months.

Why?

At the time of writing this, there is a global COVID-19 pandemic. Many people are being forced to work from home who previously made the daily commute. Some love it, some hate it, but everybody has an opinion, that is human nature.

The reason I held off was because of that word “opinion”, everybody is different, and everybody has different circumstances. Eg. I have children at home, so why would my advice about being at home affect somebody who has none?

Also, I am not the first, this type of article popped up from day 1, and they are very welcome too.

Why is today different? Well, 2 main reasons.

First, I feel I am in a good position to write this, since I already worked from home before it was forced upon us, so I can see it from both sides. I have had a little longer to go through the ‘ups and downs’.

Second, if my tips can help even one person, that is enough for me. Also fuelled by a regular stream of Twitter DM’s asking for tips.

I am not going to throw out a huge list of things to follow, I don’t think religiously following somebody else’s pattern is productive either.

I also don’t want to write a “10 tips when working from home” kind of post, there is many great ones out there. Instead, I will share some of my experiences.

So, here goes…

Social Media

For me this was a big one. but also double edged. I have never been big into social media for personal use, I am quite a private person generally. At the beginning of the year I decided I was going to dedicate more time into social media for my work. An increased following seemed a good choice for my business, networking, and it turns out I have also met some great people along the way too.

This also comes at a cost. Although I use social media for “work”, it was so easy to always keep a browser tab open. Yes growing my social media presence is important, and still a goal I am focused on, it was also beginning to eat into my regular work too much.

Concentration on regular work tasks was reduced once I noticed the a notification in the browsers tab, clearly put there to entice a click to satisfy human curiosity.

Close that tab, schedule a set amount of time or visits for social media, and stick to them. The notifications can be dealt with in “batches”, we don’t need to catch them as they come in.

The Phone & Tablet

Which leads nicely onto this one! The big distraction for many, I am not going to tell you to put your phone away when working, or turn off alerts, you already know that.

Quick side note, we have all seen the messages when visiting a social media site on our phones “Please download the app for a better experience” or something along those lines. Why do you think social media companies encourage you to download the app rather than use the phone browser?

Yes the app is optimised for touch etc, but they can also use push notifications to get you back browsing. Social media companies are good at getting users back and retaining them. There is usually a team of people employed dedicated to this. For them, visits equal numbers, which equals higher advertising revenue.

It also eats away at your time, possibly more that we want to be made aware of.

Yes, you may now have an extra hour in your day from not commuting, but 1 hour can easily slide away when scrolling notifications.

Just be more aware of the habits we get into. How many of us, possibly subconsciously, reach for the phone when nobody is even calling? We check things even if there is nothing to check.

If we are being honest, how many of us close social media on a computer, and open it on the phone when we walk away?

For me personally, already working from home, the phone blurred the line between being at home and working at home. When I finished work, closed the office door, the phone was the only link back to work. We carry it around, also carrying the temptation.

I am guilty of answering student questions and checking social media on my phone late on an evening during busy periods. Is this giving my brain a break? Not at all. But I am getting better at being more aware of this and saying no.

Being productive and taking breaks.

Just like the phone situation, I am not going to tell you the obvious. Drink water, exercise, take breaks, yeah we all know this. Do your best.

Working from home seems to go hand in hand with a computer screen. As a web developer, I work at a screen all day. It is well known in my industry that when we hit a coding problem we are struggling with, a break from the screen gives us time to reflect. The problem always seems easier when returning with a fresh mind.

I don’t get enough exercise. Probably because I don’t enjoy it unless it is disguised by playing some form of sport. I do have a dog and I find that a daily dog walk gives me the exercise and also the break from the screen. I time it in the middle of the day, then have lunch, to get a proper break. Remember, you don’t need a dog to go on a walk though!

Having this routine also gives my work structure. I can focus on a task in the morning, and also a different one in the afternoon, depending on what I am working on.

Also, many of us are productive at different times of the day. Personally, my brain functions better in the morning after a good sleep, I set aside time in the morning to write this article to give it my best.

Therefore, I schedule the most difficult tasks into the morning.

(On another side note from above, my sleep is definitely affected if I am working on my phone late at night before bed, my brain does not seem to want to switch off)

Find your productive hours too. Not everybody has the luxury of having a full work day available at home. We all have busy lives. 3 dedicated hours in your productive “zone” is better than a distracted 6 hours in my opinion.

The famous checklist- but why so rigid?

I worked from home before the COVID-19 lockdown and had a nice routine. I had no checklist, I was pretty motivated and knew in my head what I was working on most days. Once i found myself at home with 2 kids, and my wife off work too, I got distracted. Not because they were all loud and going crazy, it was just different. It felt different.

My productivity went down. Some days were good, some days were bad. I run my own business so when I work, I like to make the most of these hours.

I turned to the checklist. Checklists are great, and give many people structure to their days. I believe even Richard Branson lives by them. So, I tried this for a few weeks.

They did work well, I got more done and I would recommend writing one. Especially writing one when you finish work for the following day. This means you can wake up, get a coffee, head into the “office” and jump straight in.

After a few weeks though, personally I felt as though these checklists were putting too much pressure on. Let me explain. I am aware this may be because I was overloading them, but I felt the day was turning into a constant battle to get through the list. Sometimes working later to get the last one ticked off.

Recently I have tried a different approach. I still create a checklist of things I need to do, but not a daily list. This means I can start the day, choose what I feel like starting with, and work through things at my own pace, in my order.

Obviously this may not work for everybody, especially for employed people who have a more rigid structure, but it worked for me and I feel happier this way.

Dedicated space

So important, but not always possible I understand.

For my first year working from home, I worked at a desk in the corner of my bedroom. I was so happy to start working from home on my business full time, that I didn’t care I had no dedicated space.

As time passed, it did get harder. All of the little distractions added up. And also, there was very little separation between home and work. If you don’t have a dedicated space to escape to, you can only do your best with what you have.

But, if there is somewhere you can take a little time to set up, you wont regret it.
We recently extended our house and I now have the dedicated space, this has seen the biggest mind shift between being at home, and working at home.

Write things down

This one is important for me in 2 ways.

First, when working during normal times I often have ideas and thoughts pop into my head. I may see a design idea which inspires me, I may think of a better way to code something, but I may be working on something else.

Get it out of your head and write it down. No more worry about forgetting, no more distractions.

Secondly, it can also equally apply to out of work times too. Back to what I said earlier about evening distractions, inevitably work sometimes pops into your head, or an idea may suddenly appear. The temptation is to jump on it there and then, write it down, and it will still be there in the morning. I find this especially important when going to bed. If I don’t write it down and forget about it, you can guarantee it will cost me sleep.

The idea for this article actually came to me when I went to bed, so what did I do? Wrote it down and forgot about it until the next morning. Keep a notepad by your bed, or use your phone to make a quick note if you need to.

I can not take full credit for this one, but unfortunately I can not remember the source. But this is a big help to clear your mind so it is not always in work mode.

If anybody knows and informs me, i will gladly credit it here.

Final thoughts

This is of course only scratching the surface of working from home, but I wanted to focus on some of the main things which can make a big difference.

Lastly if you have children at home like I do, I am not going to tell you what is best. Everybody’s situation is different. I am fortunate that currently my wife is off work, so I have help, and they are also old enough to be left to themselves too. Yes, they distract me occasionally, but I love them and know the current circumstances are temporary. Understandably not everybody has this luxury. We have to make the best of our own personal situation.

Once the COVID-19 situation is over, when my wife returns to work and the kids return to school, the house may then seem lonely place, who knows?

Just like the “real” workplace, working from home brings it’s own challenges, you have good days and bad days. Some days I also need to take my own advice, and surely writing down this article will help with that too. But, if any of the lessons I have learned can help even one of you, then that can only be a good thing.

Tailwind CSS Quickstart (inc project)

Chris Dixon — Mon, 11 May 2020 14:54:21 +0000

In this blog post, we are going to be discovering how to use the popular Tailwind CSS framework, by creating a simple Coffee Shop landing page.

You can find the finished code here if you need it:

Github repository

Project images download:

Images

And also a YouTube link too if you prefer video:

YouTube video

The Tailwind CSS library has been seeing a huge rise in popularity recently, and with good reason.

It is quick and easy to get started with, and enables you to create a great looking website or app in a short time.

So, how does it work? First let's take a look at the popular Bootstrap 4 framework as a comparision:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

With Bootstrap we also have some utility classes available, but generally we make use of it's pre-built "component" structure. We are provided with elements and wrappers, combined with the CSS classes to create these components.

Tailwind on the other hand takes a full "utility first" approach. This means we have no enforced HTML structure, we take our existing HTML, and add one or more classes to each individual element.

We can style and layout our app without leaving our HTML markup. Want to set a container to use Flexbox? Just add a class:

<ul class="flex">

And we use as many of these "utility" classes as we would like to style our elements, each one with a name relating to the CSS property it adds, eg:

<p class="text-white p-4 text-2xl">Tailwind Coffee</p>

Is the same as adding the following CSS manually:

p {
    color: #fff;
    padding: 1rem;
    font-size: 1.5rem;
}

Now we know a little about how Tailwind works, let's begin our project.

This project is intended to be a quickstart to get you going fast. We will not be covering every CSS class Tailwind has to offer. This would be crazy, and take forever. Instead, it is designed to give you just enough to find your way.

I would also recommend having open https://tailwindcss.com/docs/installation/ as you go through the course. The sidebar covers all of the available classes we have to use.

Create a new project folder in your desired location (documents/desktop etc)- named tailwind coffee
Open up your preferred text editor, I use Visual Studio Code
Open up your empty project folder in your text editor (file > open, or drag folder into editor)
Create a new file in our project folder: index.html (file > new file)

Now we are ready to create our basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Coffee</title>
</head>
<body>

</body>
</html>

All of the code we write from now will also be in this same file.

Starting at the top of the project we will create the header section, navbar and main image which you see here:

We are also going to need some images to use too. You can download your own, or use the same as me: using this link:

Download project images from https://chrisdixon.io/p/downloads
Unzip & add images folder to your project folder

Add the following code to the top of the body section:

    <header>
      <p>Tailwind Coffee</p>
      <nav>
        <ul>
          <li>home</li>
          <li>store</li>
          <li>locations</li>
        </ul>
      </nav>
    </header>
    <img src="images/background.jpg" alt="coffee shop background" />

Double click the index.html file to open in the browser.

Not the best looking navbar, right? Let's fix this by adding some Tailwind.

Head over to https://tailwindcss.com/docs/installation/, where you will find the following CDN link:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Add this into the head section of our project:

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Tailwind CDN Link: -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.4/tailwind.min.css"
    />
    <title>Tailwind Coffee</title>
  </head>

Back over to the browser, we see a change. Bullets are removed from our list items and the fonts have changed.

This means the tailwind "preflight" has taken effect. Preflight is Tailwind's base CSS which gives us a blank canvas to begin with by removing default margins, unstyling headings and lists etc. It is also build on top of the popular normalize.css file.

Now we can add some Tailwind utility classes to improve the styling, to begin, I am going to be styling "mobile first". I would recomment shrinking the browser to a narrow size.

We can apply general stying we want throughtout the page in a parent container, such as the body:

<body class="font-serif text-xl text-gray-200 antialiased">

Here we set the font-family, size, color and also font smoothing properties.

Then our initial mobile first styling for the header content:

    <!-- display type flex, items centered, text/background colors and padding -->
    <!-- py-6 = padding value of 6 (1.5rem) on y axis (top/bottom)  -->
    <!-- px-2 - padding value of 2 (0.5rem) on x axis (left/right) -->
    <header
      class="flex flex-col items-center bg-gray-600 text-gray-200 py-6 px-2"
    >
      <!-- pb-4 = padding value of 4 (1rem) on bottom only -->
      <!-- font weight medium, font size 1.5rem -->
      <p class="pb-4 font-medium text-2xl">Tailwind Coffee</p>
      <nav>
        <!-- set flex container and a spacing value
             between child element of 4 (1rem) on the x axis -->
        <ul class="flex space-x-4">
          <li>home</li>
          <li>store</li>
          <li>locations</li>
        </ul>
      </nav>
    </header>

Our header should now look like this:

Stretch the browser to be a wider size (over 768px), and we can change the layout of the header for larger devices.

To do this, Tailwind provides some default responsive sizes:

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

We can use these prefixes of sm, md, lg and xl before any utility class, to only apply the styling on that size and over.

For example, our header is currently set to the flex direction of column (flex-col), we can change it to be row on medium devices by adding md:flex-row:

    <header
      class="flex flex-col md:flex-row justify-between items-center bg-gray-600 text-gray-200 py-6 px-2"
    >

We also add justify-between above to add the spacing between the site title and links for the md size and over.

So, to recap, the header will be column on all sizes, until the browser reaches 768px, then the layout will switch to row.

The site title and links are not currently lined up ono the larger view, because we have some padding on the bottom of the title from the small screen view.

Let's override this for the md size:

<!-- add md:pb-0 -->
<p class="pb-4 md:pb-0 font-medium text-2xl">Tailwind Coffee</p>

You should now have a nice looking responsive header like this:

Now we understand a bit more about how Tailwind works, the rest of the page should make more sense (add code below main image):

<main class="md:grid grid-cols-3 gap-4 text-gray-200 text-center mt-4">
      <article class="bg-gray-600">
        <img
          src="images/beans.jpg"
          alt="shop coffee beans"
          class="rounded-t w-full"
        />

        <div class="md:flex flex-col py-8">
          <h3 class="font-medium text-2xl pb-12">Our coffee beans</h3>
          <p>Bulk bags of our responsibly sourced beans</p>
        </div>
      </article>

      <article class="bg-gray-600">
        <img
          src="images/locations.jpg"
          alt="shop coffee beans"
          class="rounded-t w-full"
        />

        <div class="md:flex flex-col py-8 px-2">
          <h3 class="font-medium text-2xl pb-12">Our locations</h3>
          <p>50 locations to choose from</p>
        </div>
      </article>

      <article class="bg-gray-600">
        <img
          src="images/process.jpg"
          alt="shop coffee beans"
          class="rounded-t w-full"
        />

        <div class="md:flex flex-col py-8 px-2">
          <h3 class="font-medium text-2xl pb-12">Learn about the process</h3>
          <p>Jump into the art behind making great coffee</p>
        </div>
      </article>

      <article class="bg-gray-600">
        <img
          src="images/coffee.jpg"
          alt="shop coffee beans"
          class="rounded-t w-full"
        />

        <div class="md:flex flex-col py-8 px-2">
          <h3 class="font-medium text-2xl pb-12">Our coffee</h3>
          <p>Discover our wide range of blends</p>
        </div>
      </article>

      <article class="bg-gray-600">
        <img
          src="images/machines.jpg"
          alt="shop coffee beans"
          class="rounded-t w-full"
        />

        <div class="md:flex flex-col py-8 px-2">
          <h3 class="font-medium text-2xl pb-12">Shop coffee machines</h3>
          <p>Make the perfect coffee at home</p>
        </div>
      </article>

      <article class="bg-gray-600">
        <img
          src="images/mugs.jpg"
          alt="shop coffee beans"
          class="rounded-t w-full"
        />
        <div class="md:flex flex-col py-8 px-2">
          <h3 class="font-medium text-2xl pb-12">Branded mugs</h3>
          <p>Check out all of our merch</p>
        </div>
      </article>
    </main>

Here we create a main wrapper, on smaller devices, the content will naturally stack vertically.

Then we set the display to be grid on medium size devices and above. 3 equal grid columns, and a grid gap of 4 (1 rem).

This places all of the sections (article elements) into a grid formation, and these are made up of a image, title and subtitle, using some familiar utility classes.

You should now have an area below the header which looks like this:

I hope this has given you a good insight of how to get going with Tailwind.

This is just scratching the surface of what it has to offer, there is many more utilities available, installation methods, customisation options etc which can make Tailwind truly flexible and customisable for your next project.