Skip to content
Submitted about 4 years ago

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

Jeremy Ng•200
@lanechanger
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

Please log in to post a comment

Log in with GitHub

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