peeweetje / Conquering-Responsive-Layout

21 days challenge course by Kevin Powell

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Conquering-Responsive-Layout

Challenge 1

Solution

  • Websites are responsive by default, There is no need for the height, it is cause for al sort of problems, if you need to give an element a height, just don't!
  • If you need more background use padding.

Challenge 2

Solution

When getting in to bigger screensizes we want to Change the layout to limit the total line length of text(the text is stretchen all across) the solution is to set a max-width: it let's you design for your big screens without things stretching from one side to another, it's limit the space your are working in.

Challenge 3

Solution

  • Build your own responsive website with the design that's given. Put all that you have learned into practice!

flexbox-challenge

Solution

  • display flex => flex container => allways the parent, default = row.
  • Gap is very useful but only supported by firefox => the solution = col + col = margin.
  • Build the responsive website with the design that's given using flexbox.
  • With flexbox there is allways gonna be a parent and the directive children becoming the columns.
  • When using media-queries start with the smallest screen (mobile-first).
  • Don't use fixed media-queries, look at where the design breaks and improve accordingly.

About

21 days challenge course by Kevin Powell


Languages

Language:HTML 63.4%Language:CSS 35.5%Language:JavaScript 1.1%