Design comparison
Solution retrospective
Hello Frontend mentor community! :)
So I did this project a while back and finally had some time to go through the code and make a few tweaks. Overall, I'm pretty happy with it. The layout is similar to some of the previous projects, so it was fun to practice and get better at it. I totally forgot to comment the code, but I think it's still easy enough to understand.
As usual, I went with the mobile-first approach, which I think is the best way to go. The project looks really cool and seems more complicated than it actually is. I always feel really proud of myself when I finish a project, and this one is no exception. Plus, I'm feeling more and more comfortable with this stuff, so that's awesome.
This is the final Newbie challenge, and I am pleased to announce that I have successfully completed all 18 of them! I didn't have a specific timeframe in mind, but I managed to finish them all in about two weeks, which is awesome considering that I started from scratch. i know this might sound a little bit cocky but i am really proud of myself :D
I'm feeling super determined and ready to keep this momentum going. It feels really good to accomplish something like this, and it's definitely motivating me to keep improving my skills.
I'm excited to start my first Junior project! I'm planning on finishing all of them in a month and a half. I want to stick with CSS, HTML, and vanilla javascript for now, just to get a really solid grasp of the basics before moving on to anything else. It's important to build a strong foundation, you know? Marathon, not a sprint, and all that.
So, I checked out the Junior projects already and they look pretty challenging, but I'm ready to tackle them! Bring on the challenges! It all begins tomorrow which is May 3, 2023.
As of May 2, 2023, I have successfully completed 18 out of the 18 available Newbie projects.
Community feedback
- @CarlHummPosted over 1 year ago
Hello there
Your solution looks good. It's mobile first with no unnecessary columns or styles, responds well, fits the design - good job! 18/18 is an accomplishment to be proud of. I'm still procrastinating doing them myself :)
The only potential feedback I can give is-
- BEMCSS Usage (If you're using this)
- Picture Element Usage
- Provide aria-label or descriptive text for Icon links ('Visit our facebook' or something)
Regarding BEM
"If your component has child elements several levels deep, don’t try to represent each level in the class name. BEM is not intended to communicate structural depth. A BEM class name representing a child element in the component should only include the base/block name and the one element name. In the examples below, note that photo__caption__quote is an incorrect usage of BEM, while photo__quote is more appropriate."
Source: Sparkbox
In your example you use
<h1 class="card__content-title"></h1>and<p class="card__content-text"></p>to represent the structure. Thinking of card as a component you could label thesecard__titleorcard__text.Another example can be seen in this CSSTricks article with the accordion.
This is not currently an issue, but if you were to develop a large page with many nested components it could become confusing and hard to maintain styles or stay consistent.
Regarding The Picture Element
"If an image resource displays well on both mobile and desktop screens, <picture> would be overkill so use <img> instead. Also, certain browsers, such as Opera Mini, do not support <picture>. As a safeguard, always specify a fallback image-resource with <img>."
Source: Cloudinary
Since the img we are talking about is the logo, which is provided by an SVG, there is no need for the picture element. We do not need to switch the image, as due to its format it scales without losing quality. All we need to do is adjust it at breakpoints with media queries, which you're already doing which is great.
Good luck on next project
Marked as helpful1@zsoltvarjuPosted over 1 year agoHello Karl! @CarlHumm
Thanks for your feedback! I found it super helpful. I knew my naming wasn't great, so I'm gonna check out that CSS Tricks page you recommended to improve my BEM naming skills.
Also, I tought using the picture element is great for accessibility, kind of like the header, main, and footer tags. Thanks for sharing that link with me and definitely will check it out!
I'm really glad I learned something new, and I appreciate you taking the time to offer your input. Have a great day and happy coding! :)
0
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