Mobile Home Screen Mockup with CSS
See the mockup here.
For my Hand Held assignment this week, I practiced using CSS to layout elements for mobile by recreating my iPhone home screen. I started by sketching my actual screen elements, and adjusted a few things to make the design more interesting.
On Figma, I took a screenshot of my actual home screen and created grids to help guide my icon sizes. I chose a color scheme and started creating rough elements and layout and Figma.
I laid out the grid and chose a color scheme before creating my elements
My final design on Figma
Once I started coding on codesandbox, I faced a few issues with the grid layout. I went for two large icons that are aligned with other small icons. I tried making flexboxes within bigger flexboxes, but still couldn’t get the alignment to be as clean as I wanted to be.
I spent some time figuring out why my icons wouldn’t fall into place with the flexbox property, and realized after studying the browser dev tool that all my icons (within the button property) had built-in padding
After I got rid of the padding, my icons were in their respective flexboxes, but I still couldn’t adjust their alignment to be the way I wanted them to
With help from Max, I found out about the grid property! I was finally able to put everything together neatly.
Source code: