grid layout and media queries
What challenges did you encounter, and how did you overcome them?layout
What specific areas of your project would you like help with?none for now
I think that maybe when you are using the grid layout you can also use the property min-height: 100vh, that way your content will be centered vertical, at the moment is on the top of the screen. This you can add on your @media screen 992px. Overall it looks good!!!
Hello, I think that your code look good but maybe for the <div class="line"></div> you don't need to create this way. Instead you can add for example the colors lines in the same <div class="card card-1">, then go to your CSS file and add the property border-top : 5px solid var(--cyan), and like that with the other cards. This way you will save writing more lines of codes.
I'm only proud of Not Having Given Up
What challenges did you encounter, and how did you overcome them?Honestly, this was more difficult than other more complex challenges I've done. The worst part was getting a certain amount of space between the bullets and the text of the lists. It took me a long time to find a solution that worked even after having everything else ready. I think it's almost perfect, it looks good on mobile-first and desktop too.
What specific areas of your project would you like help with?...
To make the HTML more semantic, you can replace the <div> elements with more appropriate HTML5 semantic elements that better describe the purpose of the content.
for example using <main> tag is used to wrap the main content of the page.
<article> tag is used to represent a complete, self-contained piece of content (the recipe). <figure> and <figcaption> tags are used to represent the image and its caption. <section> tags are used to group related content sections (like preparation time, ingredients, instructions, etc.). <h1>, <h2>, <strong>, <ul>, <ol>, and <table> tags are used to provide semantic headings, lists, and tables for better accessibility and SEO. The <footer> tag is used for the attribution section at the bottom of the page.Few things I saw on your code, for example you were not using the font family they suggest on the challenge. It will be good for practices to follow the style-guide.md that they provide to us. Overall is a good job!
I am satisfied that I made the responsive card.
What challenges did you encounter, and how did you overcome them?The challenge was centering the card in mobile and desktop mode, which was overcome through the 'use of flexbox and mediaquery.
What specific areas of your project would you like help with?I would like to know a better solution than my.
Your provided HTML code includes some semantic HTML elements, such as <h1>, <div>, <img>, <p>, <strong>, and <a>. These elements convey the meaning and structure of the content to assistive technologies and search engines.
Here's a breakdown of some of the key semantic elements in your code:
<h1>: Represents the main heading of the page. <div>: Used for grouping content and applying styles. <img>: Represents an image within the document. <p>: Represents a paragraph of text. <strong>: Represents strong importance, typically rendered as bold. <a>: Represents a hyperlink.Overall, your code seems to use semantic HTML elements effectively. However, you can further enhance semantic structure by ensuring that elements are used appropriately to convey the meaning and structure of your content. Additionally, you may consider using semantic elements like <header>, <nav>, <main>, <article>, <section>, and <footer> to provide additional meaning and structure to your document.
To improve the semantic structure of the provided HTML code, you can consider using appropriate HTML elements instead of multiple <br> tags. Here's a suggestion:
<div class="qrcode">
<img src="image-qr-code.png" alt="QR Code">
<div>
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
In this revision:
I replaced the <br> tags with appropriate paragraph elements <p> to maintain semantic structure and improve readability. Added an alt attribute to the <img> tag for accessibility.