DEV Community: khazifire

Centering a div made easy with Tailwind CSS

khazifire — Sat, 29 Jan 2022 16:54:33 +0000

Somehow centering a div is a problem that most people face, especially beginners getting started with web development. I have been working with Tailwind CSS and I wanted to quickly show you how to center a div using Tailwind.

Introduction

We will be exploring two methods of centering a div with Tailwind CSS. There is no right and wrong choice, so feel free to use whichever method you feel most comfortable using. Lets dive in!

1. Centering a div using Flex in Tailwind

We will start by using flex to center a div vertically and horizontally on a page. But before that, if you have not integrated Tailwind within your html project, check my previous article for a quick run through on how you can add tailwind to your html project.

<div class="flex justify-center items-center h-screen">
      Centered using flex
</div>

Lets break down what we just did:

Flex: adds the CSS flex property (display:flex).
justify-center: used to center the div horizontally
items-center: used to center the content vertically
h-screen: not necessary but it sets the height of the div to 100vh (height:100vh).

That was easy right ? Lets move on to the second way of centering a div with Tailwind CSS.

2. Centering a div using Grid in Tailwind

A second option of centering an html element is by using Grid. This approach is very similar to flex, but with a few changes.

<div class="grid place-items-center h-screen">
  Centered using Grid
</div>

Lets break down what we just did:

Grid: give the element a CSS grid property (display:grid).
place-items-center: places grid items on the center of their grid areas learn more
h-screen: sets the height of the div to 100vh (height:100vh).

Conclusion

I hope you can now center a div using either grid or flex😊. Thank you for reading. If you have any questions, feels free to reach me through twitter @khazifire. And don't forget to follow for more similar content.

How to add Tailwind CSS to your HTML project

khazifire — Sun, 23 Jan 2022 15:02:10 +0000

In this short article, you will learn how to create a simple HTML project using TailwindCSS.

What makes Tailwind great?

Tailwinds makes life so much easier for people struggling with vanilla css. Tailwind provides low-level utility classes, that enables you to make unique designs without leaving your html file. For more information read the official documentation.

How to add tailwind to your project?

1. Install Node

Before installing tailwind, you need to have node installed on your computer. Node comes with a package manager (NPM) which is used to manage dependencies.

To check if node is available on your computer, open a terminal and type these command:

node -v

In the case where node is missing from your computer, go to the official website of node and Download it

2. Create a project

To create a project we simply need to create a folder. Open a terminal on your computer and type the following commands:

We will be creating our project on the desktop, the cd command is used to move between directories

cd Desktop

The mkdir command is used to create a new directory, and in this case we are creating a new folder named tailwindProject

mkdir tailwindProject

Inside the folder we just created, we need to add a few more folders (src and styles folder)

cd tailwindProject

This command creates two folder inside the tailwindProject directory

mkdir src styles

3. Installing Tailwind CSS using NPM

In the terminal type this command:

npm install -D tailwindcss

Tailwind comes with a configuration file used to customize tailwind theme; such as adding custom colors, fonts, and many other stuff. To create to tailwind config file, you simple need to run this command:

npx tailwindcss init

And then open your project with your favorite code editor. If you are using vscode, you can simply type this command in the terminal and it will automatically open your project

code .

4. Configure your template paths

The configuration file is used to tell tailwind where to find template files which are using tailwind classes; this is important because tailwind uses that path to scan your html file for classes which will then be added to your style sheet.

Inside your tailwind.config.js file, which was created in the step 3, add the path to your html files in the content.

In my case all my html file will be stored in the src folder which was created in the previous steps.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Add the Tailwind directives to your CSS

Inside the styles folder, create a CSS file named tailwind.css or any name of your choice. And add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Apart from the directives of tailwind, you can also use that file to add any custom CSS.

6. Start the Tailwind CLI build process

You are almost done, the next step involves building the css file containing utility classes.

6.1 Open package.json file

And add the following script:

"scripts":{
    "dev":"npx tailwindcss -i ./styles/tailwind.css -o ./styles/output.css --watch"
},

The above script uses the file containing the tailwind directives as an input, and create a css containing all the utility classes being used in the project.

6.2 Run the script

Inside the terminal, type this command

npm run dev

