Responsive Website Demo

Visit the deployed page here. https://tan-xianglong.github.io/responsive-home-page/

Table of Contents

• General Information
• Language and Tools Used
• Concepts Used
• Details

General Information

The purpose of this project is to demonstrate my understanding of responsive website and my ability to develop it from scratch.

Language and Tools used

• Javascript ES2015
• HTML5
• CSS
• Git v2.15.0
• Visual Studio Code v1.62.0

Concepts used

• Flexbox
• Grid
• Media query - mobile first
• Mobile navigation bar
• Relative measurements

Details

• The website is design using the mobile first approach. CSS are first written from the mobile device perspective and wider screen configuration are added after using min-width in media query.
• The min-width pixels in the media query are decided based on how the items/elements will "break" as the screen grow or shrink. min-width are not preset based on certain device size so that flexibilty is optimized for all screen size.
• Flexbox and Grid are employed as the screen width increases. All sections except for "Founders" uses flex. Grid is used at the "Founders" section to ensure items across the multiple rows do not move undersirably.
• Relative measurements such as rem are used on font size and paddings and percentages are used on width.
• Font sizes increase as the screen becomes bigger to improve readability.