making it responsive was quite interesting(not funny at all), only cause I haven't gotten a hang of media queries and flexbox other than that, it was pretty good😊.
Well done Matey! Good practice I bet.
If I were to nitpick I'd offer the following suggestions:
You've used incredibly small font sizes (10px). Consider that you should use 16px as you're smallest size for normal content. (a copyright or T&C could be smaller for example).
You've used hard widths for many things like your heading and paragraph elements. You can instead set a max-width and allow them to grow into their space but be limited to a certain width. To make sure you have space around the element put padding on the parent element. E.g.
<div style="padding: 1rem">
<h1 style="width: 100%">Hello</h1>
<p style="width:100%">It's a me, Mario!</p>
</div>
Note: block level elements have width: 100% by default (like h1 and p).
In the above, the h1 and p elements take up all the space except for 1rem on the left and 1rem on the right. Making them fit in nice and snug.
The breakpoint for the larger screen-size is too early and so you have a container that is breaking out of the viewport/screen. Consider putting the breakpoint later, at about 800px. Then for the mobile view, give the container a max-width: 380px (or about there) and margin-inline: auto (same as margin-left: auto & margin-right: auto) to center it. There will be empty space around the container at medium screen sizes but it's way better than having the container outside the viewable area.
This is a bit more complicated but use padding over margin for spacing elements. The reason is that margins don't have background colours, you can only make changes to the content box + padding, and margins collapse on each other and you might be scratching your head as to why a margin is not showing up even though it's set, that is because if there is a top margin, it will collapse with margin above it. (2 touching vertical margins will collapse on each other). Prioritize using flex/grid gap for spacing, then padding, then positioning (top, left, right, bottom, inset etc) and lastly (if you have to) margins. It will save you a good amount of heartache.
So, you're main container has a width: 70%. You can get a much better result by setting a max-width: 380px (or similar value) and setting it's margin to 1rem/16px or setting body { padding: 1rem }. In this particular case I'd set the margin on the .container because you may not want padding through the entire body, say if you had a banner going from left to right, it would look stupid with padding on either side.
Anyway, hope that wasn't too much. Best of luck!
making it responsive was quite interesting(not funny at all), only cause I haven't gotten a hang of media queries and flexbox other than that, it was pretty good😊.
Well done Matey! Good practice I bet.
If I were to nitpick I'd offer the following suggestions:
You've used incredibly small font sizes (10px). Consider that you should use 16px as you're smallest size for normal content. (a copyright or T&C could be smaller for example).
You've used hard widths for many things like your heading and paragraph elements. You can instead set a max-width and allow them to grow into their space but be limited to a certain width. To make sure you have space around the element put padding on the parent element. E.g.
<div style="padding: 1rem">
<h1 style="width: 100%">Hello</h1>
<p style="width:100%">It's a me, Mario!</p>
</div>
Note: block level elements have width: 100% by default (like h1 and p).
In the above, the h1 and p elements take up all the space except for 1rem on the left and 1rem on the right. Making them fit in nice and snug.
The breakpoint for the larger screen-size is too early and so you have a container that is breaking out of the viewport/screen. Consider putting the breakpoint later, at about 800px. Then for the mobile view, give the container a max-width: 380px (or about there) and margin-inline: auto (same as margin-left: auto & margin-right: auto) to center it. There will be empty space around the container at medium screen sizes but it's way better than having the container outside the viewable area.
This is a bit more complicated but use padding over margin for spacing elements. The reason is that margins don't have background colours, you can only make changes to the content box + padding, and margins collapse on each other and you might be scratching your head as to why a margin is not showing up even though it's set, that is because if there is a top margin, it will collapse with margin above it. Prioritize using flex/grid gap for spacing, then padding, then positioning (top, left, right, bottom, inset etc) and lastly (if you have to) margins. It will save you a good amount of heartache.
So, you're main container has a width: 70%. You can get a much better result by setting a max-width: 380px (or similar value) and setting it's margin to 1rem/16px or setting body { padding: 1rem }. In this particular case I'd set the margin on the .container because you may not want padding through the entire body, say if you had a banner going from left to right, it would look stupid with padding on either side.
Anyway, hope that wasn't too much. Best of luck!
Things are getting a lot better. I managed to finish this in good time with few issues.
A key component I realised with this one is to properly plan out your html structure which saves you a massive headache later down the line.
Otherwise any feedback is super appreciated. Help me and I will give you advice on how to escape a rabid bear attack!
Gareth
Can anyone help with the html issues related to using font awesome. I can't find a solution anywhere... TT
Not so bad, went well.
Any feedback is appreciated and I'll send you cupcakes for your effort.
If you'd like to join my discord for newbie front end devs send me a DM.
Gareth
not sure about that preview... go look at the site. It's better than the preview. This is the second time this has happened. Does anyone know what's going on with the preview? Or is it just me... TT
Hello there,
I restarted the project 2 times as I didn't really get a solid grasp of what the html layout should be. I finally settle with what I have now and it's working well.
I had particular difficulty getting the list items to align properly.
Any feedback is highly appreciated. In fact I'll use voodoo to protect you from ghosts if you help me! Great deal I'd say!
P.S If you DM me I'll send you my discord, I'm putting together a little community of active front end developers who are looking to improve their skills. So if you'd like to join feel free.
Also the preview is bugged. If you visit the live server it looks nothing like the preview image. Unfortunate but hey who can argue with computers...
Would be grateful for any input so I can improve my HTML and CSS.
I have learned to use no fixed heights for components.
Started using rem units vs fixed pixel units for responsive design.
Found the use of CSS variables using color a better way to work.
hey SpiderMonkey!
I have a few things for you that you could take a look at when you have a moment.
<body> <main class="card-container"> <ul> <li class="card-item"> content </li> <li class="card-item"> content </li> <li class="card-item"> content </li> </ul> </main> </body>
You set the width of your main wrapper to a fixed width and so when you narrow the viewport the card overflows the screen and hides a lot of the content. Using a responsive unit is preferable like %.
Using flex-box on each item would help because you can force the button to the end of the box so it doesn't move around and you resize the viewport. Using align-self: flex-end; on the button would do this.
Your card max-width is too wide and touches the sides of the viewport. Consider using this approach. Set a responsive width first and then a static maximum width second. This would look like:
.card-container { width: 80%; max-width: 700px; }
I hope that all made sense :) Best of luck SpiderMonkey and well done on completing the challenge!
Gareth
I faced difficulty in these points:- 1.setting widths and max-widths 2.decising which one to make first desktop or mobile version asked in slack..then made mobile version first by writing its CSS first. 3.keeping my CSS short..need feedback for this urgently.
Hey bro,
So what I can see that I think would be beneficial to you are:
Well done though man, I hope this was helpful. You can take a look at my code and see if that helps. https://gareth-moore.github.io/Frontend-Mentor-projects/Newbie/3-column-preview-card-component-main/index.html
Thanks, Gareth
I dunno what i'm doing again
Heyo Frontfliper!
Are you very comfortable with CSS? If not, perhaps consider not using SASS until you are comfortable. It's a good practice to know what is under the hood so to speak. I think SASS might not be too helpful for you right now and unnecessarily complicating your life. Bad SASS!
Perhaps my solution can help you out bro! https://gareth-moore.github.io/Frontend-Mentor-projects/Newbie/stats-preview-card-component-main/index.html
If not, sorry haha!
As for getting the colours right on the image with the background blend... I tried for at least an hour and I couldn't match it. You need an arts degree for that one :)
Thanks, Gareth
To be Honest with You I find it hard to adjust the Card to image size.😭 My Questions are:
The Resizing Part of the Image took a lot of time so if there is some articles related to that I'd appreciate your opinion and resources. 🥰
Hey Saleh,
A valiant effort!
I liked your HTML markup. It was clear and concise.
Your CSS got me a little confused :( I couldn't really put it together very well in my brain haha. I see you added lots of @media queries. Might I advise you that putting them in one place is quite a bit easier as you can edit them easily in one place rather that running all over CSS land!
If you'd like, take a look at what I did in this challenge regarding CSS organisation. Perhaps you can find something useful as I like to be highly organised but also very efficient. I normally use categories like typography (for things like p, h1, span and a), layout (for things like div, main, body, ul and section) and components (for things like buttons, img, svg and input). I usually start again but this time with @media queries. See the link and it will make more sense haha https://github.com/Gareth-Moore/Frontend-Mentor-projects/blob/master/Newbie/stats-preview-card-component-main/css/styles.css
Lastly, resizing images on the fly can be done in many ways but if you want the image aspect ration to stay the same you are going to have to keep the container proportions the same. Conversely, if you want the dimensions of the container to stay change in proportion then you are going to have to stretch or distort the image in some way. You need to decide which you'd prefer but you can't have both.
That is why when you change the card size the image got squeezed down. You need to keep the proportions of the card right so the image does have to change it's aspect ration. Setting % values and using rem's can help you a lot in this case.
Well done! Gareth
Hey Folks, I've just finished my fourth project, and I'd really appreciate any feedback to help me improve my code. I've tried to use the Mobile-First concepts. What do you think about it? How can I improve or make my code more advanced... I am open to any other suggestions. Thanks in advance!!!
Hey Monica!
Great stuff! I'm also new here so take my advice with a pinch of salt :)
I thought your semantic HTML was really good. I just didn't know what was happening with your CSS. Perhaps you might want to try grouping your CSS into categories. Something like this:
/* ==========
DEFAULTS
========== */
* {
box-sizing: border-box;
}
/* ==========
TYPOGRAPHY
========== */
p {
font-size: 1rem;
}
/* ==========
LAYOUT
========== */
body {
height: 10px;
}
/* ==========
COMPONENTS
========== */
button {
width: 100%;
}
/* ==========
@MEDIA QUERIES
========== */
@media screen and (min-width: 376px) {
body {
color: red;
}
}
A handy trick someone recently taught me was to make my html { font-size: 62.5%; } and body { font-size: 1.6rem; } which essentially changes 1rem into 10px which you can use throughout your site. For example if you want 52 px you can just use 5.2rem. rem is responsive so your site should look better in different screen sizes and you can still code in px just with a different name... :)
I noticed your footer has to be scrolled down to because you made the container take up 100vh and then the footer had to be added under that. Perhaps make it 95vh and the footer 5vh or use a flex-box to make it responsive using space-between.
You background colour (the purple) was too strong over the image. You can lighten it up by adding opacity: 0.5;. 0.5 meaning 50%. So up and down that to your liking.
That's about all the feedback I can muster. Have a wonderful time coding! Gareth
Hey everybody!
This one was pretty easy. I mostly struggled with getting the colours right. Do you have any tools that you could point me in the direction of to use the eyedropper to get colours (to match)?
Thanks every, have a great day!
Hey Gustavo!
Cool name by the way!
Thanks for the advice. Normally the styles-guide has all the colours you'll need however this particular project didn't. S
But the colour picker extension has been added and I'm going to put it to good use! Thanks a lot :)
Gareth
