i have made the challenge with the help of html and css flex
Design comparison
Solution retrospective
Hii , first i made desktop version which was not mobile responsive, then i made mobile version which was not desktop responsive, atlast, with my sherlock mind i made this step by step and it is working fine.
My code must be very messy, though any feedback is appreciated, please go and have a look in to my code, any guidance will be appreciated. Should i dive into javascript chapters or should i learn more css ?
Thank you.
Community feedback
- @vanzasetiaPosted about 3 years ago
👋 Hi Aditya!
I have some feedback on this solution:
- Accessibility
- For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technology such as screen readers or screen magnifiers ignore those images. In this case, all images are decorative only, except the logo image. - Alternative text on
img
should be informative and human-readable or meaningful. For example,logoimg
is not human-readable and doesn't give any information at all. - Use the company name as the alternative text for the logo image. You don't need to put "image" or "logo", since assistive technology such as screen reader will pronounce it as image. So just write Huddle as the
alt
value,alt="Huddle"
. - Use
button
element for any interactive elements, like in this case the Try it free, Get Started For Free buttons should usebutton
tag (not only styled like a button). This is important since assistive technology can't know that it is a button or a link, unless you use the correct HTML element. - Also, the About Us, FAQ, and anything like that should be links instead of paragraph. If you inspect the
footer
on the Frontend Mentor site, there are two sections, EXPLORE and COMMUNITY. As you can the Unlock PRO, and etc all of those are link elements, the same logic applies in this case. - The email and the phone number should be a link too. But, for email you should write the link like this:
href="mailto:[email protected]"
and for the phone number,href="tel:+1234567890"
- Add custom
:focus-visible
style for all interactive elements, in this case, the buttons and links. This will make everyone can navigate this website comfortably using keyboard (Tab
andEnter
). - Use
rem
or sometimesem
unit instead ofpx
. Usingpx
will not allow the users to control the size of the page based on their needs.
- For any decorative images, each
- Non Accessibility
- The huddle logos are stretching on mobile view (360px * 640px).
- On desktop view (1260px * 800px), the
first-block
section doesn't horizontally in the center. - Still on the desktop view, the
contentinfo
is too narrow when it should have equal width with the mockup image. - In my opinion, the way you name your classes are strange. I would recommend using BEM class naming convention. It's popular and can help you write better CSS.
- Write your code with consistent style, meaning things like indentation, white space should be consistent across your code.
The next thing that you want to do, whether learning JavaScript or sharpening your CSS skill is 100% up to you. There's no absolute path to follow if you're self-taught. But, my recommendation is to learn or sharpen your CSS skill and if you get bored with HTML and CSS then you may want to take a break or learn a little bit about JavaScript.
That's it! Hopefully, this is helpful!
Marked as helpful1@adityaauchihaPosted about 3 years ago@vanzasetia Thank you for feedback, i have written everything down and will start working on it. Thanks for suggesting bem, sometimes i forget basics html, and how much time i should take for completing one challenge ?
0@vanzasetiaPosted about 3 years ago@adityaauchiha It depends on the difficulty of the challenge and how much time you can spend in a day to finish the challenge. There are no absolute hours to complete any challenges.
As far as I could remember, I think I finished this challenge in 6 - 7 days 😅.
I would recommend focusing on writing good quality code and speed will come naturally.
Marked as helpful0@adityaauchihaPosted almost 3 years ago@vanzasetia thanks, i am starting javascript today will try to take js newbie challange after completing it.
0 - Accessibility
Please log in to post a comment
Log in with GitHubJoin 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