I had a bit of troubles getting the dimensions right, and getting the colors right for the image, they are not exactly the same as the original design but I feel they come close enough.
As always any suggestions or feedback is welcomed.
Hello there!
For a better refinement of dimensions and colors in your solution, try incorporating the Pixel Perfect Pro extension.
This tool enables you to compare your solution with the original design, making it easier to fine-tune dimensions and ensure a seamless fit.
Give it a shot!
...made with a lot of love 🤘🏻🙂
Hello Cheosphere,
I'm truly impressed by your skills and the quality of your work. I consistently find myself comparing my solutions to yours and thoroughly reviewing the code.
In this challenge, you performed exceptionally well, as always. However, there's a minor issue with the Mobile S - 320px view.
The paragraph of the first card collapses with the title due to a negative margin-top in the following code:
.parrafo {
margin-top: -22px;
font-size: 0.96rem;
font-weight: 200;
line-height: 24px;
color: hsl(217, 12%, 63%);
}
To address this, I suggest setting a specific margin for mobile devices, as demonstrated in the code snippet below:
@media screen and (max-width: 450px) {
.parrafo {
/* Set your preferred value */
margin-top: 0;
}
}
Keep up the excellent work, mate!
Hey Ali, fantastic work on your project! You've achieved a lot, and with a few tweaks, it could be truly exceptional.
Firstly, consider organizing your code by creating separate files for HTML and CSS.
This practice, common in web development, enhances code management, especially in larger projects, and contributes to better overall performance. Adapting this habit in smaller projects will set a solid foundation for future endeavors.
Things I like about your code:
<main> tag, which many people do not include.Suggestions for improvement:
HTML
In the Why us section, observe the design preview where each sentence is on a single line. You have two choices: either use the <br> tag to separate them or create a <p> tag for each paragraph.
Using <br>:
<p>Tutorials by industry experts<br>
Peer & expert code review<br>
Coding exercises<br>
Access to our GitHub repos<br>
Community forum<br>
Flashcard decks<br>
New videos every week</p>
Using <p>:
<p>Tutorials by industry experts</p>
<p>Peer & expert code review</p>
<p>Coding exercises</p>
<p>Access to our GitHub repos</p>
<p>Community forum</p>
<p>Flashcard decks</p>
<p>New videos every week</p>
CSS
To perfectly center an element on the screen :
1.Ensure that the body occupies at least the entire screen height.
body {
min-height: 100vh;
}
2.Utilize one of these techniques: Grid CSS or Flexbox.
Relying solely on margins may fall short.
Using Grid:
main {
display: grid;
place-items: center;
}
Using Flexbox:
main {
display: flex;
align-items: center;
justify-content: center;
}
Feel free to explore other solutions. Additionally, check out my take here. I'm open to any feedback.
Great job once again on your hard work, and best of luck!