Skip to content
Submitted almost 5 years ago

First project v1.1: Vanilla CSS/HTML from XD design

Jeremy Ng•200
@lanechanger
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Update as of 1/24/2021:

  • updated the HTML tags so they're not all divs
  • removed some overflow properties to mobile doesn't look broken on landscape
  • removed explicit img tags for the 2 background images and placed them both as background-images similar to ApplePieGiraffe's solution but took it one step further and also scaled the image size accordingly
  • made the footer fixed that tucks underneath the card if they collide
  • refactored some codes and removed redundant codes

Original post as of 12/29/2020: Hi all,

This is my first project so there's most likely a lot that needs to be cleaned up so I'll keep it to just a few questions!

  1. HTML: I feel like I was spamming divs here, are there more specific tags that I could be using?
  2. CSS variables: I learned by watching SCSS and to put variables in a separate variables partial. But I wanted to practice vanilla CSS here. Having that said what is the best practice for where to put the variables. In <HTML> or <body> I'm guessing? (probably not * which is where I dumped them as everything will have it)
  3. CSS class naming: When I learned SCSS it was done using BEM style, which I guess I could have used in regular CSS here. Are there naming conventions for vanilla CSS that is commonly used professionally that I should look into?
  4. CSS redundant code: Are there any redundant coding that I'm doing like setting the same property and value in multiple places that would have been inherited that I could tighten up and refactor? (ignore the scss/js folder)
  5. Viewport: I mostly tested this using the discrete design viewports given in the firefox mobile viewer (ctrl-shift-M). 1440x720 for desktop and 375x667 for mobile but I find that if I just look at it normally in my full screen browser then the background images don't quite line up properly. Should I worry about viewports other than the ones given in the design in future challenges?

Thanks all!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Jeremy Ng's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord