Latest solutions
Responsive E-Learning Landing Page using Generic HTML/CSS, BEM Naming
#accessibility#bemSubmitted almost 3 years ago
Latest comments
- @d3monviking@dtp27
Hi Priyanshu!
That looks really good overall! The one thing I would recommend is to take care of the HTML and Accessibility issues. You want to make sure to include the
alt=""
property, not just for accessibility, but also incase the image doesn't load for whatever reason.Also, adding properties like
aria-label
is a good idea for anchor tags to describe where the link would take you. Here's a good set of articles from MDN. Hope this helps.Happy coding!
Dan
- @cristinakellyt@dtp27
Hi Christina!
That looks fantastic! I noticed that you're using the BEM naming convention. It was recommended to me that I start using it as well. How have you liked using it and how does it compare with anything you've used in the past?
Thanks!
Dan
- @dhruvjha206@dtp27
Hi @dhruvjha206!
Congrats on your first challenge, and welcome to Frontend Mentor! A few recommendations I have on your solution:
- I would use another
p
instead ofspan
so that it's treated like a block component in normal flow instead of an inline component. - It's good that you're using Flexbox to center, but I would add
flex-direction: column;
to make sure that the card and footer are stacked vertically instead of horizontally. - For the
img
width, I would usemax-width: 100%
; so that it responsively adjusts to screen size. - It also seems like you hard-coded the width
.container
to1440px
, which is the total width of the page the design is at. Instead, I would play around with % for the width of the.container
, which will make the card responsively adjust.
Let me know if you have any questions.
Happy coding!
Dan
- I would use another
- @iTwiixZ@dtp27
Hi Alexis!
Pretty good solution overall! A few things I would recommend:
- I see you're using Flexbox in the card. I would also use it in the
body
, since that will then center your entire card on the page. Also includemin-height: 100vh;
in the body to ensure the content takes up the whole page (i.e. it'll be centered relative to the entire page). 2 . I would also change thewidth
property in yourimg
tomax-width: 100%;
. This will ensure the image scales down responsively with smaller screen sizes. - I recommend setting the base font-size in the
body
, then usingrem
to scale fonts from the different elements up and down. This can make it easier to control all of the fonts. - I don't think you need those
<br>
elements in your paragraph to match it "line-for-line". Pay attention to the design font sizing and weights, and it should take care of itself.
Let me know if you have any questions or thoughts.
Happy coding!
Dan
Marked as helpful - I see you're using Flexbox in the card. I would also use it in the
- @HammadEngr@dtp27
Hi Hammad!
Pretty good solution overall! Flexbox makes it super easy to center the NFT component on the page. You would to add something like this to your body:
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
That will center the direct child elements on the page, which in this case is just
main
(your component).Let me know if you have any questions about this, thanks!
Dan
Marked as helpful - @fica25@dtp27
Hi Filip!
Great solution overall! Make sure you style your horizontal line in the component. If you're using HTML to make a
<hr>
component, you can do something like this in the css:hr { border: 1px solid hsl(215, 32%, 27%); }
Also, pay attention to the
font-weight
property for the different elements to make sure they are similar to the design.Happy coding!
Dan
Marked as helpful