Great to see your work-progress on an actual project. For learning certain topics It's good to have an easy example, but online tutorials hardly leave the area of desktop screen-sizes. Love to see you think it through. Thanks, buddy.
Hey Kevin, I know you had the school bus coming and were admittedly a bit tired. You also tackled it in one sitting. On the mobile design, the images are to the right of the name and verified buyer. It was a simple fix. I removed the .split class from the individual blockquotes and added a new class of .buyer with display:flex. Thank you for your time and your thought process. Excellent work on explaining why you do things a certain way. Learned a Lot!
Thank you very much! you're awesome! I did the challenge before and it's nice to watch you through the process of doing this. I've learned many new things in the video! Thanks again!
How do you get the smooth changing animation when he makes changes just like at 28:35. It looks like LiveServer but I can’t find the setting therefore.
I've just finished this challenge and watching someone as experienced as Kevin have to really think this through makes me feel much better about my progress. To get those offsets I used flex-start, center and flex-end.
This was the first FrontEnd Mentor project I did. I'll be interested in seeing your process and solution to compare it to what I did. I expect to learn a lot. Thanks for this.
I'm still pretty brand new to web development and design, but I'm to the point where I could follow along! Exciting! Can't wait until I'm to the point where I can have an idea of how I'd do it first.
Good video. This whole css ordeal looks so painful. Trial and error all the time and the end result of some changes is way too often a surprise. Can't they come up with something simpler :)
I know this is a very old video. I just am watching it now i am very new to all of this.At 51:00 he was asking how to "bring the stars in" i was wondering if they could be brought in as a "checkbox" and maybe overlay or change the box to look like a star? As i said i am very new so i don't know what can and can not be done.
Well I managed to figure out the answer, if anyone is also wondering, its becuase the paragraphs are inside a which by default is a block level element because it doesn't have a display property applied, that means that it takes the whole width available and displays the following content on a new line.
Possibly a dumb question: Can you use media query for min-width = min-content ? Below this, the content doesn't fit and we'd want to make some design choices.
Is there an explanation for the decision behind using so many scss files? How do I know when to place what styles in where? Maybe someone can link a vid/blog to help me understand.
@@mounibmouad2649 man!! that one question has many answers. I don’t know If you are asking about media query or flex-box or grid or rem’s and em’s. Be more specific please. I could provide you the link to my code if seeing makes any sense if you want.
@@mounibmouad2649 1:25:23 that's media query and later used sass at 1:44:05 no idea what it actually does. But if you are beginner like me you could do it with only grid or flex-box and obviously media query which I've done. It works perfectly fine!
kind of a mess wasn't it.. Just make the entire thing with grid instead of fiddling around with translates, margins, paddings etc. like you do in this video. In my opinion one shouldn't even use padding and margins anymore to manipulate content inside sections/divs , because we have grid child properties for accurate placement.. Could have done this layout in like 30 mins with grid
@@guilhermegomes683 I've completed almost all of front end mentor challenges. The advanced problems can range from 30 minutes to 4 hours to complete. The pomodoro and memory games were the longest (4-5 hours) so far for me. Then you have extremely basic "advanced" problems such as the countries API one which you can solve in no more than an hour. So it's quite ridiculous this is not junior, considering how long it actually takes.
It really frustrates me when you code in SASS. I understand it, but don't use it, and from the perspective of this video, it seemed really unnecessary for the project and didn't really offer as much "faster coding" or "functional options" as you think. Especially with the recent changes in CSS, I think SASS is diminishing in use. However, there are A LOT of great AH Ha's in this video. So, thanks once again for great content. I'd love to see this one revisited with pure CSS. Also, it the mobile view, the avatars with their names and roles should be horizontal. You made them stacked.
That's so great, thank you so much, I am a complete beginer and I did this challenge last week here is my code. I'll study your video, it will be very helpful. Best regards github.com/fredgbcn/social-proof-section-master
I am still a total beginner and u r my favorite youtuber , u made me learn a lot about CSS
Great to see your work-progress on an actual project.
For learning certain topics It's good to have an easy example, but online tutorials hardly leave the area of desktop screen-sizes.
Love to see you think it through. Thanks, buddy.
Hey Kevin, I know you had the school bus coming and were admittedly a bit tired. You also tackled it in one sitting. On the mobile design, the images are to the right of the name and verified buyer. It was a simple fix. I removed the .split class from the individual blockquotes and added a new class of .buyer with display:flex.
Thank you for your time and your thought process. Excellent work on explaining why you do things a certain way. Learned a Lot!
Great video!! Please continue to these challenges Kevin!
Thank you very much! you're awesome! I did the challenge before and it's nice to watch you through the process of doing this. I've learned many new things in the video! Thanks again!
This was very informative as always Kevin, thanks!
6:43
what if we only have a image of the design to create our project?
how can we then know its exact font size
experimenting
How do you get the smooth changing animation when he makes changes just like at 28:35. It looks like LiveServer but I can’t find the setting therefore.
I've just finished this challenge and watching someone as experienced as Kevin have to really think this through makes me feel much better about my progress.
To get those offsets I used flex-start, center and flex-end.
Great video, show us easy bank landing or other free challenges from the front end mentor
I'd love to see Easybank challenge too. There is tricky background image, would be great to see a proper solution :)
Hey ! I did code the easy bank challange , go and check the code on this link :
banksite.netlify.app/
@@Russ2049 Yeah, I tried that it is quite tricky
@@ossama90s47 did you have the code for yours on GitHub... would really appreciate a link to it
This was the first FrontEnd Mentor project I did. I'll be interested in seeing your process and solution to compare it to what I did. I expect to learn a lot. Thanks for this.
I’m curious how the cascade works when you have all these different files of scss. Gonna have to look into that.
Am learning so much from these vids.!! Thanks very much
1:26:38 me when trying to write any css
hahaha that hit the nail in the head 😆.. It could be a great meme for developers to relax a little bit
Learning alot from your videos! Thanks
I'm still pretty brand new to web development and design, but I'm to the point where I could follow along! Exciting! Can't wait until I'm to the point where I can have an idea of how I'd do it first.
8:00 : what if you did your base font size as --fs-base: ... and then all the others became sizes based on this: --fs-midsized: var(--fs-base) * 1.2
Good video. This whole css ordeal looks so painful. Trial and error all the time and the end result of some changes is way too often a surprise. Can't they come up with something simpler :)
I know this is a very old video. I just am watching it now i am very new to all of this.At 51:00 he was asking how to "bring the stars in" i was wondering if they could be brought in as a "checkbox" and maybe overlay or change the box to look like a star? As i said i am very new so i don't know what can and can not be done.
"grid or flex"
Floats! 😁
You are a very good teacher!!!
Thank you! 😃
1:02:42 can anyone explain why adding this extra div works?
Well I managed to figure out the answer, if anyone is also wondering, its becuase the paragraphs are inside a which by default is a block level element because it doesn't have a display property applied, that means that it takes the whole width available and displays the following content on a new line.
When you make a change in the code, it transitions smoothly in the browser, instead of an immediate change. How do you achieve that?
i want to know!! :C
OK!. He do it using Prepros
.
Possibly a dumb question: Can you use media query for min-width = min-content ? Below this, the content doesn't fit and we'd want to make some design choices.
AT 2:31 ...CAN you plase tell me what you were copying there?
piccalil.li/blog/a-modern-css-reset/#heading-a-reset-of-sensible-defaults 😊
why not adding links to final page and files ?
Which extension or plugin are you using to update the site when you modify the code? It's not the live server is it?
Wish I knew I love the animations
Kevin, they have a style guide outside of the actual figma files with colors.
Thanks for sharing
Thank you for the videos. Greetings from Argentina
Is there an explanation for the decision behind using so many scss files? How do I know when to place what styles in where? Maybe someone can link a vid/blog to help me understand.
Why do you not link a copy of your code for comparison purposes?
Hey Kevin, What about your Scrimba course that you had created. Is it going to updated in the future ?
anyone that has done the testimonials/card part with grid, can you link me your project to see the code? I can't figure out how to do it with grid. :(
that was fantastic.great great great..
how can you determine between the primary,secondary and the neutral colors
I used position relative for the offsets, is that bad?
Do you have heard atomic design?? If yes, could you spend time to make tutorial about that, thanks
hi, do you have a suggestion website similar to frontendmentor for improving react native skills?
just curious. why do you convert pixels to rem ?
Do more frontendmentor challenges 🔥🔥
Where ID the link to the code?
can you make a video about smacss
Do you have the code this project up somewhere? I am finding it a bit difficult to go back and forward to check the code. Thanks.
Somebody ping me a link of the music played on background i really like it..
I've completed this challenge with almost 98% success rate... Can I consider move on to learning JavaScript now? Seeking any experts opinion. Thanks!
can you tell me what tool that when you make a change on the code it transitions smoothly on the browser ?
@@mounibmouad2649 man!! that one question has many answers. I don’t know If you are asking about media query or flex-box or grid or rem’s and em’s. Be more specific please. I could provide you the link to my code if seeing makes any sense if you want.
no i'am talking about live preview, when he add some code and the browser add that code smoothly
@@mounibmouad2649 1:25:23 that's media query and later used sass at 1:44:05 no idea what it actually does. But if you are beginner like me you could do it with only grid or flex-box and obviously media query which I've done. It works perfectly fine!
i'm talking about the live preview that do that thing smoothly not instantly.
kind of a mess wasn't it.. Just make the entire thing with grid instead of fiddling around with translates, margins, paddings etc. like you do in this video. In my opinion one shouldn't even use padding and margins anymore to manipulate content inside sections/divs , because we have grid child properties for accurate placement.. Could have done this layout in like 30 mins with grid
No way this is newbie, should be junior at the very least. It took me like an hour and a half. Pain in the ass.
lol. a junior project would take you MANY DAYS and not MANY HOURS. looooooool
@@guilhermegomes683 I've completed almost all of front end mentor challenges. The advanced problems can range from 30 minutes to 4 hours to complete.
The pomodoro and memory games were the longest (4-5 hours) so far for me. Then you have extremely basic "advanced" problems such as the countries API one which you can solve in no more than an hour.
So it's quite ridiculous this is not junior, considering how long it actually takes.
It really frustrates me when you code in SASS. I understand it, but don't use it, and from the perspective of this video, it seemed really unnecessary for the project and didn't really offer as much "faster coding" or "functional options" as you think. Especially with the recent changes in CSS, I think SASS is diminishing in use. However, there are A LOT of great AH Ha's in this video. So, thanks once again for great content. I'd love to see this one revisited with pure CSS. Also, it the mobile view, the avatars with their names and roles should be horizontal. You made them stacked.
CSS God
No
Only a simple man who know how to teach.
He s not a God, there is only one God.
@@ahmedch6633 Trump
Hello Sir,
Can you please explain why you divide the font size by 16 each time?
He's converting pixels into rem. Just look up rem units vs px units.
Just want to say Thanks...
Source Code,
2nd. Col stuff.
1st comment . Lots of ♡ . You are a great mentor.
Noice
That's so great, thank you so much, I am a complete beginer and I did this challenge last week here is my code. I'll study your video, it will be very helpful. Best regards github.com/fredgbcn/social-proof-section-master