Awesome

Table of contents

• Overview

• Projects

  • 1-NFT Site
  • 2-Product Splash Page
  • 3-Blog Page
  • 4-Journal Site

  Overview

  Completed these projects that are parts of Scrimba's Responsive Design Module. I mastered HTML/CSS and responsive design concepts in these projects. You can see the visual representations of the each app below.

  Projects

  1-NFT Site App

  Layout on mobile devices;

  

  Layout on tablets or wider devices;

  

  Description

  What I Learned?

  • Thinking responsively

  • Absolute and relative units

  • Media queries and mobile-first design

  • flex-wrap and gap

  • flex-basis, flex-grow, flex

  • gap property

  • Responsive navbar

  • <meta viewport> tag

  2-Product Splash Page

  Layout on mobile devices;

  

  Layout on tablets or wider devices;

  

  Description

  What I Learned?

  • Change the case of the text

  • Viewport units(vw,vh)

  • Flexbox orders

  • Box-sizing property

  • Styles form elements, modifiers, pseudo classes like :hover, :focus

  3-Blog Page

  Layout on mobile devices;

  

  Layout on tablets or wider devices;

  

  Description

  What I Learned?

  • CSS Grids: grid-template-columns

  • grid-gap

  • minmax()

  • fr unit

  • grid areas and media queries

  4-Journal Site

  Layout on mobile devices;

  

  Layout on tablets or wider devices;

  

  Assets

  • Fonts:

    • "Roboto"
    • "sans-serif"

  • Colors:

    • text-colors:
      • hex( #202020),
      • rgb(20, 20, 20), rgb(94, 91, 88);
    • background-color:
      • hex(#fafafa);

  • Icon Set:

    • https://tablericons.com/