DEV Community: Shubhi✨

How to ask for help, the right way

Shubhi✨ — Tue, 14 Mar 2023 18:28:16 +0000

If you are a developer who needs help writing a blog, here are some tips on how to ask for help:

🔶 Be specific:

When asking for help, be specific about what you need help with. Are you struggling with coming up with ideas for your blog? Are you having trouble organizing your thoughts? Do you need help with the technical aspects of writing a blog? The more specific you are about your needs, the easier it will be for others to offer you the right kind of assistance.

🔶 Reach out to your network:

Reach out to your friends, colleagues, or fellow developers who have experience in writing blogs. You can also join online communities or forums where you can connect with other bloggers and ask for their advice.

🔶 Explain your situation:

When asking for help, explain your situation and why you need assistance. Are you new to blogging? Do you have a tight deadline? Are you struggling with a particular aspect of writing? Being transparent about your situation can help others understand your needs better and offer you the right kind of help.

🔶 Provide context:

If you have already started writing your blog, share it with those you are asking for help. This will provide context and help them understand your writing style and the direction you are taking your blog in.

🔶 Show appreciation:

Lastly, don't forget to show appreciation to those who offer their help. Whether it's a thank you note or a small gift, showing gratitude can go a long way in building lasting relationships with those who have helped you.

Overall, asking for help when you need it is a sign of strength, not weakness. So don't hesitate to reach out and ask for help if you need it.

Behind the Scenes: A Deep Dive into Back-End Development

Shubhi✨ — Tue, 24 Jan 2023 18:23:04 +0000

Back-end development is an essential aspect of web development that plays a crucial role in the functionality of a website or web application.

Front end: the things you can see as a user.
Backend: everything else.

So in order to talk about backend development, let's revisit what front-end development is, it's the practice of creating user interfaces that are flexible and make it easy for a user to interact with data.

The back-end refers to the server-side of a website, which is responsible for handling data, performing business logic, and interacting with databases and APIs.

Server-side scripting 🌐

One of the most important topics in back-end development is server-side scripting. Server-side scripting is the process of writing code that runs on the server and generates dynamic content for the website. Some popular server-side scripting languages include PHP, Ruby, Python, and Node.js. These languages allow developers to access databases, perform calculations, and generate HTML or JSON to send to the client.

Databases 💾

Another important topic in back-end development is databases. Databases are used to store and retrieve data for a website or application. They can be used to store user information, content, and other data. There are many different types of databases, including SQL databases like MySQL and PostgreSQL, and NoSQL databases like MongoDB and Cassandra. Each type has its own advantages and use cases, and it is important for back-end developers to understand how to interact with them.

Application Programming Interfaces (APIs) ⚙️

Finally, Application Programming Interfaces (APIs) are another critical topic in back-end development. APIs allow different systems to communicate with each other, and they are often used to connect a website or application to external services, such as social media platforms, payment processors, and other third-party services. Back-end developers need to understand how to create and consume APIs, as well as how to secure them to protect sensitive data.

Backend development is a practice of creating those plugs into the data, oftentimes called an application program interface or API. I honestly like to think of the backend as like a panel of plugs, where each plug returns a massaged subset of the data, and the panel itself hides away all the complexity of fetching from and updating to the database. Unlike front-end development, back-end isn't specific to any one platform, in fact it serves as more like a foundation that supports whatever platforms sit on top of it.

So what's in the stack?📚

Well usually it involves two types of languages: one is a server-side programming language that helps build the API itself - commonly used are Python Java Ruby PHP and javascript.
And the second is a SQL language to actually fetch the data from the database. And what are the important factors and skills for working in back-end development? One is to have the architectural skills for making well-organized, extensible, and testable code.

A big part of back-end is organizing logic and data ,so those skills allow for writing code with speed and quality. And the second is to communicate clearly with front-end developers - there's a myth that back-end developers don't need to know anything about users (which is wrong by the way). Back-end developers are a big part of allowing users do what they need to do to get done, so it's a joint effort between front-end developers and back-end developers to write code.

Conclusion 🎁

In conclusion, back-end development is an essential part of web development that deals with the server-side of a website or application. Back-end developers are responsible for writing server-side code, interacting with databases, and creating and consuming APIs. A strong understanding of server-side scripting, databases, and APIs is crucial for any back-end developer looking to build robust and secure web applications.

