Hi guys! Today I would like to introduce myself briefly. My name is Linh. I am 22 years old. I was born and raised in Gia Lai. Currently, I am in the process of trying, learning, and gaining working experience from my predecessors as an Intern Tester at ABC Software Solutions Company. Today I will tell you a little bit about my work. I feel very fortunate that as soon as I graduated from university, I had a stable job. I used to orient myself to become a Tester but I don't know what fate brought me to Font End programming. I think every job is interesting and so is my job. It was a bit confusing at first, but when I started working on the project, I realized how interesting it was. I used to think that completing an assigned project was very difficult and I couldn't do it, but under the guidance of Mr. Tin, whom I consider a teacher, there was encouragement and a very nice saying, and and i'm always interested that "If you haven't tried it, how do you know it's difficult?". He said that the way I work is to always look forward, where we go wrong we fix it, don't be afraid and don't go back. And since then, I have started to study harder and make more progress through each project of the company.
Firstly, I want to tell you about the work that I did at the beginning of the project. I would like to briefly talk about the language that I usually use to write code.
What is Tailwind CSS?
It is a widget-first CSS framework, it is like Bootstrap and it has built-in classes that we can use. Tailwind CSS has many classes that include different CSS properties and importantly, we can easily extend and create new classes with its own classes.
Tailwind CSS Strengths
The outstanding advantages of Tailwind CSS that cannot be ignored are:
You don't need to write a single line of CSS but just add a class to create the interface, you don't have to have a headache thinking about the class name to set the divs.
Tailwind's class names are easy to remember, and understand, user-friendly and 1 class represents 1 attribute.
Can use flex easily to split Layout.
Improved performance by reducing attribute duplication. There are many plugins that support the removal of unused classes, minimizing the presence in the declaration of the HTML class.
Don't have to worry about fixing in one place or dying in another due to the use of cascading.
The documentation is quite detailed, covering all the detailed usage of the class and showing various customizations.
Tailwind CSS's bad points
Besides the above advantages, it also has the following disadvantages:
- When using tailwind, you will see that the number of classes is extremely large, the number of classes will correspond to the number of properties you want to install. For example, if I want to customize a small radio, the class number can be like this:
I think this is also a minus point that it will take a long time for beginners because they are not familiar with all the classes of tailwind. It takes time to remember the rules and how to write properly.
When using font-size or color, you still have to customize it with your own css.
Of course, it can't have 100% of the css properties, so you need to configure more when you want to use it. I used to spend a lot of time learning to configure and create a "before", "config" like this:
With modern technology and increasingly advanced society, the latest version of tailwind will support it. So you can rest assured to use it, in the future tailwind will upgrade and will fill all the properties of the CSS…
After going through the exercises before entering a project. Almost all of me write simple HTML and CSS, after knowing and approaching tailwind CSS for a while, I find it has many benefits for writing CSS and from there I use it in projects and projects. My first project was named after ABC Software Solutions company.
Link: https://stage.abcsoftwarecompany.com/
Secondly, I would like to tell you about how I had a hard time getting started on the first project.
In this website, almost every module I do, but the one that makes me stay and want to share the most with everyone, the Articles module, it's really simple to see, but when we start doing it, we can see the difference. its complexity. Before we can do it, we need to do a thorough analysis before starting to do it.
To do this module, we need to learn more about Grid a bit, know how to divide columns like rows. To know and understand better, see the tailwind css doc and see the demo code below:
Link: https://tailwindcss.com/docs/grid-template-columns
Code : There are 3 files as below:
- view.njk
- style.scss
- index.js
Finally, I would like to thank you for reading this far. See you in the next Blog and hope you give me feedback to improve in the next Blog.