In addition, that command will be used every time you start working on your project.

7. Start using Tailwind in your HTML

Open the project in your favorite code editor and start writing some html code. Most importantly, don't forget to link the stylesheet to the output.css file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link  href="/styles/output.css" rel="stylesheet"/>
    <title>Tailwind Starter</title>
</head>
<body class="bg-gray-800">
    <div class="text-center mt-12">
        <h1 class="text-4xl text-yellow-500 font-bold">Heap Heap Arrayy!</h1>
        <p class="text-xl text-white mt-4"> I have created my first html project using tailwind. </p>
    </div>
</body>
</html>

8. Test it with live server

Open your code in the browser, and check if everything works. If the css styles are not showing, then you probably missed a step. You can double check your file structure with the file i used in creation this tutorial TailwindProject

Thank you for reading

if you have any questions, feels free to reach me through twitter @khazifire. And don't forget to follow for more similar content.

How I built my design portfolio website from scratch using Tailwind and Nextjs?

khazifire — Thu, 13 Jan 2022 04:20:37 +0000

Outline:

Introduction
Workflow and Tips
- Planning
- Designing
- Feedback
- Developing
- Deploying
Resources (tools I used)
Conclusion

Introduction

I used my twitter account @khazifire to document the process of my portfolio design and development progress. And a few people reached out to me regarding the design (how I came up with the user interface), technicalities (what tools I used to make and build the portfolio), as well as the timeline (process) of my portfolio.

In this blog, I will briefly explain my design process: starting with the planning (gathering information and brainstorming), the designing (creating user interface designs), the development (implementing the designs), and finally the deployment (publishing the website). In addition, I have also included some design tips which saved my life while I was building my portfolio 😂

Timeline

A popular Swahili proverb says “Haraka haraka haina baraka”, meaning we should always be patient because rushing things may lead to major problems and complications. I was not in a rush while creating the website. I started designing my portfolio website in November 2021 but ended up realizing it was not coming up as I had previously expected. In December 2021, I discarded all that I had done and started from scratch with a clear and fresh mindset.

I would spend a few hours each day working on my portfolio website since I was a bit free during my Christmas break. It took me 3 weeks to complete the entire project; 1 week was required to gather inspiration from other people's portfolio websites, and 2 weeks were spent designing and developing the project, where coding was done.

That being said, let's now talk about how I developed my portfolio and the checklist I made for myself. I believe these steps will help you understand how I approached the entire project. Regardless of how you choose to build your portfolio, these steps and checklists should be applicable.

Workflow (Process)

The Planning

My first step in building my website was on the information I wanted to include on it. This included information found on various pages. The next step involved designing the navigation and Information Architecture (IA). Information Architecture is the process of bringing together different elements to create something understandable (how information is presented).

I spent a couple of days gathering inspiration which prompted me to design a minimal website. Moreover, believe it or not, the reference for the home page was taken from the menu of old video games. After I decided on what to do, I made some rough sketches in Figma, and went on improving them.

The Designing

Typeface:

From my experience, typography is the most important element in designing, and choosing the typeface was the most important aspect while designing my portfolio website. I was looking for a monospace font which can easily be rendered, as well as used for listing code snippets. In addition, I also considered a typeface which has some old vibe feeling and brings us back to the past. After playing around with a few fonts, I ended up choosing Inconsolata.

Color:

For most web designers and front-end developers, choosing color is one of the hardest aspects of designing. But it's not always that complicated, you can decide on colors to use after going through some color inspirations on websites like Coolors, ColorHunt, and many others. For my portfolio website, I chose a minimal design; As a result, all I had to do was find a color that goes well with black.

