CSS Layouts

[ivoputzer]

• Grid systems
• Flex(box)
• Columns
• Responsive design

[AlexSemykin]

Layouts and patterns: https://csslayout.io/ ~Layout: https://every-layout.dev/~

[giuxtaposition]

Flex

CSS Tricks - A Complete Guide to Flexbox Flex Cheatsheet

Grid

CSS Tricks - A Complete Guide to Grid Grid Cheatsheet

Responsive Design

Responsive Layouts, Fewer Media Queries

[ivoputzer]

grids

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
• https://www.w3schools.com/css/css_grid.asp
• https://css-tricks.com/snippets/css/complete-guide-grid/

flexbox

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://web.dev/learn/css/flexbox/
• https://css-tricks.com/dont-overthink-flexbox-grids/

colums

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

some frameworks?

• http://flexboxgrid.com/

[aldomalerba]

Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid https://cssgridgarden.com/

CSS Templates https://www.w3schools.com/css/css_templates.asp

[Biatel]

https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/

[ivoputzer]

• replicare una pagina di giornale (new york times)
• creare un menu di navigazione
• creare una pagina di articolo (blog post)
• esercizio che non usa le colonne ma usa tutto lo schermo (es landing page interattiva)
• qualcosa di mobile (da capire cosa –– per responsiveness)