DEV Community: sudha

Bootstrap v/s Tailwind CSS: Which Front-End Framework is Right for You?

sudha — Tue, 07 Nov 2023 18:35:24 +0000

Front-end development has seen a surge in popularity over the years, with numerous tools and frameworks available to help developers build responsive, visually appealing websites. Among the most well-known front-end frameworks are Bootstrap and Tailwind CSS, each with its own set of features, advantages, and use cases.
Let's get a brief on those to get a the right for your next project!

Bootstrap: The Classic Choice
Bootstrap Overview:

Bootstrap is one of the most widely used front-end frameworks, originally created by Twitter.
It offers a collection of pre-designed components and a responsive grid system.
Bootstrap follows a class-based approach, where you add classes to HTML elements to style them.

Advantages of Bootstrap:

Rapid Development: Bootstrap's pre-built components and responsive grid system allow for quick development.
Large Community: With a massive community and extensive documentation, finding solutions and resources is easy.
Consistency: Bootstrap enforces a consistent design language, making it suitable for projects with defined style requirements.

Disadvantages of Bootstrap:

Customization Challenges: Customizing the default Bootstrap theme can be complex.
Heavier CSS: Bootstrap's CSS can be heavy, resulting in larger file sizes if not optimized.
Learning Curve: Mastery of Bootstrap's classes and components can take some time.

Tailwind CSS: The Utility-First Approach
Tailwind CSS Overview:

Tailwind CSS is a utility-first CSS framework _that provides a set of utility classes.
It encourages the creation of _custom designs by composing utility classes directly in HTML.
It is highly configurable, allowing you to create a tailored design system.

Advantages of Tailwind CSS:

Highly Customizable: Tailwind CSS empowers developers to craft their own designs with ease.
Small File Sizes: It allows for minimal, optimized CSS in the final build.
Rapid Prototyping: Quickly create prototypes and iterate on designs without writing custom CSS.

Disadvantages of Tailwind CSS:

Learning Curve: New developers may find the utility-first approach challenging initially.
Lack of Built-in Components: While it provides utility classes, it doesn't include pre-designed components like Bootstrap.
Customization Overhead: Overly customizing every aspect can be time-consuming.

Which Framework Should You Choose?
The choice between Bootstrap and Tailwind CSS depends on your specific project requirements, team experience, and personal preferences.

Choose Bootstrap if:

You need a well-defined and consistent design language.
Rapid development with a wide range of pre-built components is crucial.
You prefer a more traditional class-based approach to styling.

Choose Tailwind CSS if:

You want complete control over the design and enjoy customization.
Smaller CSS file sizes are essential for your project.
You're comfortable with a utility-first approach to styling.
In some cases, a hybrid approach can work well, using Bootstrap for pre-built components and Tailwind CSS for custom styles.

Conclusion
Bootstrap and Tailwind CSS are both powerful front-end frameworks with unique strengths. Your choice should align with the needs of your project, your development team's familiarity, and your preferred development approach. By carefully considering the advantages and disadvantages of each framework, you can make an informed decision to create stunning web applications that meet your goals.

Until next time.... Happy Coding!!!

HTML & CSS - 101

sudha — Thu, 19 Oct 2023 17:26:46 +0000

When we talk about web-dev , At the very least we talk about websites right? Generally talking about 3 things at the base....

1. HTML(Hypertext Markup Language)
2. CSS(Cascading Style Sheet)
3. JAVASCRIPT

For to simplify in layman terms :

In a website HTML responsible for the contents of your website.So if a website was a house, then the HTML would be the actual bricks of the house._Similarly, the HTML file contains the content of your website, like the text content or the images or buttons or links.
_CSS is responsible for styling your website like the color of the walls or the shape of your door.

The CSS file determines how your website will look.
It targets all the content in your website that you created using HTML.So you could use CSS to make a button red and have rounded corners and the button text to have a particular
font.

HTML + CSS = BFFs

You can have HTML without CSS (that would be really ugly!), but you can’t have CSS without HTML.
CSS is applied to the HTML.

3.HTML is the content of a webpage. So think of it like a Word document where you have all of your content (headings, subheadings, paragraphs, bullet points, etc).

CSS is the style or appearance of that content. So CSS is kind of like the editor that tells what color, font and size each bit of text should be and also where to place it. We can also use CSS to actually place things around the page.

5.HTML and CSS should always be kept in separate files. While there are ways to include CSS in an HTML document, the best practice is to keep it in its own separate document that the HTML document links to.

Here's an example of what BFF's looks like

