@SanderBuist2
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.
Latest solutions
Country Search Page using Angular and CSS
#angularSubmitted 12 days agoAny recommendation is appreciated
Article Preview Component build with HTML CSS Flex Vanilla JavaScript
#lighthouseSubmitted about 1 year agoAny recommendation is appreciated
Testimonials grid section using CSS Grid Flex
#bem#lighthouseSubmitted about 1 year agoAny recommendation is appreciated
Four Card feature section using CSS Flex Grid Media Queries
#bemSubmitted about 1 year agoAny recommendation is appreciated
Product preview card using CSS flex and grid
#accessibility#lighthouseSubmitted about 1 year ago- Html semantic
- Grid
How can I make a dynamic grid without using media queries
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)), but make the container have a maximum widthRecipe page build with HTML and CSS
#accessibility#bemSubmitted about 1 year agoI would like to know if there is a better way to add padding to the tr
Any recommendation is appreciated.
Latest comments
- @oppahero
Hi! Congratulations on finishing this challenge✨
You did a great job!
📍 For SEO, you can add the meta tag description
- @CHBNDJWhat 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
@oppaheroHi!
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-mihailWhat 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?.
@oppaheroHi!
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.
- Instead of a
<div class="main">use the<main>tag
The
<main>tag defines the main content section of a web page.- For the title of the page it would be more appropriate to use the
<h1>tag, instead of a div. And continuing with the hierarchy of the headers, the titles of the cards can be in anh2
The
<h1>tag is the most important, as it defines the main title of the page.- Instead of a
<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- For the cards you can used
<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 - Instead of a
- @Kingkobi01@oppahero
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.">- You can use Lighthouse, it is an automated tool to improve the performance, quality and correctness of your web applications.
📍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 - @georgekrauseWhat 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?
@oppaheroHey!
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
- Embed code in the <head> of your html
<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 - @georgekrauseWhat 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
@oppaheroHey! :)
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: centerThe 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: 100vhThis way you could do without the margin-top and the margin-bottom that you have in the body
Happy coding!
Marked as helpful
