Hey Guys, i must say i am very glad to be part of the community. i want to be a type of developer who uses css3 grid more than using flexbox and tend to make designs responsive that way..... and i have made lots of practice with it, i also want to be a type of developer that people can say wow he is so good with css Grid, although i know flex makes things easier but to me i believe Grid is more beautiful...
Any advice for me please?
In fact, between the two there is no better or worse, I personally think as follows:
The grid does much better to make the layout organize the divs, sections, containers, etc. To organize the content of an element, using the flexbox is better.
Here is a better explanation: https://blog.logrocket.com/flexbox-vs-css-grid/
Anything in the development world whether it's a programming language, or even in this case a CSS property is just a tool. There are never betters or worsens, there are betters and worsens for every day-to-day situation.
Now about your code, as Fluffy already said your pics then breaking it, I took a look and figured out why your images src looks like this: src="/icon-music.svg" you submit do dot before the slash so it should look like this src="./icon-music.svg"
Another important thing to say is that you divide your projects by folders, the best-known pattern is with the styles (your CSS), js (your Javascript), and images folders. As it is a quick project and you are still starting the styles and js folders are unnecessary but the images folder is a good option to better organize your project.
That way the src of your images would be: ./images/icon-music.svg
Your HTML structure looks good to me, your CSS is correct, great job!
And finally, congratulations for completing this project and joining the frontend mentor community, welcome! Any questions just comment here.
difficult to get the transparency thing right without knowing the color
First, congratulations on building the project! To put the color in the image you can use a ::before, but first, it's interesting to clean the CSS of the image leaving it like this:
.right img {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 100%;
height: 100%;
object-fit: cover;
}
The object-fit: cover will prevent your image from losing resolution, you can access the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
In this case, the style of the before would look like this:
.right {
flex-basis: 50%;
margin-right: 0px;
position: relative;
}
.right.overlay::before {
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: hsl(277, 64%, 61%);
mix-blend-mode: multiply;
z-index: 100;
}
Hello, this is my first project, i would apreciate if you have any suggestions to make the code better. Thanks!!!
Congratulations to complete your first project, you can center all content by putting the following CSS on the body:
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
Apart from that and what Patrick already said, I think your project is perfect!
Hi everyone !
Every little advice will be appreciated :)
Cheers !
Congratulations to complete this project, you can center all the testimonials by putting the following CSS on the body:
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
In addition, you can also use more semantic tags for citation, such as the blockquote, and also take a look at the mentor frontend report and see the errors found in the code
Apart from that, I think your project is perfect, any doubts just comment!
Third challenge, struggled with font colors identification.
Congratulations to complete this project, you can center all the testimonials by putting the following CSS on the body:
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
it is also interesting to space the content as in the preview of the project, in its container you can put the following code
max-width: 1120px;
margin: 0 auto;
1120px is just an example, test and adapt to a value similar to the layout.
Apart from that, I think your project is perfect, any doubts just comment!
Hello,
Check out my first challenge. Thank you
Congratulations on completing your first project, you can center all the card by putting the following CSS on the body:
min-height: 100vh; display: flex; justify-content: center; align-items: center;
Apart from that, your project was very good! Again congratulations, any doubts just comment here.
Please review my code, is it bad.
First congratulations for submitting your first problem here from the front-end mentor!
The first thing that should be mentioned is the use of divs around text, use semantic HTML tags (h1, h2, h3, he, h5, h6, p, etc), for example:
<h1 class="card__title">
Get <span>insights</span> that help your business grow.
</h1>
<p class="card__description">
Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
</p>
<div class="card__achievement">
<h5 class="card__stat">10k+</h5>
<span class="card__stat-heading">
companies
</span>
</div>
Remembering that this is just an example, use the HTML tags that you think fit best.
A problem I found was that you couldn't center the card, you can do it with flexbox as follows:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
for the rest, it's a matter of you fixing the spacing and the color of the image overlay.
If you have a specific question or with my bad English feel free to make comments here, keep studying and practicing!
This is my second attempt at this project. After some suggestions from the community, I decided to take the advice I got and start over. (Thank you, @tl-lucasestevam and @grmajik!)
I learned so much on my second attempt! The first time, I was trying to apply the purple over the image as a separate div, stacked on top. It was a mess. I had no idea I could just set the image as a background and put a transparent gradient over it. I will be getting a lot of use out of that in the future!
I also learned about using semantic tags like h1, span, etc. and styling them how I like instead of using lots of divs and giving them class names. It looks much cleaner this way.
Anyway, I am still very open to suggestions. I could use some help with the responsive image's div. How can I keep the proportions the same instead of cutting off parts of the image as the screen resolution gets smaller? Thanks for taking a look!
First congratulations! Your code is much cleaner now.
But there are still some caveats, when starting a tag like h2 you cannot put a div inside it to make some of the text highlighted use the strong tag for example inside h2 instead of the div.
<h2>
Get
<strong id="insights">insights</strong>
that help your business grow.
</h2>
And also in the stats part you put a span wrapped around a div, this is not allowed in the HTML, do it that way:
<div>
<span class="number">10k+</span>
<span class="word">companies</span>
</div>
So that you can better understand the concepts of div and span I got the definitions from w3schools.
DIV:
The <div> tag defines a division or a section in an HTML document.
Note: By default, browsers always place a line break before and after the <div> element.
SPAN:
The <span> tag is an inline container used to mark up a **part of a text, or a part of a document**.
The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
In other words, a div is used to represent a block of other HTML elements, whereas a span is used to mark part of the text/document. The other difference also the div is a block-level element that way it occupies all the space it can take up on the screen, this can be seen in dev tools when inspecting a div since the span is an inline element, it only takes up space the element within it needs.
Link to a post that better explains this concept
About the image to keep the same height without it being cut to the same proportion I don't know anyway. But you can put the media query to put the image on top when it starts to get too cropped by 900px / 800px.
Whenever you send a project here to the mentor frontend it goes through an analysis to check for some errors, you can see this report by clicking on the "view report" button in the blue field below your project preview.
Congratulations again! keep studying and practicing!
This is my second challenge here on Frontend Mentor!
I am looking for help with my desktop version. I can't seem to figure out why the purple overlay over the image is showing at the corners. Also, my container div won't center on the page properly. If you use Chrome Devtools to Inspect, you will see there's an invisible column or margin that pushes the div to the left. I'm not sure how to correct this, but would love suggestions.
I will be adding the README tomorrow, June 23, 2021. Thanks for taking a look!
I took a look at your code, the first thing I noticed was the use of a tag called "row", this tag does not exist in HTML, use a div with the row class if you want to bootstrap or in the same style of code as bootstrap the same for col, etc.
Another thing is also the use of divs around the text, use semantic tags (p, h1, h2, h3, h4, h5, h6, or span). For example your card's title:
<h1>
Get <strong>insights</strong> that help your business grow.
</h1>
the strong in this case is a semantic HTML tag to make part of a text highlighted, then just style it in CSS
It's also preferable to get by class rather than id, so you won't need to repeat the CSS.
But the main thing you should do is to think about how you will organize your card, the HTML structure, there is a container that encompasses the entire card, after that, there are two divs where each one has the width: 50%, the first one will be the texts on the second will have a background with the image (you can even use the IMG tag to make it more semantic but then you will have more problems when styling, so a simple solution is to use the background with a linear gradient to put the purple in the image)
A simpler way to do all this is using flex-box, you can see the documentation at this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or in youtube tutorials if prefer but to center the card, for example, you can do the following CSS code:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center
}
I think this is the main thing for you to improve your code, English is not my native language so if you haven't understood something feels free to ask.
I have this problem solved if you want to take a look: https://github.com/tl-lucasestevam/frontend-mentor-card/blob/main/index.html https://github.com/tl-lucasestevam/frontend-mentor-card/blob/main/css/styles.css https://www.frontendmentor.io/solutions/html-css-and-flexbox-sY-UPQbE3