@oppahero
@SanderBuist2
Submitted
What are you most proud of, and what would you do differently next time?
Completing the challenge with minimal javascript. Allmost everything is done in css. First I wanted to use DOM with javascript but decided to stay away from it.
@oppahero
Posted
Hi! Congratulations on finishing this challenge✨
You did a great job!
📍 For SEO, you can add the meta tag description
What are you most proud of, and what would you do differently next time?
Using CSS GRID I'm always using Flexbox so I wasn't paying attention to Grid but with this project i learned flex grid deeply .
What challenges did you encounter, and how did you overcome them?
The challenge to convert my desktop grid into media query grid with the correct position of my element
What specific areas of your project would you like help with?
None
@oppahero
Posted
Hi!
Congratulations on finishing this challenge✨
I have a suggestion about your code that might interest you 💡
📍 In the card, if you give a fixed width to the title ("item__description__1"), this can't adjust himself to the container. So, in mobile screen the text is overflow
To avoid this, don't give a width to it ("item__description__1"), and just let it adjust his width according to his container
📍 Group styles that are the same, as in the case of images.
Instead of applying the same rules to each image class (item__picture__1 ... item__picture__5), you can indicate them directly in the img tag
img {
border-radius: 50%;
width: 40px;
height: 40px;
}
This way you have cleaner and easier to maintain code.
📍 Take a look at BEM notation, to better name your classes
Happy coding!
@h-mihail
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
@oppahero
Posted
Hi!
Congratulations on finishing this challenge✨
I have a suggestion about your code that might interest you 💡
📍Use appropriate semantic HTML tags to define the different sections of your page.
<div class="main"> use the <main> tagThe <main> tag defines the main content section of a web page.
<h1> tag, instead of a div. And continuing with the hierarchy of the headers, the titles of the cards can be in an h2The <h1> tag is the most important, as it defines the main title of the page.
<div class="card-container"> you can use the <section> tag.The <section> tag defines a generic section of content within a web page. Can be used to divide content into thematic sections
<article> tag<article> represents independent and autonomous content, such as a news article, a blog post, a product or, precisely, a card.
Using the correct tags in HTML is essential for creating web pages that are semantically rich, accessible, easy to maintain, and SEO friendly
Happy coding!
Marked as helpful
@Kingkobi01
Submitted
@oppahero
Posted
Hi!
Congratulations on finishing this challenge✨
I have a suggestion about your code that might interest you 💡
📍You can use the <picture> tag when you have different versions of an image for different device scenarios
<picture>
<source srcset="image-large.jpg" media="(min-width: 1200px)">
<source srcset="image-medium.jpg" media="(min-width: 600px)">
<img src="image-small.jpg" alt="Description">
</picture>
📍A recommended practice and it is important for SEO is to include the meta tag with the description
The <meta name="description"> element provides a summary of a page's content that search engines include in search results.
<meta name="description" content="Put your description here.">
📍Use appropriate semantic HTML tags to define the different sections of your page.
For the card it would be more appropriate to use the <article> tag, this is because:
<div> is a generic tag for grouping elements. It has no specific semantic meaning.<article> represents independent and autonomous content, such as a news article, a blog post, a product or, precisely, a card.Happy coding!
Marked as helpful
@georgekrause
Submitted
What are you most proud of, and what would you do differently next time?
I'm getting more comfortable with html elements like table, article, ol, and ul. Still learning different sudo elements with in css to make it easier to style the page.
What challenges did you encounter, and how did you overcome them?
It was a challenge getting just the bottom line with in the table element instead of a box around the whole table like it normally is. Stack overflow was a great resource for solving that issue.
What specific areas of your project would you like help with?
Is there an resource for different page layout instead of writing it out from scratch?
@oppahero
Posted
Hey!
The link to the site here in the solution seems to not be working, but the one in your repository is fine
To load the letters that you will use on your page you can use @font-face if you have the fonts
@font-face {
font-family: "Young-serif";
src: url("../assets/fonts/young-serif/YoungSerif-Regular.ttf");
font-weight: 400;
}
Or include those from google fonts
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet">
Happy coding!
Marked as helpful
@georgekrause
Submitted
What are you most proud of, and what would you do differently next time?
For this project i learned about position using css. I had to adjust line height as well as width of elements to get the look i wanted.
What challenges did you encounter, and how did you overcome them?
The biggest problem i had was centering everything in the card. Once i figured that out my solution moved the line height to make it appear to have a lot of space between elements like and . It took some time to make it look right.
What specific areas of your project would you like help with?
no
@oppahero
Posted
Hey! :)
To center content, display:flex is a good option
With flex you can use the justify content and align elements properties.
To center on the x-axis, you can use justify-content:center. And to center on the y axis, align-items: center
The card will be centered according to the height of its container, to do this you can indicate the height of the viewport to the body. Like this, height: 100vh
This way you could do without the margin-top and the margin-bottom that you have in the body
Happy coding!
Marked as helpful
@iam-inath
Submitted
@oppahero
Posted
First, well done! :)
I know this demo doesn't have many elements, but the html structure is important.
It's good that you include main, but the card has no structure. All card styles are in the main one.
You can also define a section for the card and style it, using a class or an ID.
Take a look at the BEM nomenclature, it's to better name your classes
@muhtasimhafiz
Submitted
@oppahero
Posted
Good job, it looks like the demo, just need to adjust the dimensions
Flex is ideal as it allows centering on both axes. When using this in the body you don't need margin 0 auto
To consider: Be careful with the use of !important, they are not good practice and should be avoided because it makes the code more difficult to debug by breaking the cascade
