Cheat Sheets for web development
On the development time, we don’t like to the code existing or basic code, so this article definitely saves time on the web development process with Cheat Sheets for web development.
Cheat Sheets
1. HTML Cheatsheet
This Cheat Sheet contains useful code examples and developer tools, markup generators, and more on a single page.
This is a helpful quick guide for those who already know how to work with these languages.
HTML code quick reference – lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.’
2. CSS Cheatsheet
Cascading Style Sheets, or CSS for short, is a style sheet language written in a markup language. CSS defines the presentation, look and formatting elements of Web documents, such as the layout, colors and fonts. … We hope you will find the CSS cheat sheet a valuable resource.
This Cheat Sheet contains the CSS properties, text-shadow generators, color picker, and some common code snippets.
3. Grid Layout
The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid.
This one is not only a time saver but it is really a lifesaver because whenever I’m working with grid layout, most of the time I need a cheat sheet.
4. FlexBox
The flex property specifies the components of a flexible length : the flex factors (grow and shrink) and the flex-basis. When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box. If a box is not a flex item, flex has no effect.
Another visual-based cheat sheet for CSS flexbox, this one contains all the flexbox properties with visual examples.
5. JavaScript Cheat Sheets
Javascript is a client-side scripting language supported by browsers. Usually, JavaScript functions are involved when a client does an action, for example, submitting a form, hovering the mouse, scroll etc… Web pages are more lively, dynamic and interactive due to the presence of JS code.
This Cheat Seet contains useful code examples on a single page. Find code for JS loops, variables, objects, data types, strings, events, and many other categories.
6. JavaScript
JavaScript, HTML, and CSS are all programming languages with major differences:
- HTML is the language used to define text and headings, as well as embed images on a webpage.
- CSS is the language used to apply styling to the HTML content, like colors and fonts.
- JavaScript is the language that creates interactive and dynamic content like moving graphics, maps, scrolling videos, and more.
This cheat sheet contains basic to advanced concepts. ES6+, simple explanations, DOM API, Event loop, functions, array, object, Type and so much more.
7. React
Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug. This single cheat sheet contains various code examples to boost your react development.
Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Learn Once, Write Anywhere
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.
8. Git
This cheat sheet contains a list of handy git commands to make your life easier!
Here Check out Top 10 Front-end Languages.