Submitted almost 3 years ago

Responsive E-Learning Landing Page using Generic HTML/CSS, BEM Naming

accessibility, bem

Dan•300

@dtp27

A solution to the Skilled e-learning landing page challenge

Preview Code

Solution retrospective

I would love people to take a hard look at my code and give me as much feedback as possible. :) This one gave me some trouble, and I tried a few things for the first time. Particular items I would especially love feedback on are:

My usage of the BEM naming system
My attempt at making my HTML more accessible
How I can improve the responsiveness and overall style of the hero images. I initially used HTML image elements but switched to background images in CSS since I couldn't get the HTML elements version to work.
The overall responsiveness of the page. I used the Chrome developer tools to design it using mobile, tablet and desktop views, but it looks awkward when resizing the page between those points. Also, I don't like how the hero image is also re-sizing within the div; I feel like it should be one size, then at the breakpoint change to the next hero image.
I never got the shading on the gradient to work properly.
The way I used CSS variables for colors and font styling. This is the first time I actually used Figma so I used the actual pixel sizes instead of having a base size and using rems to size different elements.

Any and all feedback is welcome, including for anything I didn't mention. Thanks!

Code

Please log in to post a comment

Community feedback

David•7,960
@DavidMorgade
Posted almost 3 years ago
Hello Dan, congrats on getting this solution, the layouts looks pretty and the responsiveness is great!

I will try to help you answering your questions the best I can.
1. Seems good for me, but you should try to take more advantage when getting on a new block, for example, if you define a courses class then all their childs should not care about the main class they should start like courses__description courses__heading etc... good job on the naming of your buttons to get those juicy styles!
2. Great work defining articles on each card, I would personally divide the main in two sections because they are really semantically related, instead of divs, one is the hero and the other is the grid of skills.
3. Using properties like object-fit: cover or object-fit: contain and getting your image on a container with display: block and 100% width can save you a lot of work, give it a try on your next challenge!
4. Don't bash yourself with this, the responsiveness is totally fine and the project looks great even on a 4k monitor.
5. You can use some cool gradient generator like css-gradient, maybe this helps you with your gradients.
6. Avoid pixels for sizes, because this can be buggy on high density and low width screens, stick to rems, if you want to use rems as you were using pixels, you can convert your root font-size to 62,5% so 1 rem equals 10px, and then on the body re-assign the font-size to 16px to avoid unnecesary behaviours.
Snnipet to get 1 rem = 10px for easy Figma conversion to CSS without using pixels:
```
html {
  /* 1rem = 10px */
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}
```
Hope my answers did help you, if you have any questions, don't hesitate to ask!
Marked as helpful

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