Thank you for reading :), To learn more, check out my other blogs. If you liked this article, consider following me on Dev.to for my latest publications. You can reach out to me on Twitter.

Become a Frontend web developer in 2023 - A step by step guide

Shubhi✨ — Thu, 05 Jan 2023 08:52:58 +0000

This is the roadmap that I wish I had when I was starting out to become a frontend developer I came up with this roadmap which helps with the goal to becoming an all-rounded developer.
Lets dive in.

Who is a front-end developer??
okay, now who are backend developers?
So how to become a front-end developer??
- Develop your skills
HTML
CSS
JavaScript
- Create portfolio/craft your case study
- Put yourself out there
what else do you need to do?
- Apply for jobs
- Resources
- Conclusion

Know what you are getting into

Don't rush into frontend developer just because it's trending or because your friend tells you that you'll get a higher pay if you become a FE developer instead understand what this profession is all about

-->why do companies hire developers??
-->what problems are you expected to solve??
-->what are your responsibilities as a developer??

Who is a front-end developer??

Whether you enjoy using a website or are super prepared to click the fastest button out of it is partly a result of the design of the website, behind the immersive experience you get is a programmer we professionally refer to as a front-end developer. A front-end developer is responsible for building the layout of a website from scratch including various icons and toggles that users rely on to get a service done. They work in sync with UI UX designers and back-end developers with a mandate to ensure that web pages are purpose-built and alluring.

okay, now who are backend developers?

Back-end developers do the exact opposite of frontenders do as a programmer in the field you are expected to implement all the background stuff like development of the infrastructure, database and Communications etc. While front-end developers major in what a consumer sees, back-end guys design and observe supporting elements.

Full stack developers on the other hand mastered both Specialties and can crisscross their separate mechanics.

So how to become a front-end developer??

The first thing to do is learn the Three core languages front-end development HTML CSS JavaScript these languages are foundational elements of a website, and you can learn them by leveraging countless online resources.

Develop your skills

HTML

Basic but indispensable languages hypertext markup language or HTML certainly one using it you can design the skeletal structure of web pages it works in the placement of text page components like paragraphs navigation bars headings sections and so on. It is also Central to the addition of images videos and other multimedia however, because it is quite an Elementary language has to be supplemented by CSS and JavaScript for full effect.

CSS

Short for cascading style sheets CSS is the next layer in the formation of an aesthetic front end you basically use to include colors fonts and layout to your web pages. This language will also enable you to configure websites on different devices such as phones, and personal computers can present content in separate but adapted styles although we frequently mention it in the same breath as HTML and JavaScript it can work independently

you can use it for site maintenance and the distribution of style across web pages one way to enhance your skills with this language is by learning how it interacts with frameworks like bootstrap tailwind CSS.

JavaScript

The Third Leg of the web development tripod is JavaScript it helps you customize your page so that it becomes more visually engaging beyond the less advanced inclusion of HTML and CSS. JavaScript allows you to insert animations graphical effects Dynamic Styles constantly updated Maps a variety of other exciting stuff. JavaScript there are collections of libraries and Frameworks you want to learn to but before you get confused by our interchangeable terms library and framework both share many similarities and serve some slightly different purposes.

The library enables you to add specific functionalities to your code a framework on the other hand is pre-written code that enables you to skip the rudimentary trial-and-error process of writing code for routine areas of your project, in essence, both differ in terms of what a developer can include. having said that jQuery is a JavaScript library that enables you to add custom elements to your projects framework side of things are multiple tools that apply to different cases in reality though you will mostly need a few Angular, React, Ember and Vue are some of the Frameworks.

Create portfolio/craft your case study

Create a portfolio also do not want to miss out on selling yourself at every opportunity one way to do this is by creating a portfolio where you can present the stuff you created to others for criticism and invent newer tricks from there not every project you include at the early stages of your front-end Development Career must be client project for emphasis the focus on cultivating your technical skill this does not mean you should exclude developing soft skills as well as you become better at communication and implementation.

Put yourself out there

Now that you're on track it's time to get more exposure you can connect with like-minded people joining global or local communities and tech products or design it helps you get to know people and learn from the experiences. I also highly encourage you to document your learnings as I suggest linkedin or twitter.
Your learnings can be documented in a written form by documenting your learnings it increases your chances of being seen by recruiters or companies.

what else do you need to do?

