Instagram Login Clone

Table of Contents

1. Overview
   • Demonstration
2. What have I learned?

Overview

This was one of my first contacts with web layout that I did a few years ago. A Responsive Instagram Login Clone built using only HTML, CSS and BEM Methodology for educational purposes.

Demonstration

What have I learned?

• CSS:
  • BEM methodology.
  • How to strategically use the margin, padding and position: relative rules.
  • How to work with relative units like EM and REM.
  • Variables.
  • Flexbox.
  • Treat the layout as a set of components.
  • Basics of Responsive Web Design.
  • To minimize code seeing patterns and common properties (minus components because they have to be independent of everything) by creating "helper classes" (as if we were dealing with a framework). Examples given on typography or on some positioning such as text-align: center.