150+ Developer Resources. you must see these resources in 2021.

Hey folks, these are the article, videos and awesome blogs which i am going to prefer you in 2021. these resources will help you a lot. so let’s see below what i am going to provide you with my research.

HTML Resources

#TitleMy Thoughts
1.HTML: <!DOCTYPE> tagYou will love these basics html tag.
2.W3S HTML5 Semantic ElementsGreat quick intro to why everything shouldn’t be in a <div>.
3.MDN HTML elements referencewhat a great info about all html tags. you have to look these explanations once when you are a beginner.
4.New Structural Elements in HTML5This link will help you to understand elements like <time>, <figure>, <article> etc.
5.HTML5 Periodical TableI really like the concept of this website. this website gives me the feel of like chemistry periodic table.
6.Scripts: async, deferIt will give you the best example to embed JS in html files.
7.Learn to Code HTML & CSSIt will really a fast crash course of HTML. You will love it.
8.metatags.ioOne of the best generators to create meta tags for your social media platforms like: Facebook, twitter and LinkedIn etc.
9.getwaves.ioSuch an awesome website to create awesome waves to separate sections in your website.

CSS Resources

#TitleThoughts
10.Bootstrap DocumentationYou are very known of this website if you are using bootstrap in your template. so always use this for bootstrap default class and new changes in latest versions.
11.Specifics on CSS SpecificityGreat breakdown by CSS-Tricks and has nice graphic examples at the end.
12.CSS Box SizingIt will help you to understand, how the box-model works.
13.12 tips for amazing CSS animationSuch and amazing tips on CSS animation with full of brief explanations.
14.CSS Layout and AnimationsYou must read it and it will help you lot on CSS Layout and animations.
15.Net Ninja SASS TutorialWhenever i visit his channel, He gives me a positive vibes to learn new things in a very easy and cool way.
16.Learn Sass In 20 Minutesif you are a beginner about SASS, then must watch this video first.
17.BEM and SASS: A Perfect MatchThis blew my mind when introduced how BEM and SASS could be used together.
18.getbem.comIt gives an overview from the creators of the popular naming convention.
19.BEM by ExampleThis explanation on BEM is really good, but I especially like how they have a short and full versions of the article.
20.MDN Display DocsEverything you could ever want to know about the powerful display property.
21.A Couple of Use Cases for Calc()calc() is one of the more powerful features in CSS and this article shows some great use cases for it.
22.Wes Bos CSS GridYou can’t argue with free and that Wes Bos is one of the best teachers out there for development.
23.CSSmaticCollection of powerful css generators for gradients, border radius, noise texture and box shadows.
24.CSS Tricks Positionafter reading this you will know the power of position property.
25.Can I Use?This site lets you know the browser support for every property out there.
26.yoksel Flex CheatsheetI love the layout and way it lets you visually preview the flexbox properties.
27.The 30 CSS Selectors You Must MemorizeIt such an super article on CSS selectors. I loved it.
28.CSS LintThis tool will check your code and highlight any errors.
29.System Font StackPredefined font fallback stacks that can be plugged into a project.
30.Neumorphism.ioJust follow and you will understand about Neumorphism.
31.Advanced CSS and Sass: Flexbox, Grid, Animations and More!Udemy has great videos on CSS and other courses also.
32.CSS Scroll ShadowsThis tool generates shadows that appear based on scroll position with just CSS!

JavaScript Resources

#TitleMy Thoughts
33.JavaScript in 4 HoursEvery developers should watch this videos on JavaScript intro and other things . very well explained.
34.javascript.infoThis is one of the complete and well explained overview of JS.
35.Code BeautifyIt is such an great tool to beautify your JavaScript.
36.Truthy and Falsy: When All is Not Equal in JavaScriptThis article is a great reference for all the instances that a value might be considered true or false.
37.What the heck is the event loop anyway?watch and understand about event loop in JavaScript.
38.JavaScript LoopsIf I could only read one article to understand common JS loops, this would be the one.
39.MDN JS StringEverything I’d ever want to know about strings and where to use them.
40.Google Hosted Library jQueryyou must bookmark this url to know about latest jQuery CDN script.
41.Public APIsGreat list of public APIs that you can use it very easily in your projects!

Be with us and be safe. you will get more list soon. Let’s share your best content on CSS, JS and Other web technologies.

Debugging JavaScript with Chrome DevTools Breakpoints

To debug JavaScript in Google Chrome use Developer Tools
To set a breakpoint, simply click on the grey margin where you see line numbers in the Sources tab
Stepping through the code-

Step Over – F10
Step into – F11
Step out Shift+F11
Continue F8

You can also use the following buttons in the Developer tools to step through the code-

To set a conditional breakpoint, right click on the grey margin and select “add conditional breakpoint”

The Call Stack panel displays the complete excetion path and in this path where you want to breakpoint add select any line where auto color blue background that means javascript excution pouse at breakpoint.

If you want to find a individual id then press

Ctrl+shift+I

and go to console tab and select

Ctrl+shift+F

and paste any id and press enter

Tagged : / / / /