Practice well first thing to intensively practice coding you quickly become a pro by improving your skills consistently the work you put into familiarizing the easier it comes to you and the be the jobs you can land connected to this is the need to stay on top of emerging technologies to keep your techniques refined and up to date you can access tons of online developer communities where you meet new coders share ideas.

Apply for jobs

Apply for jobs now that you've got your case studies ready you've already talked to people in the industry i think it's time for you to start creating your portfolio and your resume and start applying for jobs.
Refine your resume at this stage and double check your case study and portfolio for any careless mistakes make sure all your links really work and apply for jobs include a cover letter if you have to.

Resources

1.Udacity
2.Scrimba
3.MDN
4.FreeCodeCamp
5.Kevin Powell, YouTube
6.Flex Box Adventure
7.CSSBattle
8.Frontend Mentor
9.Udemy

Conclusion

Do you think there are other strategies and inspiring front-end developer can apply what other skills should be learned for hiring purposes, leave your thoughts in the comments section.
Thank you for reading :), To learn more, check out my other blogs. If you liked this article, consider following me on Dev.to for my latest publications. You can reach out to me on Twitter,

Breaking out of tutorial hell

Shubhi✨ — Wed, 21 Dec 2022 09:07:04 +0000

In this article I want to address escaping tutorial hell and if you haven't heard of that expression before it is basically where you're learning to code and you become super dependent on YouTube tutorials or courses and when you try to create your project you don't even know where to start.

Why tutorials are bad 👎
Don't copy code 🙅
Contributing to open source 😊
Algorithm challenges 😊
Use Documentation 🗺️
Start building 💻

Why tutorials are bad 👎

It slows you down and more importantly, it gives no understanding of how important different pieces are of no tutorial can teach you which part of the framework or language are the ones that you are going to use there is no way for you to prioritize for yourself for which things you need to learn. and learning for sake of learning rather than for sake of building. the harsh reality is there will always be more to learn. You should know enough of things so that you focus on that the sooner you can away with the tutorial and into building the better it will help you significantly

Don't copy code 🙅

Problem with tutorial hell: It gives you a false sense of progress.

I have seen beginners building to-do lists and projects and copying the exact code from the tutorial, it's not about building a to-do list or any project. It's about what you are learning while you're building it so.

Write down the concepts Learn how to connect to a database Learn abstraction layer Learn how to structure the application Learn how to create UI and connect UI to the backend Learn to host

So, there are a lot of valuable things you're gonna learn from to-do list app

Contributing to open source 😊

GitHub is a treasure house for developers. We improve by learning from different codes, example taking code reference from your fav repo and looking at the code and how the developer used methods/functions or any algorithm implemented by them gives you a solid idea of some of the best practices

Open source is an underrated way to escape tutorial hell

Algorithm challenges 😊

Another thing I would suggest is algorithm and challenges and it might not seem productive but I have realized that they are just push-ups for your mind, it helps you solve the problem faster it helps you learn the syntax and learn different methods that you might have not to know about and just it makes you a better programmer which in turn allows you to be more productive and do things faster.

Use Documentation 🗺️

Courses outdated very quickly, you should also use resources specifically documentation. Frameworks and languages they update and the documentation are more accurate. Some documentation sucks but most of them are up to date.

Start building 💻

Start working, it's easier said than done but when you start working you will be pulled out of the tutorial hell whether you like it or not. there's no tutorial to fall and you have to figure it out. Building projects on your own prepare you for that real-world experience as a programmer. The goal is never to stop watching tutorials it's just to make them more efficient in your learning

Conclusion 🎁

As a self-taught developer, I have been stuck in tutorial hell more than once. I know how scary and intimidating it can be to leave the safety of the step-by-step instructions and jump head-first into building something from scratch. But, frankly, if the goal is to be a developer, there is simply no other choice!

I genuinely have this feeling that you're gonna come out of this loop.

Thank you for reading :), To learn more, check out my other blogs. If you liked this article, consider following me on Dev.to for my latest publications. You can reach out to me on Twitter,Linkedin and Github.

Keep learning! Keep coding!! 💛

How to style a button using Tailwind CSS

Shubhi✨ — Wed, 14 Dec 2022 17:43:52 +0000

In this article I will show you how to build and use a button component for quick user actions using Tailwind CSS.

Before that, I will introduce you about Tailwind CSS.

Basic usage

Tailwind CSS is the most popular open-source CSS framework with a utility-first methodology for the class names, meaning that instead of an OOCSSS approach like btn and btn-lg you will instead use utility classes for paddings, margins, colors, and more.

