Design comparison
Solution retrospective
What did you find difficult while building the project? Container Positioning Which areas of your code are you unsure of? I wanna get better at positioning containers exactly where I want.
Community feedback
- @catherineisonlinePosted almost 2 years ago
Cool solution!
To improve semantics, make sure to wrap the entire code in the main tag not including header or footer tags. It will help to remove report issues and improve accessibility as well.
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩
Marked as helpful1 - @joaskrPosted almost 2 years ago
Hi :)
Good job with the challenge. You did great. If you want to further improve your solution, here are some tips:
Accessibility
- You should use HTML landmark elements such as <main> <header> <nav> <footer> because they improve accessibility. In your code, you can replace
<div class="attribution">with <main class="attribution">. - It is considered a good practice to use h1 on a page. In your case you can replace
<div class="head">Improve your front-end skills by building projects</div>with a simple<h1 class="head">Improve...</h1>
Code
- I see that you used
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);for placing the content in the middle of the screen. Even though it works, it is not the best and easiest way to do it. I would suggest looking into flexbox. If you would like to implement that in your code there are a couple of steps that you have to do:
- remove
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);from <body> - remove
margin: auto;from <div class="attribution> - Add the following properties to the <body>:
min-height: 100vh; display: flex; justify-content: center; align-items: center. Flexbox just makes it easy to position elements and it's later easier to make it responsive.
- You can also change px to rem/em. It is better for responsiveness to use these units. You can read more about them here
Here are some useful resources for learning flexbox. Article explaining properties Short video and game to practice flexbox
Overall, great job :) And congratulations on finishing your first challenge! Keep coding, don't give up and good luck with future challenges. Of course, feel free to ask me if you have any questions - here or on slack channel.
Have a great day!
Marked as helpful1@hdreddyPosted almost 2 years ago@joaskr Thank you so much for the detailed and eloborate review. That really helps.🤝
0@hdreddyPosted almost 2 years ago@joaskr Please help me with making a responsive one for my mobile view. When I see the output in my mobile it looks completely different than the sample one given. how to use different size images for mobile view and desktop view.
0 - You should use HTML landmark elements such as <main> <header> <nav> <footer> because they improve accessibility. In your code, you can replace
- @hdreddyPosted almost 2 years ago
Is the code readable? What are the improvements required in the code?
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