Why I want to Be a Front-End Developer and How HNG Will Help me Achieve My Goals

Idighekere Udo — Sun, 02 Feb 2025 16:02:28 +0000

"A journey of a thousand miles begins with a single step". My journey began years back when I was introduced to Google's Blogger (blogspot.com) for creating blog articles, after experimenting for few months I transitioned to using Wordpress and also purchasing my first domain and having a site. The issue I've always had then was trying to configure a theme to make the site to fit my taste. I decided to learn HTML and CSS where I was now able to inspect my Wordpress site grab the classes and ids and make the changes to the styling and applying it to Theme Custom Stylings.

I still felt a bit of limitation while using it because I had no knowledge of PHP which would have enabled me to create custom Wordpress themes to my taste. I decided to learn Javascript to complement the knowledge I had. I was now able to build interactive user interfaces just by writing codes.
I proceeded to learning React JS, a framework of Javascript and built some projects with it. On joining HNG11 in 2024, I got to learn NextJS and Typescript and using Firebase which enabled me to create my first fullstack project.

I chose frontend development because I liked creating intuitive user interfaces and experience. Learning React Native has also enabled me to use my knowledge of Javascript and React to build cross-platform applications.

Joining HNG will enable me to work on amazing real-life projects, collaborating with backend and designers, staying up to date with the evolving technologies in the ecosystem. The internship will also help me position myself for future job opportunities.

Tailwind vs CSS

Idighekere Udo — Thu, 27 Jun 2024 22:40:00 +0000

It can be so tiring to write multiple lines of CSS styling in our web apps. One of the challenges I always face in using HTML and CSS is usually coming up with generic class names for my elements, but Tailwind CSS or Bootstrap comes in as an aid. The debate between which is best always springs up amongst developers and my peers at HNG usually try to convince me that Bootstrap is best, but I still take Tailwind CSS.

This era of web development has evolved that frameworks and libraries are being utilized by developers to make codes much simplified and easier to be used. After the reading this article, you should be able to: know what the frameworks are: get the differences & similarities between Tailwind CSS and Bootstrap; know which one to go for; and actually get know how and where to get started using them.

When should I start using CSS Frameworks?

As a beginner, you can start using CSS frameworks when you know all the CSS required to build a good-looking user interface.
You should be able to use CSS to build responsive layouts that support different screen sizes, some basic flexible layouts, use grid layouts etc.
You shouldn't be in a haste to learn a CSS framework when you don't have a solid foundation of CSS.

Tailwind 🆚 Bootstrap

If you have checked the official documentation of the above frameworks, you will get to know more about them.
If you haven't, I got you.

Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. It is packed with classes flex, pt-4, text-center and rotate-90 etc which simply means you don't have to think of class names for your html elements and not also writing long css stylings

Without Tailwind

//HTML
<button class="subscribe-button">Subscribe </button>

//CSS
.subscribe-button {
   padding-right: 1rem;
   padding-left: 1rem;
}

With tailwind

//HTML
<button class="px-4">Subscribe </button>

You can see that writing just px-4 in the class attribute in Tailwindcss is equivalent to writing the class name and padding-right: 1rem; & padding-left: 1rem; in CSS

Bootstrap

Bootstrap is a UI (User Interface) Toolkit, which means it has pre-built components for buttons, modal, accordian, navbar, footers etc.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Result.

You can see that you don't need to write much styling for a button you will just need to specify what kind of button it is.

Tailwind & Bootstrap Differences

Application created using Tailwind are always flexible and unique whereas that of Bootstrap are generally identical because it already has in-built templates for websites.
Tailwind offers unique utility-first classes while Bootstrap offers ready-made themes and templates.

Tailwind & Bootstrap Similarities

Less CSS codes
The usage of the both frameworks makes the developer not to worry about class names for the elements.
It saves the developer's time trying to write css properties.
You might have to always run back to the documentation to get the setup procedure and correct class name for what you want to achieve.

Which one should I choose?

There's no better answer to which is better or the best,it all lies on developer's preference.
If you'll need a website ready within a short period of time, Bootstrap is the best fit as it has pre-built components like sidebars, buttons, navbars, footers, cards, accordian, alert, spinner etc.
If you'll need your site to look unique and flexible (being able to design it to your taste), then Tailwind is the best fit.
Most developers often say that Tailwindcss makes code ugly to be read because of the numerous utility classes you will have to write to achieve your design, so if you happen to agree with them, then you should consider using Bootstrap.

Installation

Both frameworks require certain procedures to be followed before you can start using them. You'll have to head over to Tailwind CSS doc & Bootstrap doc for the setup procedure. I wrote this article to onboarding you to the frameworks.

Conclusion

In this article, you have learnt when you can start using any of the framework, how they differ, what they share in common, which one to choose.
Enroll as a frontend developer at HNG to gain more experience.