Getting started

First of all, you need to make sure that you have Tailwind CSS installed in your project.

Install Tailwind CSS

You can either follow the quickstart guide or follow the next steps to install Tailwind CSS:

Install tailwindcss via NPM:

npm install -D tailwindcss
npx tailwindcss init

Configure the template paths inside the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

</main>

Create a new src/input.css file and add the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;

Great! Now that you have Tailwind CSS installed we can proceed further.

Guide

First thing I want to give it a full width and I want the height to be the height of the screen and then I also want to align all this to be center so we'll say flex item center justify center

let's go ahead and just create our button and also I like to keep the text inside of a span as well and i'll just go ahead and give this a class of relative just so it's not just hanging there as some text the width to go from 0 to 100 so we'll say group hover w full and we also want to add little bit of animation so we'll say transition all i like to use the ease out and then we'll say duration of 250ms. so now let's go ahead and hover the button let's go ahead and give us a different background than amber maybe let's say 400

So you can see the magic behind the overflow hidden because as we set overflow hidden and we hover over the button we now have this nice animation effect

Code

<main class="flex min-h-screen w-full items-center justify-center bg-gray-100">
  <!-- component -->
  <button class="group relative h-12 w-48 overflow-hidden rounded-lg bg-white text-lg shadow">
    <div class="absolute inset-0 w-3 bg-amber-400 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
    <span class="relative text-black group-hover:text-white">Hover me!</span>
  </button>
</main>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Flex Direction, Hackathons and Flex Wrap.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

Keep learning! Keep coding!! 💛

Resume Tips That Will Get You Hired-#1

Shubhi✨ — Mon, 12 Dec 2022 12:26:37 +0000

Resume👩‍💻👨‍💻

Getting your resume right is crucial to land more interviews, thereby increasing your chances of getting hired.

A one-page resume with no smaller than 10 to 11 font-size is highly encouraged, which means you cannot just spill information.

Lets start by filling in these 5 important sections of your resume.

Header📹

Add your name, contact number, email, and address.
A photograph is NOT needed but you may add. Remember content is more important than aesthetics for a software engineering role!
Add links to your portfolios – Website, LinkedIn, Github, etc.

Qualification 👀

List your university name, degree, and timeline.
Add your GPA
Include your coursework only when it’s very specific to the job niche. In most cases, you should save that space – maybe use it to include another project.

Technical Skills

Keep this section ~ 60% focused on the job niche, and rest can be generic.
List your programming skills. Try to include some of the widely used and popular languages like Java/C#, Python, Javascript, C/C++ – only if you know it!
List industry-standard libraries/frameworks that you are familiar with – OpenCV, React, Tensorflow, RxJava, etc.
List popular development/SDL tools that you have used – IntelliJ, Matlab, Tableau, XCode, Jira, SVN(s), etc.
Optionally, list the cloud services (PaaS, IaaS) – AWS, OpenShift, Azure, Heroku, etc.

Work Experience

Starting with the most recent experience, list all your internships and full-time jobs (typically not more than 5).
Include your job title/role and timeline.
Describe your key tasks by creating ~ 2-3 bullet points for each company instead of adding a very long paragraph.

Projects

List all projects that are most relevant to the job description.
Add project name and a brief summary.
Add “Hackathons” section to highlight my top hackathon projects and wins – companies often dig your passion to build projects outside your academics. But, you can also add them under the “Projects” section.
A section for “Objective“ is NOT needed – it will just waste valuable space. Instead, attach a cover letter to your application.

Best practices🙌

Know Your Niche
Highlight Project(s) That Stand Out From Competition
Keep It Crisp
Add Measurable Data To Your Projects Summary
Add Keywords
Add Links To Important Portfolios
Formatting & Grammar
Proofread Your Resume
Iterate On Your Resume
Make Multiple Copies If Needed
Refer To Successful Samples

Quick highlight of DOs and DONTs:

✅ one page resume that pops out
✅ highlight personal projects outside academics
✅ use bullet points
✅ add keywords
✅ add links to portfolios especially LinkedIn & Github
✅ proofread!

❌ long paragraphs
❌ spelling and formatting mistakes
❌ spamming keywords
❌ highlighting too many words or sentences

Conclusion 🎁

Software engineers are in demand – thanks to the digitalization of all sectors and continued technological revolution.

