Front-End Lesson 6, CSS - Homework (22.11.2020)

• Checkout HTML CSS Layouts
  • https://www.w3schools.com/css/css_website_layout.asp
  • https://www.w3schools.com/w3css/w3css_templates.asp
• Checkout HTML CSS 12x Grid System
  • https://www.w3schools.com/css/css_rwd_grid.asp
• Repeat CSS Pseudo-elements (::before, ::after)
  • https://www.w3schools.com/css/css_pseudo_elements.asp
  • https://css-tricks.com/pseudo-element-roundup/
  • https://css-tricks.com/almanac/selectors/a/after-and-before/
  • CSS: :before and :after pseudo elements in practice
  • Additional video - https://youtu.be/-bwR9S5MmOI
• Repeat CSS Positioning (relative, absolute, fixed, sticky)
  • https://developer.mozilla.org/en-US/docs/Web/CSS/position
• Flexbox resources to read
  • Complete this article and try examoles - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://www.w3schools.com/css/css3_flexbox.asp
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Assigments:

• Write HTML code for this wireframe. Build only the skeleton, NO CSS needed.
• Solve all the FlexboxFroggy examples 1-by-1.
• Register in Figma app develop below shown pages (all fonts, colors, dimensions, sizes and icons should be same as on the design.):
  • Develop this wireframe - do NOT use any flex or 12x Col system. (You can use float & position)
  • Develop this page - use Flexbox technique here.
  • Develop this page - use 12x Cols technique here.

Some usefull resources:

• https://www.webfx.com/web-design/hex-to-rgb/
• https://cssarrowplease.com/
• CSS Position: https://youtu.be/jx5jmI0UlXU
• http://www.chunqiuyiyu.com/css-centering-explorer/
• Common CSS Flexbox Layout Patterns with Example Code