Front End Cheat-Sheet
Uploaded by
Haidy HanyFront End Cheat-Sheet
Uploaded by
Haidy HanyFRONT-END WEB
DEVELOPMENT: CSS GRID
Website Layouts, Website display
creates a block-level/inline-level grid container
Components, and CSS grid-template-rows, grid-template-columns
defines space between grid lines
STANDARD HTML TEMPLATE grid-area
gives item a name + can be referenced by
<!DOCTYPE html> template created by grid-template-areas
<html> grid-template-areas
<head> defines a grid template by referencing the
<meta charset="utf-8" /> names of the grid area
<title>Template Title!</title>
<meta name="description" content="Example" />
</head> FLEXBOX
<body>
<p>Hello World!</p> display
</body> creates a block-level/inline-level flex container
</html> flex-direction
establishes main axis and defines flex direction
align-items
WHAT IS RESPONSIVE DESIGN? defines alignment along cross axis
justify-content
defines alignment along main axis
MEDIA QUERIES
@media(max-width: 320px)
@media(min-width: 901px)
@media(min-width: 600px) and (max-width: 900px)
Responsive design is a set of best practices that
allows your webpage to be fluid and change its
appearance and layout depending on the device REFERENCES
and screen width. We can achieve this with CSS
● Udacity’s Front-End Nanodegree style guide
Grid, Flexbox, and media queries.
● Example of CSS Grid and Flexbox properties
● Media query documentation
● Responsive design documentation
