Please take a moment to review the component I have created using HTML, CSS, JavaScript, and Animate.css. I would greatly appreciate it if you could rate it on a scale of 1 to 10 and provide any feedback you may have for future enhancements.
Hey, i also have some suggestions for improvement for you.🙃
Espacially for responsive images, there is the <picture> element.
The code for it could look like this:
<picture>
<source media="(min-width:40em)" srcset="image-desktop"> // media query
<img src="image-mobile"> // fall-back image
</picture>
You can read more about the picture-tag here
What has always bothered me a lot is the little white border under the image.
You can fix this by assigning the display: block; property to the image.
i hope you find this helpful mate 🤝
I really appreciate all kind of feedbacks. I faced alot of challenges when working on this project. I read it online that its best to start from the mobile design first, which i did but converting it back to the desktop view (grid) was where the issue started,
All this issues i faced when i was trying to convert the mobile view to desktop view, the mobile view is working just fine. I really appreciate all feedbacks of any kind and better approach i could have teken. Thank you very much
Hey @Ferabel,
I'm back and identified your gap-problem. You gave every box a specific width. Remove that and give your parent container a max-width (for example 65rem). Now every box take the given space which is provided by the columns.
This should fix it ✌️
I really appreciate all kind of feedbacks. I faced alot of challenges when working on this project. I read it online that its best to start from the mobile design first, which i did but converting it back to the desktop view (grid) was where the issue started,
All this issues i faced when i was trying to convert the mobile view to desktop view, the mobile view is working just fine. I really appreciate all feedbacks of any kind and better approach i could have teken. Thank you very much
Hey, i can fix your centering issue.
Use the min-height property for the body and center the minibody with place content
This sould look like this:
body{
min-height: 100vh;
display: grid;
place-content: center;
}
with min-height: 100vh; you can be sure that the body always has at least the height of the browser window. You can implement it in every project before you start styling.
and what strikes me is that you created the columns of the minibody with auto. Instead of this you can use the fr Unit. This allows you to divide the available space into as many equal sections as you like. You can read read more about this here: https://css-tricks.com/introduction-fr-css-unit/
If you have specific questions feel free to reach me out 🤝
I learned about HSL and how it relates to RGB, which was very interesting. I added the box-shadow too. I like little details like that.
I wondered about the font import. I went back to the google font page and used their cdn code. Maybe that was what I was supposed to do anyway, but from the specification, I wasn't sure. And the @font-face rule didn't work because of a CORS error. But with the google font link code, everything was fine.
I built the whole thing using flex and tested it on various sizes. It transitions smoothly at all sizes, so I didn't see a specific reason or way to use the responsive widths indicated. If I was restacking or arranging based on width, that would have been different. I'm not sure what I was supposed to make of that.
Hi coder, 👾
your solution is great! You have a good eye for the details. I have some recommondation for you.
Grid & Gap
Remove the margin of your <p> elemets.
It is a popular technic to remove the margin of all elements before you start styling.
To create the distances you could use the gap property in combination with display: flex; or display: grid;
This could look like this:
*{
margin: 0;
padding: 0;
}
.modal{
display: flex;
flex-direction: column;
align-content: center;
row-gap: 1rem;
}
Semantic HTML
Also you sould use semantic html tags like <main> for your modal or <h1> for your headline. Here you can read more about that: https://www.w3schools.com/html/html5_semantic_elements.asp
I hope you find this helpful 🤝😉
Hi @ELU,
your solution looks great! I have some recommendations for you.
Centering
You should remove the width, margin and padding of your <body>. The body should always be on width: 100% (which is the standard for block-elements). Use this to center your main-section:
body{
display: grid;
place-content: center;}
Aspect-ratio
Instead of setting a width and a heigh´t, you could use use aspect-ratio property. Use this in combination with the width of your element and the height will always increase proportionally.
width: 200px;
aspect-ratio: 1 / 1;
In addition your sould use responsive untis like rem or em for building your website. Here you can read more about css units: https://www.w3schools.com/css/css_units.asp
i hope you find this helpfull 🤝
Day 3: learning and practicing layouts according to the size of the device with HTML and CSS.
Hey @iWatt92 , 😎
I have a little improvment for your button.
You could remove the margin-right property on your <img> element and add this to your button:
display: flex;
justify-content: center;
align-items: center;
column-gap: 0.5rem;
Now your content ist centered.
Another useful tip relates to the responsive image. For responsive images you should use the <picture> element. This could look like this:
<picture>
<source media="(min-width:600px)" srcset="image-desktop">
<img src="image-mobile">
</picture>
you can read more about the picture-tag here: https://www.w3schools.com/tags/tag_picture.asp
feel free to ask if there are any other questions. If you are not shure how to implement this, you can look over for my project.
i hope you find that helpfull 🤝
All feedbacks are welcome Thank you
Hey 🫡
i have some suggestions for this.
Use another container to bundle your two divs together. Specially in this case i would make sense to use the semantic <main>-element. Define your grid-settings (the two colums) here.
Add this to the body the make place your main-container in the center of the browser.
body{
width: 100%;
min-height: 100vh;
display: Grid;
place-content: center;
}
In addition you should add the fonts to the header of your html:
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap" rel="stylesheet">
now you can define the font-familiy with : font-family: 'Hanken Grotesk', sans-serif; and the font weights (500, 700 or 800) for your elements.
Let me now if there are any other questions.
I hope you find this helpfull.🤝
It would be great if someone could help me about setting blue colors as the original one in real picture.
Hello @GreyCodder,
the background-color is a linear-gradient. Add this to your result - div:
background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
The same goes for your circle. You can read more about this here: https://www.w3schools.com/css/css3_gradients.asp
I hope you find this helpfull 😊🤝
What I found most difficult during this project was setting up the html structure that would be good for both mobile and desktop views.
I also struggled with deciding if I should use grid, flexbox or mashup of the 2 and finally decided on the latter. I'm not sure if this is the right approach though.
My design is not a 1:1 reproduction of the original, but I'm satisfied with how it looks now.
I'll be vary happy if you check it out and I'd appreciate any feedback!
Hey Adriana,
i can see that you have implemented my <picture> advice.
Only use the this tag when there is more than one source for the image.
You can red more about it here: https://www.w3schools.com/tags/tag_picture.asp
Furthermore you could replace the <nav>-tag width a <header>-tag.
The nav is only to mark the menu for navigation
I hope you find this helpfull. Otherwise your Code seems clean to me. Keep having fun.😎
My biggest issue was with setting background-image property. I'm only used to putting <img> tag in html and providing source to the picture there, but in this project I felt I had to create a container for the picture and use css background-image property. I don't have a proper understanding of this method and all the background-size, and background-repeat properties, so my design kept being wonky for a long time without me understanding why. Even when I succeeded to put it toghether properly, I'm still not sure if my method is the best solution. I'd be extrememly grateful for feedback on it.
Hello Adriana ✌️
I have a recommendation to solve your issue with the background.
For responsiveness it is usual to use the Picture-element
The <picture> element contains two tags: one or more <source> tags and one <img> tag.
in the <source> tag you can define your media queries
In your case it could look like this:
<picture>
<source media="(max-width:600px)" srcset="images/image-product-mobile.jpg">
<source media="(min-width:600px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-desktop.jpg" alt="Product">
</picture>
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Hey, this already looks better than your last project 😁
Here is my advice for this one:
Put your main-container and the image in an additional div and give it the property display: grid; and create two columns of equal size width grid-template-columns: 1fr 1fr;.
Grid is an important technique. Make sure that you lern more about it.
I hope this can help you 👌😉
Put this to your stylesheet 😉
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&family=Outfit:wght@300;400;600&display=swap');
and set font-family: 'Hanken Grotesk', sans-serif; to your body
hope i could help you a little bit 👍
