Karin• 10
@KarinPortfolio
Submitted
P
Jan
@Jan-Dev0
All comments
Here are a few suggestions for improvement:
- Use
display: flexon the body to center your container both horizontally and vertically. Also, settingmin-height: 100vhensures that the body takes up at least the full height of the viewport, making sure your content is always centered regardless of the viewport height.
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }- In general, it’s better to use class names rather than tags as selectors.
- It’s also a good practice to style everything for mobile view first, use media queries with min-width, and then adjust the styles for larger screens.
Marked as helpful
0- Use
- Psamritbasnet• 180
@samritbasnet
Submitted
Your design looks great, but there is something you could improve. You're showing the form again using
form.style.display = 'block'which removes the Flexbox properties. Instead, you could control the visibility by adding and removing a class, like this:.hidden { display: none; }This way, the Flexbox layout stays intact.
Also, I would suggest using media queries with min-width for responsive design. It’s better to style for the mobile view first, and then in the media queries, only change the styles needed for larger screens.
0 I just took a quick look at the code and noticed the use of !important frequently. This likely happens because Bootstrap is included after your stylesheet, causing Bootstrap’s styles to override yours. To ensure that your styles are applied correctly, you should include your stylesheet after Bootstrap’s in the HTML.
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="styles.css">Marked as helpful
2- ArijTrad• 50
@ArijTrad
Submitted
This looks really good! I would just recommend considering using min-width in your media queries, as it generally works better with a mobile-first approach. Also, you might want to use slightly longer and more descriptive variable names to make the code easier to understand. Other than that, great work!
0 - Levan• 90
@Mosacd
Submitted
What are you most proud of, and what would you do differently next time?
- manually changing styles with Javascript probably takes more time than just adding and removing classes, so I should use that approach.
2)I made it so that the pop up can disappear only by pressing on the button (should have made it so that it'd close by pressing anywhere)
What challenges did you encounter, and how did you overcome them?
3)I made the div with triangular shape to be a child of the "sharedata" div which makes transitions more uneven (when disappearing there is a brief moment where u can see triangle as it's own thing and not part of the bigger shape) so I just played around with setTimeout function. I should have tried making it a neighbouring element to the "sharedata" div rather than a child, (or start using "::before" and "::after" pseudo classes?)
What specific areas of your project would you like help with?
4)I would like to know how to make the picture look exactly like in the given examples. (do we change it with Css or just use a different picture/use some editor for it)
The result looks good! However, the JavaScript code is quite extensive. By using CSS classes, you could achieve the same functionality with just a few lines of JavaScript. Cheers!
0 What are you most proud of, and what would you do differently next time?
I took the time to set up the custom properties I needed from the design system, meaning I didn't have to repeat myself. I may have overused the spacing variables though, I found that there were some cases where it would have been more suitable to set a max-width and have auto margins instead. So I'll try to be aware of that next time.
What challenges did you encounter, and how did you overcome them?
I had a lot of trouble getting the mobile & tablet hero image to be zoomed in while not overlapping the spacing below it and not causing the page to be wider than the viewport. Eventually found a way around it, but not sure if it's the best solution.
What specific areas of your project would you like help with?
Something I was wondering about towards the end of this project is how properties should be changed in media queries. There are two ways I can think of: re-assigning the properties directly, or initially setting up the properties to use global custom properties which can then be re-assigned in media queries. I think I've seen both done, but I opted for the former. Interested to know what other people have done.
Looks very good. The only think I would note is that I think it's not necessary to use min-height on both html and body.
Marked as helpful
0- Aamir Khan• 130
@Aamnbaba
Submitted
What challenges did you encounter, and how did you overcome them?
Layout fixing and designing, by watching the Kevin Powell Project and redo as I learned.
That looks very good.
1 @VitorEmanoelNogueira
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of finally using CSS GRID on a project for the first time and of making a good use of the pseudo-class :nth-child.
That looks great! The only thing I would mention is that it's not necessary to use the tag name along with the class name, like div.card. .card alone is sufficient.
Marked as helpful
1- EmicJoykiller• 50
@EmicJoykiller
Submitted
What are you most proud of, and what would you do differently next time?
I easily achieved the mobile design first, implementing all the styling and typography. However, I would like to learn and use SASS for my next projects.
What challenges did you encounter, and how did you overcome them?
"I had some difficulty transitioning from the mobile layout to the desktop layout. Eventually, I was able to implement the desktop layout query, but not in the way I expected or with a responsive approach, as I had to use some hardcoded details.
What specific areas of your project would you like help with?
I need help learning how to design and implement responsive layouts from the start of a project, including specifics like how to use containers, how many sections or divs to include, and how to style them with CSS to achieve the desired results. Any guidance in this area would be greatly appreciated.
The mobile version looks good. However, the desktop version has some issues with the size proportions – it appears too large. Here are a few suggestions for improvement:
-
CSS Reset: Implementing a CSS reset might be beneficial to set margin and padding to zero and use box-sizing: border-box. This ensures a consistent layout across different browsers.
-
Font-Size: The font-size is set to 16px in :root. Instead, you could use html { font-size: 62.5%; } which makes calculations for rem values easier – 10px will equal 1rem, simplifying the math.
-
Image Sizes: For images, consider using srcset or the picture element to handle different screen sizes. This allows you to optimize images based on max-width or min-width of the viewport, improving performance and responsiveness.
0 -
- ubaid215• 30
@ubaid215
Submitted
What are you most proud of, and what would you do differently next time?
It's my first design so it will take some but after I started working on other projects my work speed increased and my code is also clean compared to the previous one.
What challenges did you encounter, and how did you overcome them?
My main challenge during this project was making things the same as the given design. But over time I figured it out and now it's easier for me
Nice effort on your first design! Here are a few suggestions that might help improve the structure and styling of your project:
1 Improve HTML Structure:
- Use Container Elements: To better organize your content, consider using a <main> element to wrap all your sections. This helps group related content together:
<main> # Your content here </main>- Semantic Elements: Use <section> elements to separate different parts of your content, and wrap the entire content in an <article> element:
<article> <header> # Image and header </header> <section> <h1>Simple Omelette Recipe</h1> <p>An easy and quick dish...</p> </section> # Additional sections </article>2 Use of HTML Elements:
- IDs vs. Classes: It's generally better to use classes rather than IDs for styling, as classes are more versatile:
<div class="img-box"></div> <div class="item-box"> <div class="text"> <h2>Preparation time</h2> </div> </div>- Semantic Tags: Use <strong> for emphasizing text rather than <b>:
<strong>Total:</strong> Approximately 10 minutes3 CSS Practices:
- Use Flexbox: Flexbox can be very useful for layout and centering content. It makes managing layouts much easier:
body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } section { display: flex; flex-direction: column; align-items: center; padding: 20px; }- Avoid height: 100% and width: 100%: These properties may not always be necessary, especially when using Flexbox or Grid. Relative units like rem or em often work better for responsive design:
section { max-width: 80%; margin: auto; }Overall, you're on the right track. Keep experimenting with these suggestions, and you'll continue to improve.
0 What are you most proud of, and what would you do differently next time?
Flexbox usage, although I'm still unsure if that is the best approach.
What challenges did you encounter, and how did you overcome them?
Using flexbox in a project for the first time. I used freeCodeCamp and MDN to learn the basics of flexbox.
What specific areas of your project would you like help with?
It is knowing if this is the best way to achieve this, and is the industry standard way for achieving this or is there a better way?
Looks good but consider using flexbox on body:
display: flex; justify-content: center; align-items: center; }Then your container is right in the center and you don't have to work with margins.
Marked as helpful
0
