Insha Profile picture
12 Jan, 15 tweets, 8 min read
Are you a Front-end Developer?

If yes, check out this huge list of super useful cheatsheets that every front-end developer will love. ๐Ÿš€

A Thread๐Ÿงต
๐Ÿ“Œ Why Cheatsheets?

Being developers, we work with many different languages. Which makes it humanly impossible to remember all its aspects. Yes, we do have MDN docs, but looking at them for every little issue can be time-consuming. This is when "Cheat Sheet" comes super-handy.
๐Ÿ“Œ HTML Cheat Sheet

Looking for a cheat sheet that contains useful code examples and web developer tools, markup generators, and more? Well, youโ€™re going to love this.

๐Ÿ”— htmlcheatsheet.com
๐Ÿ“Œ HTML Reference

If you believe in learning by examples: Let me tell you about this one.

htmlreference.io is a free guide to HTML. You will find all the elements and attributes with proper examples for a better understanding.

๐Ÿ”— htmlreference.io
๐Ÿ“Œ CSS Reference - A free visual guide to CSS

As we know CSS has a number of properties. Do you remember them all? I guess nobody does.
If youโ€™re looking for a complete reference with adequate examples, you need to check this.

๐Ÿ”— cssreference.io
๐Ÿ“Œ CSS Cheat Sheet

CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box, and text-shadow generators, colour picker, and more.

๐Ÿ”— htmlcheatsheet.com/css/
๐Ÿ“Œ GRID: A simple visual cheatsheet for CSS Grid Layout

Learn all about the properties available in the Grid Layout through simple visual examples. I as a developer use this handy cheat sheet all the time.

๐Ÿ”— grid.malven.co
๐Ÿ“Œ FLEX: A simple visual cheatsheet for flexbox

Learn all about the properties available in flexbox through simple visual examples.

๐Ÿ”— flexbox.malven.co
๐Ÿ“Œ Online Interactive JavaScript (JS) Cheat Sheet

This JavaScript cheat sheet comes with the most important concepts, functions, methods, and more. A complete quick reference for beginners.

๐Ÿ”— htmlcheatsheet.com/js/
๐Ÿ“Œ JavaScript Cheatsheet

This 13-page cheat sheet will take you from a beginner to advanced on the fundamentals of JavaScript. Giving you proper terminologies, and syntax of common constructs.

๐Ÿ”— ilovecoding.org/blog/js-cheatsโ€ฆ
๐Ÿ“Œ Modern-JS-cheatsheet

This document is a cheat sheet for JavaScript containing tips, tricks, and best practices you will frequently encounter in modern projects and most contemporary sample code.

๐Ÿ”— github.com/mbeaudru/moderโ€ฆ
๐Ÿ“Œ Cheatography.com

Cheatography has thousands of incredible, original programming cheat sheets. You will find everything related to a particular programming language and can easily download them.

๐Ÿ”— cheatography.com
๐Ÿ“Œ OverAPI.com

If youโ€™re looking for a site containing all the cheat sheets, all! It is the one for you.

This website aggregates cheatsheets for many popular programming languages such as J.S, NodeJS, PHP, Python, CSS.

๐Ÿ”—overapi.com
๐Ÿ“Œ Developer Cheat Sheets

This cheat sheet is a compilation of some of the most popular languages: The history of web development, React cheat sheet, React Router cheat sheet, Redux cheat sheet, ES6 cheat sheet, Request cheat sheet.

๐Ÿ”— developer-cheatsheets.com
That's all for this thread! ๐Ÿ™Œ๐Ÿป

There are literally hundreds of resources out there, and I hope that some of the ones listed here will prove to be useful in your day-to-day work โ€” and most importantly help you avoid some time-consuming, routine tasks.

Happy coding!

โ€ข โ€ข โ€ข

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

Keep Current with Insha

Insha Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

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

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Insharamin

7 Jan
There are almost 120,000 repositories on GitHub.

Here are seven of the best ones for dynamic languages like JavaScript you should check out right now.

