Tweet

Insha

6 Jun, 6 tweets, 5 min read

The Ultimate Cheatsheet List for Front-end Developers.

A Thread👇

1⃣ HTML

- Cheatsheet by hackr.io

🔗 hackr.io/blog/html-chea…

-OverAPI.com

🔗overapi.com

- HTML Cheatsheet

🔗 htmlcheatsheet.com

- HTML character entities Cheatsheet

🔗 cheatography.com/davechild/chea…

2⃣ CSS

- Cheatsheet by Devhints.io

🔗devhints.io/css

-CSS Cheatsheet

🔗 htmlcheatsheet.com/css/

- A complete guide to CSS grid

🔗 css-tricks.com/snippets/css/c…

- A complete guide to CSS Flexbox

🔗 css-tricks.com/snippets/css/a…

3⃣ JAVASCRIPT

- Javascript Cheatsheet

🔗 htmlcheatsheet.com/js/

- Cheatsheet By hackr.io

🔗hackr.io/blog/javascrip…

- 13 page JavaScript Cheatsheet

🔗 ilovecoding.org/blog/js-cheats…

- By website setup

🔗 websitesetup.org/javascript-che…

4⃣ REACT JS and JQUERY

-The React Cheatsheet for 2021 (+ Real-World Examples)

🔗freecodecamp.org/news/react-che…

-React cheat sheet

🔗developer-cheatsheets.com/react

- JQuery Cheatsheet

🔗htmlcheatsheet.com/jquery/

- JQuery quick API reference

🔗oscarotero.com/jquery/

Along with Cheatsheets Developer tools are a great ally for all the developers.

Here's a collection of 50 Developer tools that'll save you 10+ hours per week.👇

gum.co/Developer-tools

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @Insharamin

Insha

@Insharamin

3 Jun

7 Chrome Extensions for Front-end Developers.

A Thread 👇

1⃣ WhatFont

The easiest way to identify fonts on web pages.

With this extension, you could inspect web fonts by just hovering on them.

🔗 chrome.google.com/webstore/detai…

2⃣ ColorPick Eyedropper

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

🔗 chrome.google.com/webstore/detai…

Read 9 tweets

Insha

@Insharamin

1 Jun

6 HTML Attributes you may not be using.

A Thread 👇

1️⃣ Contenteditable

Specifies whether the content of an element is editable or not.

All you have to do is set the contenteditable attribute on nearly any HTML element to make it editable.

2️⃣ Spellcheck

The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.

The following can be spellchecked:

-Text values in input elements (not password)
-Text in <textarea> elements
-Text in editable elements

Read 10 tweets

Insha

@Insharamin

31 May

CSS Pro tips you might not know.

A Thread 👇

1⃣ user-select property

The user-select property specifies whether the text of an element can be selected or not.

2⃣ place-item property

The CSS place-items is a shorthand property that allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox.

Read 8 tweets

Insha

@Insharamin

30 May

10 Free Resources for Color Palette Inspiration.

A Thread 👇

1⃣ Pigment

Pigment by Shapefactory is by far the best color palette generator on the internet and is recommended by designers everywhere.

🔗 pigment.shapefactory.co

2⃣ Coolors

Coolors is a super fast color scheme generator that allows you to create, save, and share perfect palettes in seconds.

🔗coolors.co

Read 12 tweets

Insha

@Insharamin

28 May

7 Developer tools you won't believe exist.

A Thread 👇

1⃣ Keycode

Press any key to get the JavaScript event key code.

🔗 keycode.info

2⃣ Screen size map

The screen size map compares viewport sizes in device-independent pixel to plan responsive and fluid layouts for great UI/UX design in digital products.

🔗 screensizemap.com

Read 9 tweets