## The basics

The web development ecosystem is a complex and ever-changing landscape. It can be difficult for new developers to get started. I've received a lot of questions about my process and how to get started. The truth is, I rarely ever write vanilla CSS, or basic HTML and what not. I use tools and libraries such as [Tailwind CSS](/posts/a-tailwind-css-crash-course), React, and more.

There's a thing called `NPM`. NPM is a JavaScript package manager that helps developers install, share, and manage code libraries. It is the default package manager for the Node.js runtime environment. NPM makes it easy to work with code libraries, whether they are your own or someone else’s.

To use NPM, you need to set up your environment. You need to install NodeJS on your computer. You can download NodeJS from the [NodeJS website](https://nodejs.org/en/download/). Or you can use something like [homebrew](https://brew.sh/) (macOS), [apt-get](https://www.debian.org/doc/manuals/apt-getting-started-en/ch-manuals.en.html) (Linux) or [Scoop](https://scoop.sh/) (Windows).

This article assumes you went with the first option, you installed it via the NodeJS website. Once you install NodeJS, you will automatically get `npm`.

## Setting up your project

The most basic way to start a project is to create a new directory and add a `package.json` file, or run the `npm init` within that directory using a terminal.

```bash
mkdir my-project

cd my-project

npm init
```

The process will prompt you with a few questions, on which you can mostly just press enter to go through with it all.

Open the `package.json` file and look at the contents.

```json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC"
}
```

## Installing your first package

You've installed NodeJS and NPM, and you've created a new directory, where you ran the `npm init` command. Now you need to install a package.

Let's go with Vite, since it's one of the easiest packages to start working building with.

```bash
# npm
npm install vite --save-dev

# yarn
yarn add vite --dev
```

Let's look at that command.

The first argument is the package manager you want to use to install the package. That can be `npm` or `yarn`, or any other package manager for javascript. The second parameter is the command we want to give to the package manager (`install` / `add`).

The `--save-dev` / `--dev` flag tells the package manager to install the package as a dev dependency. This means that the package will be installed, but it will not be available to your application. It will only be used for development.

## The package.json file

If you inspect the package.json file now, you will see that it has a few more properties.
Also, the `start` script has been updated.

```diff
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
-  "main": "index.js",
+  "type": "module"
  "scripts": {
-   "start": "node index.js"
+   "start": "vite"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^x.y.z"
  }
}
```

This will change the `start` script to call `vite` to run your code. Also, the `main` file has been removed, and the `type` property has been added.

## Finding packages

The internet has already creaded hundreds of thousands of packages that can be used to build your application. You can search for packages on [npmjs.com](https://www.npmjs.com/). Go and explore!

## Bonus

To have a fully functional Vite project, you'll need to add a few files.

Add `index.html` in the project root folder:

```html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
```

Add `style.css` in the project root folder:

```css
/* style.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#app {
  min-height: 100vh;
}

/* Then the rest of your styles */
```

Create a file called `counter.js` in the project root folder:

```js
// counter.js
export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(++counter))
  setCounter(0)
}
```

Add `main.js` in the project root folder:

```js
// main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'

document.querySelector('#app').innerHTML = `
  <div>
    <h1>Hello world!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
  </div>
`

setupCounter(document.querySelector('#counter'))
```

Then run the command

```bash
# Npm
npm run start

# Yarn
yarn start
```

This should open up a website on localhost with a heading and a button that displays a counter. When you click the button, the counter should increase.

You can follow some of the basic guides for Vite on the [Vite website](https://vitejs.dev/guide/).

## To wrap it up

The npm website is a great resource for learning about the tool and the registry. The website also provides a way for developers to share their own code packages.

The npm ecosystem is a vibrant and growing community of developers. There are many ways to get involved, such as writing code, contributing to the registry, or writing articles like this one.

If you’re a web developer, npm is an essential tool. It can help you install, share, and manage code libraries. It can also help you stay up-to-date with the latest tools and best practices.

We don't always write the raw html and css. We use tools and libraries to make our lives easier. This is a brief overview of the web development ecosystem.

An intro to the web development ecosystem

Over the years, I've used a few solutions for styling (React) components. Started out with vanilla CSS, later on with SCSS, and then a few JSS solutions such as Styled Components, Emotion, and Stitches. None of those (except maybe Stitches, but about that in a different post) has been as enjoyable as TailwindCSS has been for me. So here's a crash course based on my experience with TailwindCSS. We use it on this blog as well (at the time of writing this article).

## What is it?

TailwindCSS is a utility-first CSS framework with pre-defined classes that you can use directly in your markup – allowing you to style your markup as you're writing it. Cool.

In traditional web development, you would first write your markup (HTML), then style it with CSS. With TailwindCSS, you can style your markup right away. That looks something like this:

```html
<div class="p-4 bg-gray-100 shadow-md rounded-xl">
  <h2 class="text-2xl font-bold">Hello, world!</h2>
  ...
</div>
```

Whereas previously, you would need to write your HTML in one file, come up with a name for the class, and then style it in a separate CSS file.

```html

<div class="a-class-name-that-you-had-to-think-really-hard-about">
  <h2>Hello world</h2>
</div>
```

```css
/* index.css */
.a-class-name-that-you-had-to-think-really-hard-about {
  border-radius: 12px;
  background-color: #fafafa;
  padding: 12px;
}
```

## Install TailwindCSS

There are several ways to start using TailwindCSS. Depending on your setup, you have a few options. We'll cover only the one where you install it as a `node_module` in your project. This is probably the go-to option for most people who use some of the more popular frameworks like React, Vue,
Angular, etc...

```bash
# Via NPM
> npm install tailwindcss
# or Yarn
> yarn add tailwindcss
# Create tailwind.config.js
> npx tailwindcss init
```

The last command created a file `tailwind.config.js` in the root directory of your project.
Configure the config for the directories you want TailwindCSS to be used in:

```js
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

You can look up the other ways to use it and the rest of the documentation [here](https://tailwindcss.com/docs/installation).

## How do I use it?

Create an `index.css` file in a directory of your project where you have the rest of your styles if you're using a non-JSS solution.

Let's say you have `src/styles/index.css`

Populate that file with

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Import this file in the root file of your project.

```js
// App.tsx
import './styles/index.css'
```

Start using it within your components.

```js
// src/components/Button.tsx

export default function Button(props) {
  return <button {...props} className="rounded-md bg-blue-600 text-neutral-50 dark:text-neutral-900" />
}
```

Protip: It would be nice if the consumer of your components could pass a `className` prop and it would be added to the component. Consider joining the received `className` with the one you create.

```js
// src/components/Button.tsx
export default function Button(props) {
  // TODO: Add the className to the props only if it was passed to the component
  return (
    <button
      {...props}
      className={['rounded-md bg-blue-600 text-neutral-50 dark:text-neutral-900 ...', props.className].join(' ')}
    />
  )
}
```

## My markup is ugly, is there a different way?

Yes there is. You can create CSS components and apply the TailwindCSS classes to them.

```css
/* styles/components/Button.css */
.button--raised {
  @apply bg-blue-600 rounded-md;
  @apply text-neutral-50 dark:text-neutral-900;
  @apply px-4 py-2;
}
```

```jsx
export function GrandSchemeComponent() {
  return <div>
    ...
    <button className="button--raised">
    ...
  </div>
}
```

Don't forget to import the file in the root file of your project, or where you import component styles so it becomes available to your components.

## Bottom line

TailwindCSS is by far the path of least resistance for me. I can style components as I write their structure. And with all the utility classes it gives me, I can pretty much do anything I want.
Pseudo-classes like `hover`, `focus`, `active`, as well as classes for responsive breakpoints make TailwindCSS a great tool for any project.

What do you think? Do you think TailwindCSS would be a good fit for your project? If so, please let me know! I'd love to hear from you.

Send us a tweet [@delvingdev](https://twitter.com/delvingdev)

There are many ways to use TailwindCSS, but this is the most basic way to get started.

A crash course on TailwindCSS in React


Both Flexbox and CSS Grid are powerful tools that have transformed the way we create responsive, modern layouts for websites. Although they share some similarities, each has its unique set of features and ideal use cases. In this article, we'll dive into the main differences between Flexbox and Grid, and provide insights to help you determine which one to use for your layouts.

## What is Flexbox?

**Flexbox** (Flexible Box Layout) is a one-dimensional CSS layout model designed to make it easier for web developers to create flexible, space-efficient, and responsive layouts. Flexbox can manage the distribution of space and the alignment of items either horizontally or vertically within a container. 

```css
.container {
    display: flex;
    flex-direction: row; /* will change the main axis direction */
    justify-content: center; /* aligns items on the main axis */
    align-items: center; /* aligns items on the cross axis */
}
```

Flexbox is particularly useful for creating simple in-page navigations, organizing content for mobile responsiveness, and aligning items within larger layouts.

## What is CSS Grid?

**CSS Grid** is a two-dimensional CSS layout model that enables designers to design complex and responsive web layouts. With the Grid, you can create both horizontal and vertical layouts simultaneously, giving you the power to create intricate designs.

```css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px;
    grid-gap: 10px;
}
```

CSS Grid excels in constructing grid-based layouts and handling complex alignment tasks for multiple items, making it ideal for designing magazine-style sites or galleries.

## Key Differences Between Flexbox and Grid

### Dimensionality

The most significant difference between Flexbox and Grid lies in their dimensionality. Flexbox is designed for one-dimensional layouts, meaning it's limited to either rows or columns. On the other hand, CSS Grid is tailored for two-dimensional layouts, giving you the ability to control both rows and columns simultaneously.

### Use Cases

[Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) works best in situations where you need to distribute items in either a single row or column. It's great for constructing primary navigation menus or aligning specific blocks of content in horizontal or vertical directions. Moreover, using Flexbox, you can easily control sizing and space management of variable elements, such as dynamic content.

[Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) excels in creating complex, responsive grid structures for websites, such as those found in newspapers, agency portfolios, or online stores. When working with a large number of items or desiring intricate, two-dimensional placement, CSS Grid Layout is your go-to tool.

### Learning Curve

Flexbox offers a relatively low learning curve, making it easier for beginners to grasp the basics quickly. A more advanced, two-dimensional system like CSS Grid might require more time to understand and use efficiently.

However, both have a wealth of resources available online. For instance, check out [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) by CSS-Tricks for handy, comprehensive guides.

### Browser Compatibility

Flexbox and Grid both offer excellent browser compatibility with virtually all modern browsers. However, if you're working with older browsers like IE 10 or earlier, that's where Flexbox holds an advantage, as it provides support for such versions.

### Grid Gaps, Grid Gap Replacements, and Flex Gaps

Grid introduces an easy way to manage gaps between items using the `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties. However, these properties have been replaced with `gap`, `row-gap`, and `column-gap` in CSS Level 3 for better compatibility across layout methods.

For Flexbox layouts, `gap`, `row-gap`, and `column-gap` are available in modern browsers, allowing you to control the spacing between items just as you would in a Grid layout. Keep in mind, however, that older browsers may not support these properties, so incorporating alternatives such as margin or padding adjustments may be necessary.

### Flex Shorthand

One advantage Flexbox holds over Grid is the use of shorthand property `flex`. Utilizing this property, you can control the `flex-grow`, `flex-shrink`, and `flex-basis` of Flexbox items in a single line. While Grid has properties like `grid-template` and `grid-auto`, they do not provide the same level of shorthand flexibility as Flexbox.

```css
.item {
    flex: 1 0 auto; /* flex-grow, flex-shrink, flex-basis */
}
```

## Combining Flexbox and Grid

In many cases, it's not a matter of choosing one over the other, but rather using both Flexbox and Grid to make the most of their capabilities. By combining their powers, you can create complex layouts while maintaining specific alignments or space distributions.

For example, you can use Grid to define the overall structure of your layout and then use Flexbox within grid items to align and manage their content. This combination helps optimize CSS layout handling.

## Conclusion

Both Flexbox and CSS Grid are invaluable tools for web developers when designing modern, responsive layouts. While Flexbox is best suited for distributing items within a single row or column, CSS Grid shines when constructing intricate two-dimensional designs.

Remember that learning both and integrating them into your projects will help you achieve the best results possible. Ultimately, understanding the differences and use cases of Flexbox and Grid will enable you to make the right decision when choosing which to use for your web layouts.

This article compares Flexbox and CSS Grid, highlighting their differences, key features, and ideal use cases to help web developers optimize their CSS layouts and create stunning, responsive websites.

Delving Developer

Darko

Reads posts by Darko

An intro to the web development ecosystem

A crash course on TailwindCSS in React

Flexbox vs. Grid: Key Differences to Optimize Your CSS Layouts