Looking to hire developers?
Any and all feedbacks on my code are welcome.. :)
@darryncodes
Posted
Hi Mahesh,
A really decent effort on this one, well done!
You could centre your design responsively in the viewport with this snippet on your <body>:
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
Marked as helpful
@The4thDimension
Posted
@darryncodes Thank you so much.. I look forward to trying it out on the next project. Cheers...
@PhoenixDev22
Posted
hello Mahesh, I have some suggestion:
Page should contain a level-one heading, you can replace <h3>Equilibrium #3429</h2> by <h1> ( in this challenge ).
Make sure the opening and the closing tag are the same .
For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. And alt in the avatar img shouldn't be empty . read more about alt for informative or decorative images..
Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in `this challenge is an anchor tag <a>.
Whenever you include interactive elements (button, links, input, textarea), make sure you include clearly visible focus-visible styles as well as hover ones. This will make the users can navigate this website using keyboard (by using Tab key) easily .
Element <p> not allowed as child of element <span> in this context.
</span> <span class="text">
<p>Creation of <span id="name"> Jules Wyvern</span></p>
</span>
You can use unordered list <ul> to wrap <div class="left">and in each list item would have <img > and <p>.
The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.
No need for <hr class="line"> , you can use a border-top to the <div class="foot">.
Try flexbox properties and a min-height 100vh on the main.
It's best practice not to use pixel for font-size.
Hopefully this feedback helps.
Marked as helpful
@The4thDimension
Posted
@PhoenixDev22 I really appreciate going through the chunk of my code and providing these valuable suggestions. I hope to do better on the next project. Thank you so much for your feedback..
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
