Design comparison
Solution retrospective
I am very newbie for coding. It may look ugly for professional eyes. It is not responsive for mobile. I still struggling with @media. I am waiting for tips. Thanks a lot for your time already
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hello Apo, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
I noticed that you used a
button
in which case the best option would be ana
, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!to solve this problem do this:
<a href="/">Learn More</a>
A document ought to have one primary landmark, and the absence of a main tag around the page's primary content is the root of this issue. On this page, there is no other element that is more important than the one that this challenge is based on, so to solve it, wrap all the content in the'main' tag.
It's always a good idea to pay close attention to the proper use of semantic html elements because they are crucial for screen reader users to understand what the main content of the page is in the case of the'main' tag!
The remainder is excellent.
I hope it's useful. 👍
0 - @catherineisonlinePosted almost 2 years ago
Looks cool actually. The only thing I would change besides responsiveness is that I would improve the color of the buttons when you hover over them and add transitions. Also, to remove the report issues use main tag instead of div with the class main-container
0 - @arkaroy135Posted almost 2 years ago
Hello Apo, Hope you are doing well. You did great so far in this project, however I have some tips regarding your question.
- Use this for responsivness,
@media (max-width:1439px){ .main-container{ display: flex; flex-direction: column; } /* add your codes */ }
- Start your project with a mobile first approach. Build the mobile view first, then change it using media query for different screen-size. However, this approach varies people to people, but I think mobile first approach is more efficient to build any project.
You can check my solution of this project as a reference. Feel free to ask questions. Happy coding.
0
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