DEV Community: Faisal Jawed Khan

Importance of CSS Specificity

Faisal Jawed Khan — Sun, 28 May 2023 09:53:34 +0000

CSS specificity is an important topic if you want to get better at CSS. If you give the same element two or more CSS rules, then which style declaration will be applied to that HTML element?

Here comes an important concept called CSS Specificity, here the listed selector categories are in the order of decreasing specificity.

Important > inline styles > ID > class, pseudo-class, attributes > Elements

According to MDN, the browser will decide which CSS property values are more relevant to that element and will be applied. Simply if two or more CSS selectors apply to the same then which has the highest specificity will be applied to that element.

These selector categories are represented: 0 - 0 - 0 - 0 - 0 in that order.

Let us take one example:

<button class=”class-btn” id=”id-btn”> Hello World! </button>

!important: This property overrides all others. style: 1 - 0 - 0 - 0 - 0

button { color: “red” !important; }

Inline Styles: if an element has an inline style then 0 - 1 - 0 - 0 - 0

<button style=”color: blue”>Hello World!</button>

ID Selector: if the element has an ID selector then 0 - 0 - 1 - 0 - 0

#id-btn { color : “blue”; }

If the element has a class, pseudo-class or attribute selector then add 1: 0 - 0 - 0 - 1 - 0

.class-btn { color : “violet”; }

Add 1 to the element selection: 0 - 0 - 0 - 0 - 1

button { background : “yellow”; }

Now I have one question for you to better understand this concept.

What would be the color of the heading “Hello World!”?

A. Red
B. Green
C. Violet
D. Yellow

Now If you are confused then let’s understand the question

h3.heading { color: green; }

Specificity is 0 - 0 - 0 - 1 - 1, because it has 1 class and 1 element.

.main h3 { color: violet; }

Specificity is 0 - 0 - 0 - 1 - 1, because it has 1 class and 1 element.

.heading { color: red; }

Specificity is 0 - 0 - 0 - 1 - 0, because it has only 1 class.

h3 { color: yellow; }

Specificity is 0 - 0 - 0 - 0 - 1, because it has only 1 element.

So now color green and violet have same specificity that is 0 - 0 - 0 - 1 - 1.

Now according to cascading style sheet rule, whichever rule is applied the latest that is found in the bottom most will be the one that is applied. So in our question the violet color is the applied in the bottom most.

So the answer is Violet.

Conclusion

I hope you understand the concept of CSS Specificity and if you like the blog and If you think this will be helpful for you do Like, Comment, and Share with your colleagues and friends.

Do Follow me here on dev.to

Until then Happy Coding.

How do you avoid burnout as a programmer?

Faisal Jawed Khan — Wed, 03 May 2023 10:17:45 +0000

Hello developer, how are you? Welcome to my new blog. As a programmer or software developer, sometimes taking breaks while doing your work has been difficult because of deadlines or client pressure. This can lead to burnout which does prolonged stress cause a state of physical, emotional and mental exhaustion. But how can you deal with this type of phase is important. Here are some tips on how do you avoid burnout as a programmer.

When I was learning coding in my starting days then first I started doing it for fun and it was a hobby and passion but later I got my first job and doing work 8 hours a day and used to get frustrated when the problems were not solved but now I know how to tackle the burnout situation and now without wasting any time, I am going to start the blog.

1. Make a To-do List

Coding is a non-stop learning journey but the question is how do you increase your learning journey step by step without feeling bored?

You should make a to-do list daily or maximum to a maximum for a week and try to complete your work in the given time.

While making your to-do list you should be honest with yourself and give enough time to your work and try to complete it.

2. Complete your work in a given time

While making your to-do list try to complete your work in a given specified time and that will help to decrease your stress.

If you do not complete your work on time, then it will become a cause of unnecessary stress.

Reward yourself after completing each and every task on time.

3. Know When to take a break

While doing your 8 hours job, it is necessary to take a break but You have to decide when to take a break whether it’s weekly or when it’s up to you.

4. Spend some time with your family and friends

You should understand how long to work in a day because you also have to give time to your friends and family members.
You should spend some quality time with your family members and it will help you get out of burnout condition.

5. Prirotize your health

Eat healthy food and drink plenty of water, exercise regularly and take a good sleep.

6. Learn Something New

We start feeling bored while doing the same work so always try to learn something new for example new technology or new updates in your recent work.

Try to read blogs, and articles or watch videos and if possible attend developer conferences.

7. Make Projects

You should make new projects and this will add value to your portfolio.

Conclusion

In this blog, I have share tips for how to avoid burnout as a programmer.

If you think this will be helpful for you do Like, Comment, and Share with your colleagues and friends.

Do Follow me here on dev.to

Until then Happy Coding.

How to make incremental and decremental Counter App using HTML, CSS & JavaScript

Faisal Jawed Khan — Sun, 09 Apr 2023 15:56:08 +0000