1.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- This link tag is used to link html file with css file -->
    <link rel="stylesheet" href="index.css"
    <title></title>
  </head>
  <body>
    <!--Nav tag is used here for navigation bar at top right corner -->
    <nav>
      <div id="navdiv">
        <a href="https://www.google.com/gmail/about/#" class="c">Gmail</a>
        <a href="https://www.google.co.in/imghp?hl=en&tab=wi&ogbl" class="c">Images</a>
        <div><img src="menu.png"></div>
        <div><button type="submit" name="button">Sign In</button></div>
      </div>
    </nav>
    <!--End of navigation -->
    <!-- Main body of google -->
    <main>
      <center>
        <img src="google.png" width="20%" height="5%" id="googleimg">
        <!-- Search bar -->
        <div>
          <div id="maindiv">
            <span><img src="search.png"></span>
            <span id="inputspan"><input type="text" name="search"></span>
            <span><img src="mic.png"></span>
          </div>
        </div>
        <!--Buttons -->
        <section>
          <div><button type="submit">Google Search</button></div>
          <div><button type="submit">I'm feeling lucky</button></div>
        </section>
        <div><a href="">Work, learn and run your bussiness from home</a></div>
        <div id="Bottomdiv">
          <span>Google offered in:</span>
          <ul>
            <li><a href="">हिन्द</a>ी</li>
            <li><a href="">বাংলা</a></li>
            <li><a href="">తెలుగు</a></li>
            <li><a href="">मराठी</a></li>
            <li><a href="">தமிழ்</a></li>
            <li><a href="">ગુજરાતી</a></li>
            <li><a href="">ಕನ್ನಡ</a></li>
            <li><a href="">മലയാളം</a></li>
            <li><a href="">ਪੰਜਾਬੀ</a></li>
          </ul>
        </div>
      </center>
    </main>
  </body>
</html>

CSS

* Styling of navigation bar */
#navdiv{
  display:flex;
  width:17%;
  margin-left: 82%;
  justify-content: space-around;
  margin-top: 1%;
  height:35px;
}
nav img{
  margin-top: 5px;
}
#googleimg{
  margin-top: 100px;
}
/* Removing underline from links*/
a{
  margin-top: 8px;
  text-decoration: none;
}
button{
  border-radius: 3px;
  height:100%;
  padding:5px 12px;
  background-color: #4C87E1 ;
  color:white;
  border:none;
}
/* setting up size and border stle of search bar*/
#maindiv{
width:35%;
border-radius: 50px;
display: flex;
height:40px;
border:1px solid lightgrey;
}
#inputspan{
  width:80%;
}
span{
  vertical-align: top;
}
span:first-child{
  width:10%;
  border-radius: 50px;
  margin-top: 7px;
}
span:last-child{
  width:10%;
  border-radius: 50px;
  margin-top: 7px;
}
input{
  height:100%;
  width:100%;
  border: none;
  padding:0px;
}
section{
  display: flex;
  margin-top: 2%;
  width:23%;
  justify-content: space-around;
  margin-bottom: 2%;
}
section button{
  padding:10px 12px;
  background-color: lightgrey;
  color:black;
}
ul{
  display: flex;
  width: 30%;
  padding-left: 0px;
  list-style: none;
  justify-content: space-around;
  margin: 6px;
}
#Bottomdiv{
  display:flex;
  font-size: 12px;
  margin-top: 3%;
}
#Bottomdiv span{
  width:7%;
  margin-left: 31%;
}
/*When hovered*/
a:hover{
  text-decoration: underline;
}
button:hover{
  border: 1px solid gray;
}

And Voila! you get this....

That’s when you either say “Cool! I’ve always wanted to learn HTML and CSS!” or “Huh? This just got way too complicated.”

Now again there's more to it,JS(javascript to make the house a home , makes it an user interface from static to dynamic webpage)

Now as you have build your website or any other Front-end
web-dev project , you need to learn how to use
Git and GitHub making a repository then pushing your project in main to commit ,then to publish.
If you think now that "Are we done?"
No, we have GitHub pages to launch your website in real world and then APIs to fetch etc etc.Just so much of it

Next few days I'll be going all hands to write exact CSS and HTML . I couldn't even fit the basics for both of CSS and HTML.So I'll be going for separate articles.

Till then, Happy Learning!!!

Art of Learning

sudha — Sun, 15 Oct 2023 17:24:46 +0000

Someone who has recently entered the field of computer science may be new to web development, problem solving, dev-ops, AI, and so on. A beginner can become confused about which Udemy course to purchase, which YouTube channel to subscribe to, and which language to learn. And if one day you decide to create your first project or website (mine was personal portfolio), holy cow, you could decide to first become proficient in CSS and HTML before getting started.
Since nobody wants to code while looking like a fool.
And despite of taking a ton of tutorials and courses, you still won't be able to decide what to do or where to begin.

