Mobile Configuration
Created by Maggie Yan
Languages used HTML, CSS, Javascript
Objective This project was for an assignment in my Intro to Front-End Web Development course. The objective of the project was to create a responsive webpage that would adjust to the size of the viewport. The purpose of this project was to explore and become more familiar with styling (flexbox, absolute and relative positioning), media queries, and responsive web pages.
Desktop configuration
Mobile configuration
The ProcessThis project was split up into three parts: creation of the webpage, using flexbox and position absolute/relative to adjust for narrow and wide devices, and making the webpage responsive using media queries. First, the webpage was created and styled accordingly. Then, the webpage was styled even further to account for vertical and horizontal orientations by using flexbox and absolute/relative positioning. Finally, the webpage was made responsive with a media query, in which the layout would switch to a horizontal three column layout (as seen in the first image above) if there’s lots of horizontal space (>768 px). The webapge was designed first for mobile devices, then for desktop devices.
A snippet of code from the CSS, which shows the media query for a desktop device. See full code on Github.