@R3ygoski
Posted
Hello @Tanuja0530, congratulations on completing the project.
Your layout seems to be incorrect because the card is at the bottom of the screen, and there is also an overflow happening. To fix this, consider resetting your CSS by using this snippet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Now, you need to remove position: absolute from div.card. Finally, in your div.container, you can replace min-height:300px; with min-height:100vh;, so your card will be perfectly centered on the screen.
I also noticed that you used spacing like margin to center the items inside your card. For centering, it's always recommended to use display: flex;, which will allow you to align elements perfectly and ensure they stay aligned even if the size of the parent element changes. Consider using these snippets:
.card {
height: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
.contant {
text-align: center;
}
This way, you will center all the elements inside your card. You can also apply this to the button area by creating a <div> that wraps around all of them, and in this div, add display:flex; and gap: 1rem, so they will have equal spacing between them. Or, you can continue using margin as you did.
Also, note that the fonts you tried to use were not applied because there is no src property in CSS. To change the font, we use font-family: "Font Name".
Now regarding accessibility, I'll start with semantic HTML, as it's very important for both accessibility and SEO. Your HTML is not very semantic, and you used few semantic tags. Examples of tags that could be changed:
<div class="container">can be changed to<main>, as the<main>tag is typically used after the<body>tag to indicate the main content of the page.<div class="card">could be changed to<article>, as the content here is self-explanatory and independent of the page, but it could also be a<section>.
Your image also has an empty alt attribute. We use alt="" like this for icon or background images, but for a picture, we need to provide a descriptive text, such as alt="Avatar of Jessica Randall".
Another accessibility issue is the Headings. They are incorrect. When using Heading tags like <h1>, <h2>, etc., they should be structured hierarchically, starting with <h1>, then <h2>, and so on. So replacing your <h2> with <h1> might be more appropriate and accessible. Also, consider replacing <h4> with <address> as the content there refers to an address.
Lastly, instead of using <button>, it would be more appropriate to use <a> because those "buttons" are actually links to other sites. When creating something to interact with the page, such as changing themes, opening modals, or closing modals, we use <button>. But when we want to navigate between pages, we use <a href="#">.
That's it! Congratulations again on completing your project. Keep practicing and improving, and if you have any questions, feel free to comment below.
Marked as helpful
