Designing webpages with a grid can help create a consistent design flow and symmetrical design layouts. In this video, you look at how to grids are created.
- [Instructor] Designing webpages with a grid,…can help create a consistent design flow,…and symmetrical design layouts.…Grids are broken down into equal width,…evenly spaced columns,…that are used as a guide for laying out…various page components.…Gutters can also be included to add consistent spacing…between columns.…Page components are arranged within the columns,…and can span one or more columns.…There are different ways to define a grid,…but a common layout for webpages…is to use a 12 equal-column grid.…
12 is easily devisable by two, three, four, and six,…making it easier to create responsive designs.…A grid can be created with design software…such as Photoshop or Sketch.…There are also generators such as this online tool,…GridCalculator.dk.…To make a grid, first define dimensions…such as the max width of the entire page design,…and the number of columns.…I'll stick to a 12-column grid for this example.…You can add a gutter width to add…spaces between the columns,…or set it to zero, if you don't want to use any gutters.…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.