K.Damsith• 330
@Damsithcoder
Posted
Hello .My congratulations ! I recommend if you can use grid or flex to styling elements might more clean easy to styling. Great work .keep coding...!
0
This is my first challenge solved by using HTML and CSS
@Damsithcoder
Posted
Hello .My congratulations ! I recommend if you can use grid or flex to styling elements might more clean easy to styling. Great work .keep coding...!
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
HTML 🏷️:
non-semantic
markup, which causes lacking of landmark for a webpage<div class="div-1">
element with the semantic element <main>
in your index.html
file to improve accessibility and organization of your page.<div>
or <span>
<main>
element should include all content directly related to the page's main idea, so there should only be one per pageHEADINGS ⚠️:
<h1>
h1
element identifying and describing the main content of the page.h1
heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.sr-only
class to hide it from visual users (it will be useful for visually impaired users)CSS 🎨:
margin
and padding
to center the component both horizontally & vertically. Because using margin
or padding
will not dynamical centers our component at all statesFlexbox
or Grid
layout. You can read more about centering in CSS here 📚.Grid
to center the componentbody {
min-height: 100vh;
display: grid;
place-items: center;
}
body {
margin-right: 560px;
margin-left: 560px;
padding-top: 150px;
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
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