html-css-responsive.md

      

Responsive Web Design

1. Responsive Web Design Fundamentals

2. Flexbox Froggy

Finish the subtasks (1) and (2) above.

When complete do the following:

1. Make screenshots of your progress in (1) and (2) and put the screenshots in task_responsive_web_design folder in your kottans-frontend repo
2. In your kottans-frontend repo README.md:
   • add header ## Responsive Web Design
   • embed the screenshots or add links to the screenshots
   • list your reflections on all subtasks (what was new to you, what surprised you, what you intend to use in future)
3. Great job! Go ahead and share your progress with others – post a message in course channel: Responsive Web Design — #done (or Responsive Web Design — #p2p_done if you are p2p course student) and add the link to your repo. This step is important, as it helps mentors to track your progress!
4. Study Extra Materials below to improve your skills. If you feel it affects your overall course performance consider reverting to those later e.g. when you have all mandatory tasks completed.
5. You may skip Optional materials from this task (if any).

When you finish this task you can proceed to the next one.

Extra materials

• Specificity
• Specificity calculator
• Grid Garden
• 11 things I learned reading the flexbox spec
• Flexbox Zombies (game)
• A simple explanation of High DPI screens

Done?

➡️ Go forward to HTML & CSS Practice

⤴️ Back to Contents