But, just because you hold a Computer Science (or related degree) and know how to design a software system or write a recommendation engine, the job won’t just walk up to you.

You will need a killer software engineer resume to stand out amongst your competitors! Hopefully, you will have one now!

In case you have any further queries pertaining to the Resume building tips above, please drop them in the comments section below and I’ll try to respond ASAP.

Thank you for reading :), To learn more, check out my other blogs.
If you liked this article, consider following me on Dev.to for my latest publications. You can reachout to me on Twitter,Linkedin and Github.

Keep learning! Keep coding!! 💛

Tailwind CSS tutorial #33: Border Radius

Shubhi✨ — Sun, 11 Dec 2022 15:29:16 +0000

In the article, we will go into detail on how to use Border Radius.

Border Radius

Basic usage

Rounded corners

Use utilities like .rounded-sm, .rounded, or .rounded-lg to apply different border radius sizes to an element.

Code

<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="rounded-none border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-sm border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-md border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-lg border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-xl border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-2xl border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-3xl border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet<br>the Robot</div>
      <div class="rounded-full border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet<br>the Robot</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">border-radius</span>: rem</div>
    </div>
    <div class="ml-5 text-right">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">rounded(-SID)(-AMT)</div>
      <div class="text-xs font-mono text-gray-500"><b class="text-black mt-3 inline-block">SID</b><br>t tl r tr b br l bl</div>
      <div class="text-xs font-mono text-gray-500"><b class="text-black mt-3 inline-block">AMT</b><br>(.25) none-0  full-&infin;<br>sm-.125 md-.375 lg-.5<br>xl-.75 2xl-1 3xl-1.5</div>
    </div>
  </li>  
</ul>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Keep learning! Keep coding!! 💛

Tailwind CSS tutorial #32: Screen Readers

Shubhi✨ — Sat, 10 Dec 2022 14:51:16 +0000

In the article, we will go into detail on how to use Screen Readers.

Screen Readers

Format

sr-only

Tailwind Class	CSS Property
`sr-only`	`{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}`
`not-sr-only`	`{position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;}`

Basic usage

Screen-reader-only elements

Use sr-only to hide an element visually without hiding it from screen readers:

Undoing screen-reader-only elements

Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

Code

<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <div class="flex flex-col items-center justify-center">
        <div class="w-1/2">
          <img class="w-24" src="http://pixelprowess.com/i/powship.svg" alt="POW Logo">
          <p class="sr-only lg:not-sr-only text-gray-500 text-2xl text-blue-300 leading-none">Lorem ipsum dolor sit amet consectetur adipisicing elit impedit officia fugiat mollitia alias ex quas modi.</p>
          <p>Voluptatibus ad distinctio, modi sed praesentium nobis quas non aperiam, recusandae illum, animi sit labore cumque in obcaecati cum laboriosam voluptas consectetur. Voluptate voluptates porro aliquid ut maiores, quidem rem!</p>
        </div>
    </div> 
    <div class="ml-5 text-right">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2 mb-1">sr-only</div>
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">not-sr-only</div>
    </div>
  </li>
</ul>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Keep learning! Keep coding!! 💛

Tailwind CSS tutorial #31: Text Decoration Style

Shubhi✨ — Fri, 09 Dec 2022 16:16:07 +0000

In the article, we will go into detail on how to use Text Decoration Style.

Text Decoration Style

Format

decoration-{style}

Tailwind Class	CSS Property
`decoration-solid`	`text-decoration-style: solid;`
`decoration-double`	`text-decoration-style: double;`
`decoration-dotted`	`text-decoration-style: dotted;`
`decoration-dashed`	`text-decoration-style: dashed;`
`decoration-wavy`	`text-decoration-style: wavy;`

Basic usage

Setting the text decoration style

Use the decoration-{style} utilities to change the style of an element’s text decoration.

Code

 <ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <ul class="underline decoration-solid">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">decoration-solid </div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <ul class="underline decoration-double ">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">decoration-double    </div>
  </li>
    <li class="flex items-center justify-between px-4 py-2">
    <ul class=" underline decoration-dotted ">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">decoration-dotted        </div>
  </li>
    </li>
    <li class="flex items-center justify-between px-4 py-2">
    <ul class=" underline decoration-dashed ">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">decoration-dashed    </div>
  </li>
   </li>
    <li class="flex items-center justify-between px-4 py-2">
    <ul class=" underline decoration-wavy">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">decoration-wavy</div>
  </li>

