Looking to hire developers?
@Gareth-Moore
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...
@spidermonkey356
Submitted
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
Marked as helpful
@ranjanamukhia
Submitted
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
Marked as helpful
@areklaz
Submitted
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
Marked as helpful
@Honko-o
Submitted
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
Marked as helpful
@MonicaDalosto
Submitted
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
Marked as helpful
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
