All solutions

Any feedback welcome!

I used the exact pixel values from the design file for this project. What's a better way to get the style to be responsive without using REM for sizing most everything?

I'm grateful to hear any feedback concerning my code: easy to read and follow?

Most of this project was pretty straight-forward for me. However, there were several coding design decisions that I made early on that made this project difficult. For example, I first tried using fetch to retrieve a local json file when import works both on the dev and final builds (using Vite); using Vue's v-for attribute for making a list for the menu instead of hard-coding each list item made easy work of the menus; instead of having a page for each planet view and using Vue Router, I instead just made a planet view component since the layout for each planet is the same. What coding design patterns did you find helpful for this project?

Of course, I accept all critique on something I missed from the design and/or code layout clarity/etc. Thank you!

In the Figma design file, there's a pointer cursor on the search bar: I don't know what that is supposed to mean. There's already a pointer cursor on the search button, so clicking the bar seems redundant. Does anyone have a clear idea?

Also, seeing anything that I missed in the design is always helpful!

This one was relatively simple. When sizing elements (padding, margins, etc), I tend to use 'rem' units everywhere to keep scaling consistent (especially when using the zoom only text option in browsers). Is it better to use 'em' or some other measure? I guess I'm asking where's a good resource for learning to build elements of your site that scale well?

This is my first project building from mobile first. In general, I tend to use 'rem' measures for sizing and sometimes spacing elements to keep layouts consistent. However, for typography, I used the exact px measures for font size, spacing, line height, etc. Is this a good approach? Any drawbacks?

I tried to scale the design for as many possible device layouts as I could, which meant adapting the design beyond mobile, table, desktop designs provided. I added responsiveness for narrow fold-able phones and hires desktops. Are there other devices that I should keep in mind when building?

I found layering the body elements very challenging since they were all askew from each other and had different layouts based on mobile vs not-mobile. It's odd that this project is labeled as beginner; or maybe, I still have a lot to learn about CSS!

This is my first time building from a design file, Fimga in this case. Did I implement spacing correctly?