Full-Stack Web Developer | Based in Italy 🇮🇹 | Love to work with HTML5, CSS3, PHP, JavaScript (ES6+), React, TailwindCSS, Node.js, Prisma ORM and Laravel.
I’m currently learning...Laravel and livewire, exploring their efficient fullstack development capabilities. Additionally, I'm eager to enhance my styling proficiency and delve deeper into Node.js.😼
I would love some advice on structure, SEO, and especially accessibility. I know I rushed through the task. It's basically all new to me and I don't really know what the right thing to do is. I'm relying on you for any technical advice 🙏🏻
N/A
What challenges did you encounter, and how did you overcome them?Centering content in screen Overcome by setting default margin and padding of all elements to 0, used a flex container with 100vh to center vertically
What specific areas of your project would you like help with?N/A
Congrats for your solution!🥳
The <div> element that contains the attributions, the one below the <main>, could have been used as a <footer> element.
Explanation:
In HTML, the <footer> element is specifically designed to represent the footer of a section or a document. It typically contains information such as copyright notices, contact information, links to related documents, and other metadata about the section.
Using <footer> instead of a generic <div> has several benefits:
In your case, since the <div> element below the <main> seems to contain attributions, which is a typical type of content found in footers, it would be more appropriate to use the <footer> element instead.
Hi @HectorAgValenzuela,
First of all congrats for your solution! 🎉 I've reviewed your source code, and after analyzing the structure, I have a few suggestions for future improvements. It's always a good practice to properly structure the code within the <body> element by using predefined semantic elements. I recommend checking out this link.
This resource explains the concept of semantic HTML without going into too much detail and highlights its importance, particularly for SEO and accessibility purposes. One specific suggestion I have is to utilize the <main> and <footer> tags in your HTML code, as they provide several benefits:
Semantic structure: By incorporating the <main> and <footer> tags, you establish a semantic structure for your HTML document. These tags clearly indicate the main content and footer sections of your webpage, enhancing the accessibility and maintainability of your code. This approach reflects the logical organization of your content.
Accessibility: Semantically structuring your content using <main> and <footer> tags improves the accessibility of your website. Assistive technologies, including screen readers, can easily identify these sections, making it more convenient for users with disabilities to navigate through the main content and locate important information in the footer.
Search engine optimization (SEO): Search engines like Google rely on semantic HTML to understand the structure and meaning of webpages. Utilizing the <main> and <footer> tags provides clear indicators to search engines regarding the primary content and supplementary information on your page. This can positively impact your search engine rankings and improve the visibility of your website.
Code organization and readability: Incorporating dedicated tags like <main> and <footer> enhances the organization and readability of your HTML code. Other developers working on your codebase or maintaining your website will have a clearer understanding of the purpose and structure of different sections. This makes it easier to update or modify the code in the future.
To address the issue at hand, I suggest removing the margins and ensuring that the card is placed inside a container that occupies the entire screen both in terms of height and width (you can use <main>😼). This way, you can utilize flexbox to center the card structure.
By adopting semantic HTML and utilizing tags like <main> and <footer>, you not only enhance the accessibility and search engine visibility of your website but also improve the overall maintainability and understandability of your codebase. This best practice contributes to better user experiences and efficient web development workflows.
Let me know if you have any questions or need further assistance.
Best regards,
David Ochoa. 🙏🏻
First of all Congrats for your solution. The issue with your CSS is that you applied the opacity rule to the img element within .card .image img:hover. This rule is only triggered when the mouse hovers over the image itself, not the SVG shape (eye). As a result, even though the SVG displays correctly when hovering over the .card .image element, the image's opacity does not change as desired.
The issue:
.card .image img:hover {
opacity: .5;
}
A simple solution would be to move the hover effect to the container of the img element, which is the element with the class .image. By applying the hover effect to this container and targeting the img element inside it, you can achieve the desired opacity change.
Here's the correct CSS code:
.card .image:hover img {
opacity: 0.5;
}
With this modification, when you hover over the .card .image element, the img element inside it will correctly change opacity as intended. I hope I've been helpful to you, and keep up the great work!
Best regards,
David Ochoa. 😼
Great job on the structure! Considering it's your first project, it's truly impressive. I wanted to commend you on your attention to detail and the overall quality of your work. I do have a few suggestions that you might find helpful.
Firstly, regarding the structure of your code, you mentioned using the <main> tag to contain all the code. While the <main> tag is typically used to define the primary content of a webpage, it is not necessary to enclose all the code within it, as the <body> tag already fulfills that purpose. You can optimize your code by eliminating the redundant <main> tag.
Additionally, I noticed that you used a div with a class .attribute for a certain section inside the <main> section. In terms of semantics and best practices, it might be more appropriate to use an <footer> element instead and place it outside the <main> section. The <footer> element is specifically designed to represent the footer section of a webpage, where you can include information such as author details, copyright information, contact information, or relevant links. This small adjustment will enhance the clarity and structure of your code.
Furthermore, I suggest paying attention to the padding of the <h2> element. By refining the padding values for the left and right sides, you can fine-tune the spacing and alignment of your heading, ensuring it looks visually appealing and consistent across different devices. Consider experimenting with different padding values to achieve the desired visual effect.
Lastly, I highly recommend leveraging the powerful inspector tool available in your browser. This tool allows you to examine your webpage's layout and design on various devices and screen sizes. By utilizing the inspector, you can identify any potential issues or areas for improvement, ensuring that your design is both responsive and visually appealing across different devices.
I hope you find these suggestions helpful. Keep up the fantastic work!
Best Regards,
David Ochoa. 😼
My friend, there are indeed many improvements you can make in your code. Firstly, I noticed that you haven't used either flexbox or grid extensively. It's essential to delve deeper into these technologies as they are crucial for creating responsive layouts across all devices. By utilizing flexbox and grid, you can achieve responsive designs without the need to manually position elements using 'top' or 'bottom'. I would strongly recommend familiarizing yourself with these tools as they provide more efficient ways to handle layout and alignment.
By incorporating flexbox or grid into your CSS, you can take advantage of their powerful features to create flexible and adaptive designs. These technologies provide intuitive methods for positioning, spacing, and aligning elements, allowing your layout to automatically adjust based on the available space and screen size. This not only simplifies the code but also improves its maintainability and readability.
In summary, I encourage you to explore flexbox and grid further to enhance your skills in creating responsive layouts. They will provide you with a solid foundation for designing websites that adapt seamlessly to different devices. I'll leave you with some very helpful and interesting links to learn more about these two things:
Flexbox:
Flexbox Froggy - A fun interactive game to practice flexbox concepts
Grid:
Grid Garden- A game-like tutorial to learn CSS grid
These resources will provide you with a solid foundation and help you master flexbox and grid. Enjoy learning and applying these techniques to create responsive and well-structured layouts!"
Hi @godwinjs, congratulations on completing this challenge! To answer your question, you will need to use grid in your CSS or flexbox. The first thing to do could be to modify the main element with the following properties:
min-height: 100vh; sets the minimum height of the <main> element to occupy at least the full viewport height, ensuring that the content is visible even on smaller screens.display: flex; enables flexbox layout for the <main> element.justify-content: center; horizontally centers the content within the <main> element.align-items: center; vertically centers the content within the <main> element.After that, you can make the following changes to improve the responsiveness of the card:
position: absolute;, left: 50%;, and top: 50%; properties from the .qr_card class. These properties are not necessary for achieving responsiveness and centering the card.@media only screen and (min-width: 376px)) and their corresponding CSS rules. This simplifies the code and avoids the need for compromises and extra breakpoints.max-width or min-width value of the .qr_card class maybe to 350px. This allows the card to adapt its width based on the available space while maintaining a consistent layout.text-align: center; to the .qr_card class. This will align the card's content (title and text) to the center, making it visually pleasing on different screen sizes..qr_card_title and .qr_card_text classes. You can use font-size: 3em; for the title or maybe font-size: 1rem; for the text, making the font sizes more appropriate for different screen sizes.these could be your style.css
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
font-size: 10px;
}
header {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
}
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
font-size: 10px;
}
header {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
}
.qr_card {
margin: 0 10px;
background-color: hsl(0, 0%, 100%);
padding: 20px 20px 0 20px;
max-width: 350px;
border-radius: 1rem;
box-shadow: 10px 10px 10px hsl(212, 39%, 85%);
transition: width .5s;
text-align: center;
}
.qr_card_title {
font-weight: 700;
color: hsl(218, 44%, 22%);
text-align: center;
font-size: 3em;
}
.qr_card_text {
font-weight: 400;
color: hsl(220, 15%, 55%);
text-align: center;
font-size: 2em;
}
.qr_card_img {
border-radius: 1rem;
max-width: 100%;
}
main {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.qr_card {
margin: 0 10px;
background-color: hsl(0, 0%, 100%);
padding: 20px 20px 0 20px;
max-width: 350px;
border-radius: 1rem;
box-shadow: 10px 10px 10px hsl(212, 39%, 85%);
transition: width .5s;
text-align: center;
}
.qr_card_title {
font-weight: 700;
color: hsl(218, 44%, 22%);
text-align: center;
font-size: 3em;
}
.qr_card_text {
font-weight: 400;
color: hsl(220, 15%, 55%);
text-align: center;
font-size: 2em;
}
.qr_card_img {
border-radius: 1rem;
max-width: 100%;
}
These changes will help make the card more responsive and provide a better user experience across various screen sizes. Another suggestion would be to keep the directory organized by avoiding nested routes of elements. The simpler, the better. Anyway, this could be a possible solution. I hope I have been helpful.
Regards,
David Ochoa 😼