0. My Blog Example

0 / b I really forget one thing

When you click the button goes 'down' 3 pixels:

button:active {
            transform: translateY(3px);
        }

1. Tools

IMPORTANT NOTICE: Lot of times these tools doesn't allow you to use them on local files (starting with file:/// instead of http://) by default. Please allow access in the options:

a) WhatFont ?

The easiest way to identify fonts on web pages.

WhatFont for Chrome

WhatFont for Firefox

Alternative: Font Face Ninja

Explore fonts within a website, try, bookmark and buy them !

--> for Chrome

--> for Firefox

b) ColorPick Eyedropper

An eye-dropper & color-picker tool that allows you to select color values from webpages.

ColorPick for Chrome

ColorPick for Firefox

c) Pesticide

This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

Pesticide for Chrome

Pesticide for Firefox

d) Page Ruler

Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.

Page Ruler for Chrome

(some other) Ruler for Firefox

e) HTML Tree Generator

Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree.

HTML Tree Generator for Chrome

HeadingsMap for Firefox

f) Nimbus Screenshot

Screen Capture FULL Web page or any part. Edit screenshots. Record screencasts - record video from your screen.

Nimbus Screenshot for Chrome

Nimbus Screenshot for Firefox

2. Web sites

a) Draw.io

an open source technology stack for building diagramming applications, and the world’s most widely used browser-based end-user diagramming application.

draw.io

b) Word counter

wordcounter.io

3. CSS

CSS Gradient

Animate.css

30 seconds of CSS

16 Box Shadows to Save Your Time

The 30 CSS Selectors You Must Memorize

Minify your CSS

4. Colors

Coolors.co - color schemes

0 to 255 - color shades

Flat UI colors - Flat colors

5. Others

JS keycodes

Carbon - Create and share beautiful images of your source code.

Pexels - Free stock photos

6. EMMET

EMMET Cheatsheet

HTML

div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

html:5 Vs. !

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

script:src

<script src=""></script>

input:password Vs. input:p

<input type="password" name="" id="">

button:submit Vs. button:s Vs. btn:s

<button type="submit"></button>

.title

<div class="title"></div>

a{Buy it now!}

<a href="">Buy it now!</a>

lorem20

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A corporis ipsum soluta quod incidunt iste omnis possimus itaque debitis molestiae?</p>

CSS

d

a {
  display: block;
}

d:f

main {
  display: flex;
}

maw

main {
  max-width: ;
}

ta:c

body {
  text-align: center;
}

td

a {
  text-decoration: none;
}

bgc

body {
  background-color: #fff;
}

bgi

body {
  background-image: url();
}

bgsz:c

body {
  background-size: cover;
}

bd(+)

body {
  border: 1px solid #000;
}

jc:c

body {
  justify-content: center;
}

nemethricsi / front-end-tools Goto Github PK

front-end-tools's Introduction