</ul>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Keep learning! Keep coding!! 💛

Tailwind CSS tutorial #30: Text Overflow

Shubhi✨ — Thu, 08 Dec 2022 09:52:09 +0000

In the article, we will go into detail on how to use Text Overflow.

Text Overflow

Format

text-overflow-{ellipsis|clip}

Tailwind Class	CSS Property
`truncate`	`overflow: hidden,text-overflow: ellipsis,,white-space: nowrap;`
`text-ellipsis`	`text-overflow: ellipsis;`
`text-clip`	`text-overflow: clip;`

Basic usage

Truncate

Use truncateto truncate overflowing text with an ellipsis (…) if needed.

Ellipsis

Use text-ellipsis to truncate overflowing text with an ellipsis (…) if needed.

Clip

Use text-clip to truncate the text at the limit of the content area.

Code

<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <p class="truncate w-96 bg-yellow-200 text-md p-4">Fred is inquisitive and creative, and always conjuring up ways to improve Binaryville and the lives of its inhabitants. He's been at the forefront of many inventions, but has a special affinity for improving the world through alternative energy and green-living. Fred's engineering collaborations with the City of Binaryville have helped the city reduce its energy consumption year over year, and he's twice been awarded the highly coveted Binaryville Medallion of Honor.</p>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">truncate</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <p class="overflow-ellipsis overflow-hidden w-96 p-4 bg-yellow-200 text-md">
      Fred is inquisitive and creative, and always conjuring up ways to improve Binaryville. He's twice been awarded the highly coveted BinaryvilleMedallionOfHonorAndExcellentAward</p>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">overflow-ellipsis</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <p class="overflow-clip overflow-hidden w-96 p-4 bg-yellow-200 text-md">
      Fred is inquisitive and creative, and always conjuring up ways to improve Binaryville. He's twice been awarded the highly coveted BinaryvilleMedallionOfHonorAndExcellentAward</p>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">overflow-clip</div>
  </li>
</ul>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Keep learning! Keep coding!! 💛

Tailwind CSS tutorial #29: Vertical Align

Shubhi✨ — Wed, 07 Dec 2022 14:26:23 +0000

In the article, we will go into detail on how to use Vertical Align.

Vertical Align

Format

align--{uppercase|lowercase|capitalize|none}

Tailwind Class	CSS Property
`align-baseline`	`vertical-align: baseline;`
`align-top`	`vertical-align: top;`
`align-middle`	`vertical-align: middle;`
`align-bottom`	`vertical-align: bottom;`
`align-text-top`	`vertical-align: text-top;`
`align-sub`	`vertical-align: sub;`
`align-super`	`vertical-align: super;`

Basic usage

Utilities for controlling the vertical alignment of an inline or table-cell box.

Code

<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
 <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-baseline">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">   align-baseline; </span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-top">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">   align-top;  </span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block    align-middle">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">   align-middle    </span>
  </li>
 <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-bottom">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">   align-bottom;   </span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-text-top">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">   align-text-top; </span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-text-bottom">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">    align-text-bottom; </span>
  </li>

</ul>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Keep learning! Keep coding!! 💛

Tailwind CSS tutorial #28: Text Transform

Shubhi✨ — Tue, 06 Dec 2022 10:02:02 +0000

In the article, we will go into detail on how to use Text Transform.

Text Transform

Format

text-transform-{uppercase|lowercase|capitalize|none}

Tailwind Class	CSS Property
`uppercase`	`text-transform: uppercase;`
`lowercase`	`text-transform: lowercase;`
`capitalize`	`text-transform: capitalize;`
`none`	`text-transform: none;`

Transforming text

The uppercaseand lowercasewill uppercase and lowercase text respectively, whereas capitalizeutility will convert text to title-case. The normal-case utility can be used to preserve the original casing — typically to reset capitalization at different breakpoints.

Code

 <ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <ul class=" uppercase">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2"> text-transform: uppercase;  </div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <ul class="lowercase    ">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2"> text-transform: lowercase;  </div>
  </li>
    <li class="flex items-center justify-between px-4 py-2">
    <ul class=" capitalize      ">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2"> text-transform: capitalize; </div>
  </li>
    <li class="flex items-center justify-between px-4 py-2">
    <ul class=" none    ">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">text-transform: none;    </div>
  </li>
</ul>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Keep learning! Keep coding!! 💛