(Design tip: don't use pure black in your design, use shades of black.) I choose to work with yellow, dark grey, greyish white, and a shade of black.

Icons and Images:

Icons can be used to add more details to information and actions on a website. I aimed to use icons with a style that merges seamlessly with the typography I used on the website. All the icons used in this project were from Fontawesome.

(Design tip: if you create your own icons, make sure they are exported as SVG. When developing it's easier to work with SVG than png, jpeg icons).

In addition, if you include pictures, consider using high quality images in your design, you can use some of the tools such as Unsplash and Pexels to find free, non copyrighted images.

User Interface Design (Putting everything together):

Once I decided on the typeface and color, I started working on the final design which was based on the sketches made while gathering inspirations.

(Design tip: don't finalize your design after making it, finalize it the day after. Doing this helps you avoid making biased decisions).

The Feedback:

The web design I made was minimal and simple. I did not want to design something trendy for my website but rather classic and easy to use. After everything was done, I shared my designs on twitter and forwarded them to a few friends; so that they could look at it and share their thoughts on it.

(Design tip: you can do this in any way that you are comfortable) .

The Development:

The tools and technologies

Ideally, you should choose development tools before designing; because in some cases you may not be able to implement certain designs with some tools. You can either use No-Code tools, such as Webflow, Wix,Weebly; or go the hard and challenging way and build your portfolio website from scratch.

Being a web designer with some interests in frontend development and backend development, I accepted the challenge of developing everything from nothing. Creating the website from scratch was a challenging process yet remarkable and fun. I'm not saying it was easy, but it helped me learn the pain developers face when web designers make complicated designs (user interface).

For the portfolio website, I used NextJs, a Javascript framework, TailwindCss, a utility first CSS framework, and Github, a version control system. NextJs was new to me, it took me a few hours and some research work to get the basics. So why did I use Nextjs: it has good features such as server-side rendering (renders pages on the server), has good documentation, lots of amazing YouTube tutorials (e.g Nextjs tutorial by The Net Ninja). Anyways, enough technical terms, I'm not a backend developer, so make sure to check the official site of Nextjs for a better explanation.

Designing the website took me longer than implementing the design.

(Design tip: designing (planning) before developing (coding) makes life so much easier since you end up coding while having a clear picture in mind).

After the coding was done, I spent a few hours working on adding content, optimizing the SEO (search engine optimization which helps rank your website on search engines), meta description, and finally uploaded the favicon (the small icon that shows next to a website name)

The deployment

I implemented all the necessary elements and fixed some minor errors. I finally hosted my website on Vercel (a platform that can be used to host static websites) and connected it with my custom domain name. Deploying the website was pretty interesting. I drowned in errors but learned my lesson. Before deployment, make sure you have no errors hanging around somewhere in your code.

The Resources (tools and technologies)

I used the following tools in the implementation of my website, and they are all free to use.

Planning: Pen & Paper, Figjam
Timeline
Design: Figma
- Colors: coolors, Colorhunt
- Images: Unsplash
- Typeface: Inconsolata
- Icons: Fontawesome
Development: Nextjs + TailwindCss
Deployment: Github + Vercel

Conclusion

Thank you for spending your time reading this article ♥. If you find this article useful, please consider sharing it on your social networks. I will be publishing more articles in the upcoming days. Please consider following me on Twitter @khazifire for updates. If you have any questions feel free to contact me.

The portfolio website is available here khazifire.com

Better late than never, Happy New Year.

The 4 Best Color Sites on the Internet for web developers

khazifire — Thu, 05 Aug 2021 15:35:01 +0000

If you are a designer/web developer/etc, then you must know the pain of choosing colors.

Color is a power which directly influences the soul. - Wassily Kandinsky

Many people, including myself, find it hard to choose colors. With endless options/various, picking the perfect color to use in your design or presentation is at times overwhelming and may even feel impossible.

But why should you struggle when you can use these 4 free online tools.

1. Coolors:

Coolors is my favorite, allows you to create your color palette or get inspired by thousands of stunning color schemes. It's just perfect

2. My Color :

We all have colors that we like, for example, I love dark tones. This tool generates color palates based on your favorite color, so if you like blue, it will generate colors that go alongside blue.

3. Color Hunt:

Choosing colors is like a hunt, it's either you find the color you like or return empty-handed. This tool helps you discover the perfect palette for your next project and also inspires with new colors pallets each day

4. ColorMind:

This tool uses deep learning to generate color schemes, for example, you can even upload any picture of your choice, and it will generate color palates from that picture

Summary:

Choosing colors is hard, but its not impossible; by using the tools listed above, you will be able to find amazing colors to use in your project, presentations, designs, or anything that involves colors.

Best of luck utilizing these free assets on your future visual communication projects or presentations.

If you enjoyed this post, follow me on on twitter for similar content.