I tried my best to use em, rem but still not sure if I had done it right.
What I find difficult is in the example, it seems that the image and the contents have the same width. I tried to make it that way but I kind of just estimating it.
Questions
A better website designing start with structure. Break your elements such way they are more accessible and manageable. What i meant is, think about above example.
'''
<main> <picture></picture> <article></arrticle> </main> '''Now you can use flex.
As a beginner '<picture>' tag may be new to you.
But i highly recommend you to learn about here
With the help of picture tag you can insert two images with media query without any CSS
Okay! your design look pretty cool but here is what can you do to improve it. Use <!DOCTYPE html> at top of your document. You can make all the design inside <main> tag. And take tow <div>. Always use <h1> tag. Here for you have used 815gb of 1000gb. For icons you have used <a> tag, images inside <a> tag is not accessible, try to use only text inside <a>.
For more accessibility and ease to make that range one thing you can do with that range illustration is
<div class="bar-container">
<input type="range" class="range" min="0" max="1000" value="1000" disabled>
</div>
And
.bar-container {
height: 20px;
width: 100%;
margin-top: 20px;
background-color: var(--Very-Dark-Blue);
border-radius: 10px;
overflow: hidden;
padding: 2px;
}
.range {
-webkit-appearance: none;
appearance: none;
width: 81.5%;
height: 90%;
border-radius: 10px;
background-image: linear-gradient(90deg,hsl(6, 100%, 80%), hsl(335, 100%, 65%));
outline: none;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
}
.range::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
}
That's it from me. Happy coding.
Maybe there are some mistakes, but I'm still learning. What should i change?
To make color lines on each card you are using pseudo elements. I will recommend to use border-top property:
.card--green {
border-top: 2px solid green;
}
I will suggest to not wrap <header> inside <main>.
I initially had problems getting it to center of the whole center div in the middle of the page.
I have suggestion to reduce your HTML code and make it more Semantic.
<main> tag.<figure> tag to wrap the <img> tag.
use img {
width: 100%;
height: 100%;
}
<h1> and <p> for other text.main {
position: absolute;
top: 50%;
left: 50%
transform: translate(-50%. -50%);
}
👾Hello, Frontend Mentor coding community. This is my solution for the Social Proof Section.
Someone have any clue why my design stop to wrap when arrives to width 300px? The rating and the customer card containers stop to stretch and I don't know why.
The thing hardest thing was to position the divs with the rating starts, without getting them out of the container because of the left padding that align them a 40px left. I used 80% width into those divs to make them inside the container, but I`m not sure that this was the best solution.
If you've any advice of how can I can improve my CSS/HTML structure, you're welcome!
I did some personal design improvements:
I would suggest to reduce font-size of <h1> and padding of other elements when screen becomes smaller.
<main> tag for your design because this is main content of your webpage and not a section.<h1> tag for every webpage and I can see in your code. <main>
<figure><img></figure>
<h1></h1>
<p></p>
</main>
position absolute or display flex method.max-width: 1440px to <body>. Your <main> element will not be in center when
width exceeds 1440px.@media query for smaller devices like galaxy fold.Figuring out how to position those boxes was a challenge, but I finally understood how to do it. Have a great day!
Instead of taking a <div> for top color lines, You can use border-top CSS property to reduse your code. I would recommend you to not upload unnecessary files and folders to save server space.
Always use <main> tag for your webpage.
<article> tag inside <main> tag for every card. <article>
<img>
<h1>
<p>
<article>
h1, h2, h3 for three cards and gave same class so I can use font-size property to adjust font size.What I learned:
Continued development/Short falls:
<h1> tag to your every webpage.<header> like : <h1></h1>
<h2></h2>
<p></p>
<article> or <section> tag for every card. And structure like: <h3>
<p>
<figure>
I hope you find this helpful.
Whenever making single component designs like this make using <main> tag.
<main>
<figure><img></figure>
<h1></h1>
<p>
</main>
Please give me your valuable feedback i want to validate email but i stuck but after some time i will update this project and correct my mistake thanks
You don't even need Javascript or other programming language to validate your email input. You just need to understand how browsers read and understand input fields like how browser saves information about user. I would recommend you to use this structure of HTML :
<form>
<input type="email" id="email1" placeholder="Enter your email..." required>
<input type="submit" value="Get Started">
</form>
I'm opened to opinions to make my code better.
I would suggest to take <main> tag to wrap every <article> tag. Then
body {
display: grid;
place-items: center;
}
Do not give width or height to <main> Or <article> tag. Instead use accurate padding using Paint app. Every article should have class="grid-item-1" and so on. <main> tag is Grid container
Use
main {
max-width: 1120px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, min-content);
gap: 30px;
}
To make your HTML even more shorter, Structure your <article> Tag like :
<article class="grid-item1">
<div class="card-head">
<img>
<div class="card-user">
<span class="name">Daniel Clifford</span>
<p class="title">Verified Graduate</p>
</div>
</div>
<h2 class="card-head">
</h2>
<p class="detailes">
</p>
</article>
Your solution is pretty cool by the way. Happy coding.