A Thread ๐Ÿงต
๐Ÿ“Œ JavaScript30

This repository is a collection of 30 awesome JavaScript vanilla projects created by Wes Bos. Build 30 things in 30 days and enhance your JavaScript skills.

๐Ÿ”— github.com/wesbos/JavaScrโ€ฆ
๐Ÿ“Œ wtfjs

A list of funny and tricky JavaScript examples. If you are a beginner, you can use these notes to get a deeper dive into JavaScript.

๐Ÿ”— github.com/denysdovhan/wtโ€ฆ
Read 10 tweets
6 Jan
CSS is great for making responsive layouts, but sometimes, you just need a little help and that's when CSS generators can help.

Here are 9 CSS generators (grid and flexbox) that can save you lots of time! ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

A Thread ๐Ÿงต
๐Ÿ“Œ Grid-Based Layout Generator

1๏ธโƒฃ Layoutit

LayoutIt is an interface builder for CSS Grid and Bootstrap. You can quickly design web layouts, and get HTML and CSS code.

๐Ÿ”— layoutit.com
2๏ธโƒฃ Griddy

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

With this web app, you can add new items into the grid, remove other items, and resize them to fit any layout you want.

๐Ÿ”— griddy.io
Read 11 tweets
5 Jan
Learn JavaScript by playing games. ๐ŸŽฎ

A Thread ๐Ÿ‘‡๐Ÿป
๐Ÿ“Œ CodinGame

CodinGame offers up fun free games to help learn more than 25 programming languages, including JavaScript, Ruby, and PHP.

๐Ÿ”— codingame.com/start
๐Ÿ“Œ CodeCombat

CodeCombat is aimed at helping students embrace learning as they play and write code from the very start of their adventure.

๐Ÿ”— codecombat.com
Read 10 tweets
3 Jan
Do you know what's the best way to learn any programming language?

- The Answer is by building lots of projects ๐Ÿ”ฅ๐Ÿ’ช๐Ÿป

Here's a complete list of Web dev projects ranging from -> ( Beginner to advanced level ) for you.

A Thread ๐Ÿ‘‡๐Ÿป
๐Ÿ—ฃ Learning Web Dev can be challenging. But as programmers, we always strive for better ways to be more effective and productive.

๐Ÿ—ฃ Tutorials are great, but building projects is the best way to learn. Bridge the gap between theory and real-world code by working on projects.
๐Ÿ“Œ Basic Html and CSS projects.

1- A Tribute Page
2- Survey Form
3- Technical Documentation Page
4- Personal Portfolio
5- Product Landing Page

When I was learning HTML and CSS I've tried all of them.
Check the code here๐Ÿ‘‡๐Ÿป

๐Ÿ”—codepen.io/collection/oEEโ€ฆ
Read 10 tweets
15 Oct 21
Top 13 JavaScript String methods every JS beginner should know!!

A Thread ๐Ÿ‘‡
A quick recap of JavaScript Strings:

Strings are used for storing and manipulating text in JavaScript.
Strings can be enclosed within either single quotes, double quotes, or backticks.

Here's a simple demonstration of creating Strings.
Some of the commonly used JavaScript String methods:

string.length
charAt(index)
concat()
replace()
split()
slice(start, end)
substring(start,end)
substr(start, length)
toLowerCase()
toUpperCase()
includes()
trim()
padStart() and padEnd()
Read 18 tweets
5 Oct 21
Are you a Front-end Developer?

If yes, these amazing websites are a goldmine for you!

A Thread ๐Ÿ‘‡
1๏ธโƒฃ Responsively

A must-have DevTool for all Front-End developers that will make your job easier.
Develop responsive web apps 5x faster with this open-source tool!

๐Ÿ“Žresponsively.app
2๏ธโƒฃ Small Dev tools

FREE tools for developers like encoder/decoder, HTML/CSS/Javascript formatters, minifiers, fake or test data generators & much more.

๐Ÿ“Žsmalldev.tools
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(