Hello developers, Welcome to my new blog. I recently deployed my first app on Netlify and am excited to share the project details. In this blog, I am going to explain how to create a counter app. Actually, if you are on a learning path then it’s very important to build different projects with your learning.

So without wasting any more time let's start the blog.

Prerequisites of this project:

If you read this blog then I am assuming that you know the basics of HTML, CSS and JavaScript.

It’s a javascript so I am not going to explain the html and css file.

Counter App:

As you can see, while doing this project I can split this into parts;

Display to show the number
Increment while pressing + button
Decrement while pressing - button
Reset the counter while pressing the button

Now it's time to start coding

01 Display to show the number

For this I can take the h2 tag under div.

 <div class="updateNumberDiv">
    <h2 class="updateNumber" id="updateNumber"></h2>
 </div>

Select the id with document.getElementById of the h2 tag and assign a default value.

let score = 0;
let updateNumber = document.getElementById("updateNumber");

I can show the default number (0) with the help of textContent.

updateNumber.textContent = score;

Now it's time to show the increment, decrement and reset the default number.

I can solve this by taking one function for each increment, decrement and reset but it's too lenghty so I can use the querySelectorAll for selecting all buttons.

let updateBtn = document.querySelectorAll(".updateBtn button");

Then add click addEventListener on every button with the help of forEach loop. Then after that I can select the id of each button with the help of e.target.id.

Then I can use the if-else statement and after grabbing the id of the button, I can perform the increment, decrement and reset.

updateBtn.forEach((button) => {
    button.addEventListener("click", (e) => {
        let btnId = e.target.id;
        if (btnId === "increment") {
            score++;
            updateScore();
            return;
        } else if (btnId === "decrement") {
            score--;
            updateScore();
            return;
        } else if (btnId === "reset") {
          score = 0;
          updateScore();
          return;
        }
    })
})

Github Repository for this project:
https://github.com/faisaljawedkhan/counterApp/tree/dev

Counter App:
https://khancounterapp.netlify.app/

Conclusion

In this blog, we built a counter app.

If you think this will helpful for you the do Like, Comments, and Share with your colleagues and friends.

Do Follow me here on dev.to

Until then Happy Coding.

Top 25 VS Code Shortcuts You should know about that will help you to boost your productivity

Faisal Jawed Khan — Sun, 02 Apr 2023 09:57:23 +0000

Hello developers, Welcome to my new blog. In this blog, I will share the top 25 VS Code shortcuts that every developer should know about, which will help you to boost your productivity.

Visual Studio Code (VS Code) is a worldwide one of the most popular code editors, used by developers for web development. I believe that one of the best things that can make the difference is the extensive keyboard shortcuts of vs code, which will help developers be more efficient and work faster, ultimately increasing their productivity. Here is a list of the top 25 shortcuts that I am also using and found very useful.

Shortcuts:

1. Show Command Palette
-- Press Ctrl + Shift + P or F1 to show the command palette.

2. Search Files
-- Use Ctrl + P to search files.

3. New Window Open
-- Press Ctrl + Shift + N to open the new window.

4. Close Window
-- Use Ctrl + Shift + W to close the window.

5. Toggle Sidebar
-- Press Ctrl + B to toggle the sidebar.

6. Comment or Uncomment
-- Use Ctrl + / to comment or uncomment the line or block of code.

7. Multi Cursor
-- Press Alt + Click to insert multi-cursor.

8. Copy / Paste
-- Use Ctrl + C / Ctrl + V to copy and paste.

9. Cut
-- Press Ctrl + X to use cut.

10. Undo / Redo
-- Use Ctrl + Z / Ctrl + Y to undo or redo.

11. Find / Replace
-- Press Ctrl + F / Ctrl + H to find the dialog box and you will able to find and replace the duplicate one or with existed line of code in your file.

12. Select Line
-- Use Ctrl + L or F1 to select the current line.

13. Toggle Word Wrap
-- Press Alt + Z to toggle the word wrap.

14. Open Extensions
-- Use Ctrl + Shift + X to go to the extensions.

15. Open Debugger
-- Press Ctrl + Shift + D to go to the debugger.

16. Toggle Terminal
-- Press Ctrl + ~ to toggle the integrated terminal.

17. Create New Terminal
-- Use Ctrl + Shift + ~ to create the new integrated terminal.

18. Duplicate Line or Selection
-- First, select and then Press Ctrl + Shift + Up/Down Arrow to duplicate the line or selection

19. Keyboard shortcuts editor
-- Use Ctrl + K + S to open the keyboard shortcuts editor.

20. Close the Current Tab / Reopen the last closed tab
-- Press Ctrl + W to close the current tab.
Press Ctrl + Shift + T to reopen the last closed tab.

21. Code Format
-- Use Shift + Alt + F to format the code.

22. Bold / Italic / Underline
-- Press Ctrl + B for Bold, Ctrl + I for Italic and Ctrl + U for Underline.

23. Toggle Full Screen
-- Use Ctrl + K + Shift + F or F11 to toggle the full-screen mode.