I just started working on my first project, a vanilla portfolio, a few days ago.The most basic ones out there, but guess what? The YouTube tutorial was only 2 hours long, and it took me 3 days to complete it .
I immediately began to go into the self doubt spiral. However, I noticed something very strange: even though I appeared to be an absolute idiot during this, every 10–15 lines of codes later, my mind knew what to do next, commonly known as Pattern recognition which is quite important for your programming journey later on.
Is my first project a failure? Of course it's a failure, but as I go on to my next endeavor, I realized one thing:

"You learn to do the job by doing the job"

So don't worry, you'll soon be able to do it in two hours, just like your favorite coder did. If you can't figure it out right away, keep going, and even if you don't feel prepared, start.

Coming up next-
"How should your journey as a Web-dev look like?"

GIT - It can be fun.

sudha — Sun, 08 Oct 2023 15:10:09 +0000

It appears to be all geeky, terrifyingly heavy coding, but if I explained what it was, you may believe that anyone could learn it.So in my journey of web-dev my 1st task was to learn Git.
Git makes collaboration easy. Git a powerful VCS(Version Code Base) to manage the codebase by many companies, developers, students making projects. Meaning making and maintaing different versions of the same code base.

Let's Recap....

Git started with the Linux kernel, and then they started using DVCS called Bitkeeper(2002).Then since 2005 it became paid version so to escape this Git was built.Git is a popular version control system(VCS) since then.

It is simple, fast, multiple branches(come to that later), supports linux/terminal/vs and importantly FREE.
How it got its name? called as 'stupid content tracker'. So they got a name which was lazy and also not a UNIX command.
GIT- ‘global information tracker’

How does it work?

Before knowing any of it - make sure git package is downloaded in your system
[https://git-scm.com/downloads]

Local directory:mkdir filename->cd filename(to access in)
create git-init and voila ! .git is created and now lets divide it
```
 a.the working directory
 b.the staging area
 c.local repo
```
Create a file(example-index.html)
git status to check if the file is part of the repo.
Now Git is aware of the file, but has not added it to our repository!
git add index.html now it is staged *!
Now file is added to the Staging Environment, and we are ready to do our first commit,
*(git commit -m "First release of Hello World!")
git log( to view the history of commits for a repository).
git help(if u get stuck in the lines and codes)
git branch (branch name)

let's elaborate

a.Branches allow you to work on different parts of a project without impacting the main branch.

b.When the work is complete, a branch can be merged with the main project.

c.You can even switch between branches and work on different projects without them interfering with each other.

In other words faster and lighter***

git checkout master(switching between branches)
a. git checkout -b emergency-fix(emergency branch fro our imaginary error in this case!!)
git merge emergency-fix(want to merge ..no problem).

There you go....you know more than 70 percent of population in world already and you are already among those *100 million developers. *

Wasn't that easy?
But of course it's just an introduction, there's a lot more to go in depth and learn about it and it will get easier with time for you and for me as well, so don't sweat.

Thanks Mr. Torvalds for git.
That is all. Remember to always have*fun and create.*

Code Calling

sudha — Sun, 08 Oct 2023 11:07:46 +0000

For those who are reading it , this piece isn't about technology, not yet at least . It's day 4 of my journey into the world of tech, computers, coding, web-dev , programming , DSA etc.
That's right , I'm a newbie, a beginner but you got to start somewhere. Although I have my bachelor's degree in computer science and engineering and even backed a good job ,but my heart's desire was somewhere else ;
I wanted to join the Armed Forces, so I dedicated my heart and mind ,left my job and walked towards it ,against all odds - family , background, opportunities. Studied , worked hard physically and mentally for the dream I had , until 1 month ago; Due to Cubitus valgus,( a bone condition in which your elbows bend more than is necessary) I was declared unfit and permanently dismissed, which explains why I struggled in physical training.I was disappointed and feeling overwhelmed and confused because I had worked so hard for this for a whole year and had given it everything I had.

I took a long breath and a break for 20 days to figure out what I want .

"Life gives you lemons " fitted so right. Then I began looking for what I wanted—finance, technology, whatever.
Is it too late for me to begin my career in this profession now that the employment market is weak after reading on Quora about how people are having trouble finding work? My hopes weren't high because the majority of responses were negative.

Up until lately, I didn't read blogs, but I did come across one written by Jack. I requested him to be my mentor and guide me in tech world out of desperation. Then I questioned why anyone would help me or even reply to my email, but to my surprise, he did so very quickly. To make a short tale shorter, he accepted and first requested that I start blogging about the things I learn and study.
Now that I've started to take an interest in this job field and even enjoy learning new things, I'm feeling a little less scared and a little more confident about myself in this journey. After only six days, I've already stopped worrying about the "Lemons" and i'm motivated to learn and work harder. This is my first blog, and I'll continue to write about the new things i explore as I work towards being a software engineer.

Coming up next- GIT