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.
@catherineisonline
Posted
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 helpful
@hdreddy
Posted
@catherineisonline Thanks for the review.
@joaskr
Posted
Hi :)
Good job with the challenge. You did great. If you want to further improve your solution, here are some tips:
Accessibility
<div class="attribution"> with <main class="attribution">.<div class="head">Improve your front-end skills by building projects</div> with a simple <h1 class="head">Improve...</h1>Code
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:position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); from <body>margin: auto; from <div class="attribution>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.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 helpful
@hdreddy
Posted
@joaskr Thank you so much for the detailed and eloborate review. That really helps.🤝
@joaskr
Posted
@hdreddy No problem 😊 I'm glad I could help
@hdreddy
Posted
@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.
@hdreddy
Posted
Is the code readable? What are the improvements required in the code?
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