24. Rename
-- First Select and then Press F2 to rename the file.

25. Open Emoji File
-- Use Window + .(dot) to open the emoji file and you will use it in your production.

Conclusion

In this blog I covered top 25 common, uncommon but useful vs code shortcuts that will help to boost your productivity.

I hope this blog is helpful for you and you will use this shortcuts and take advantage to achieve your coding goal. If you think it is helpful for you then do Like, Comments and Share with your colleagues and friends.

Thank you for reading.

Do Follow me here on dev.to

Learn Front-end Web Development for Free

Faisal Jawed Khan — Sun, 26 Mar 2023 09:41:17 +0000

Hello friends, welcome to my new blog. In this blog, I am going to share the list of the top 10 web resources which will help you to learn frontend development for free in 2023.

Top 10 Websites:

Mozilla MDN
For frontend development (HTML, CSS and JavaScript) reference and learning.
W3 Schools
Learn HTML, CSS and Javascript and Practice.
Freecodecamp
Learn HTML, CSS and JavaScript for free and build projects.
Geeks for Geeks
Learn HTML, CSS and JavaScript for free and take references from here also.
Javatpoint
Learn HTML, CSS and JavaScript.
CSS-tricks
Learn everything about CSS.
JavaScript 30
Learn JavaScript through 30 days coding challenge.
Codecademy
Learn HTML, CSS and JavaScript.
Codepen
Learn HTML, CSS and JavaScript through awesome projects shared by developers.
W3resource
Learn HTML, CSS and JavaScript.

Top 10 Youtube Channels:

Top 10 Blogs:

Medium
You can learn frontend web development and share your thoughts also.
Freecodecamp
They can share amazing articles every day.
Dev Community
Learn frontend development and much more for free.
Web design weekly
It is a weekly newsletter for designers and developers, which contains tips and tricks.
JavaScript weekly
A weekly newsletter of articles, news and projects.
LinkedIn
Many developers share their experiences on this platform. You can also learn from here.
Web designer depot
Web design resources for designers.
Hey Designer
Subscribe to their newsletter and they can share amazing tips and tricks for designers.
Wscube Tech
They can share interview questions and much more about web development.
Quora
You can learn frontend development from quora also. You can ask your queries and developers solve your queries.

Conclusion

I hope this blog will help you and make easier your learning journey. Remember one thing that patience and hard working is the key to learning.

Do Like, Save and Comments.

Do Follow me here on dev.to

How to Learn Frontend Web Development from Scratch

Faisal Jawed Khan — Sun, 19 Mar 2023 08:22:26 +0000

Hello friends, Welcome to my new blog. In this blog, I will share my experience of what should every beginner learn to become a front-end developer because so many contents are available on the internet. When I started my journey back in 2021 then at that time it was very confusing for me that what should I learn. So I have decided to collect all information in one blog and that will help every beginner.

Basically in front-end development, a lot of technologies are there but in this blog, I will focus on HTML, CSS and JavaScript because these are the backbone of a front-end developer.

But before that, I want to ask you something why should you choose to become a front-end developer?

Actually, this will be a very interesting question because as per the Bureau of Labour Statistics, web developers' jobs (including front-end developers) will grow by 15% from 2016 to 2026.
You don’t need a specific degree to become a front-end developer.
Many companies hire front-end developers and they will give a good salary.
You can work from anywhere in the world.

Now I think you understand why you choose this and now without wasting any more time let’s get started.

HTML (Hyper Text Markup Language)

Heading Tag like h1, h2 … h6.
Semantic tags like header, nav, section, article, aside, footer and div etc.
Form elements like input, textarea, button, select, option, and label etc.
Multimedia tags like input, audio, video, iframe, and img.
HTML table.
You should know how to make a responsive design.
Ordered and unordered list.
You should know how to embed favicons in your HTML file.

CSS (Cascading Style Sheets)

Inline, Internal and External CSS.
CSS selectors like class, id, element, universal, grouping, pseudo-class, and pseudo-element etc.
CSS Box models like padding, margin, border etc.
CSS image sprites.
Flexbox and Grid layout to make a responsive design.
Animations and transitions.
CSS preprocessors like Sass and Less allow you to write more efficient and maintainable CSS.

JavaScript

JavaScript variables (var, let and const), data types and operators.
If-else and switch condition. Loops like for, while, do-while, for-of and for-in.
Function, Array, Objects and Strings.
DOM (Document object manipulation) and BOM(Browser object model).
Events Handlers.
Constructor, Prototypes.
AJAX and API.
Map, reduce and filter, arrow functions, Promises, Template literals etc.

Conclusion

Everyone wants to become a pro developer but It will take time, learning is the best way to achieve your dream so don’t think a lot and start learning from today.

Hard work and Patience is the key to every successful person.

I hope this guide will help you in your learning journey and hopefully save you time. In the next blog, I will write about free platforms from where you should start your front-end developer learning journey.

Till then Bye-bye and Best of luck.