🚨 PSA! I did something that's not best practice in this video. Using @import to load multiple separate CSS files will increase the load on the website due to loading each individual CSS file. This may not have a noticeable effect in load time on small websites like I made here, but will have a bigger effect on websites that are very CSS heavy. The better thing would be to have 1 very long CSS file, or using Sass to separate out your styles.
It is really a great content. So much of stuff in a single project. Learnt a lotttttt. This is best for self learning Developers. You are doing amazing work.Expecting more contents from you.
@@codercoderbuilds very very. learnt new things and gained more understanding of the things i already knew! Time to head back to using react. Thank you!!
Hi, thanks for the video, in 30:33 you did not choose the 2x tablet image to get the dimensions, is there a problem to choose the '1x' version? I'm confused
@@codercoderbuilds Qtn html coding and building Ux wireframe then edit it in using elementor in Wordpress which is better since I know less of css n js??
@@dereksylar1416 I don't really have experience with Elementor, but it could make sense if your client needs WordPress! You could also try other page builders like Framer or Webflow, but you'll still need to learn CSS in order to understand how they work better
Thank you for this wonderful lesson. Learnt a lot of new things. I wonder if you can make video for images with different shapes used in hero section, although you the exact image but most if times we don't have create those. Thank you
Definitely! I made a video on my main channel about how to do full bleed wrappers, but wanted to do something a little more beginner friendly for this one. Named grid lines are great 🔥 Thanks for watching!
Hi where will we be downloading all these images and I don't understand what's on your assets folder where will we get all these things in other to follow up
Thank you so much ma.. But ma i have a question: what app did you use to design the landing page before creating it ( before using css, html) I mean the app gave you the details of the colours, the size of the buttons etc, please ma what's the name of the app...
You can do that, but depending on how you style the wrapper, it could cause issues if you have a section that has a background color or image that goes full-bleed. I've found it works better to have a wrapper for each section.
Great video tutorial, even I think you could shorten up some parts as they're very similar or repeatedly. Personally, I try to use margin as less as possible for various reasons. One is that margin is dead space, you can't style it. I learned to use my so called "section-paddings" for consistent spacing. Then for the content I use padding individually or create content gap classes like 100-900 or s, m, l, xl.... Some of the frontend mentor designs are far away from being realistic. They are made from designers who create fictive layouts, like projects not looking any close to real projects.
🚨 PSA! I did something that's not best practice in this video. Using @import to load multiple separate CSS files will increase the load on the website due to loading each individual CSS file.
This may not have a noticeable effect in load time on small websites like I made here, but will have a bigger effect on websites that are very CSS heavy.
The better thing would be to have 1 very long CSS file, or using Sass to separate out your styles.
But i really loved that structure😭
do you have any new video that addresses this issue?
You are the awesome mentor for web development. Keep updating new videos always. We will support u always
Thanks for the kind words!
Thank you so much! Pls never stop creating these kind of tuts💞
Glad you liked it!
This helps a lot to see how an actually website frontend made!.THANKS
Sou do Brasil e descobri seu canal agora, é incrivel seu talento e conhecimento, muito inspirador.
Babe wake up Coder Coder dropped again
You are the best!. This is just the channel I have been looking for. Not scripted.
It is really a great content. So much of stuff in a single project. Learnt a lotttttt. This is best for self learning Developers. You are doing amazing work.Expecting more contents from you.
Thanks so much, glad you find it helpful!
I'm hooked! I hope you keep doing this
Definitely will make more of these!
Love your content
Keep making these learning type videos
Love from India ✌🏻
Awesome, I plan to!
this is what I'v been looking for. thanks!
Glad this was helpful for you!
I learnt many things in just 1 hour. Making notes as i watch this video. Thanks alot!!
Awesome, glad you've found this helpful!
I really appreciate how you show the whole problem solving process. Pls keep it up. Sending love from Nigeria👍
Glad that this was helpful for you! Thanks for watching!
Great video, learned a lot! Thank you!
awesome, glad it was helpful for you!
We want more videos like this, love from Bangladesh 🇧🇩
What i needed to refresh my css skills!
Hope it's helpful for you!
@@codercoderbuilds very very. learnt new things and gained more understanding of the things i already knew! Time to head back to using react. Thank you!!
I’m new subscriber keep it up queen
You are an amazing mentor.
thanks for watching!
Great video as usual. Also I've found if you put the wrapper class in with the hero_text rather than hero you can keep the layout.css the same
great suggestion, and thanks for watching!
2:41:50 genius genius move!
Thanks! I was pretty happy with that solution 😄
love from Bangladesh dude❤
Thank you so much.
Looking forward to more projects
You're welcome, and thanks for watching!
you make great content more videos like from figma to code👍
Thanks! I definitely will!
Hi can you do video on colors? How to choose colors for designs.
Create as well HTML and CSS series courses as well?
Thank you very much.
Hi, thanks for the video, in 30:33 you did not choose the 2x tablet image to get the dimensions, is there a problem to choose the '1x' version? I'm confused
2x version provides more better visuals
@@samialvi4226 i know this, but she choose the width and height of the 2x for mobile and the 1x for tablet
Much appreciation 🙏🙏
thank you for watching!
@@codercoderbuilds Qtn html coding and building Ux wireframe then edit it in using elementor in Wordpress which is better since I know less of css n js??
@@dereksylar1416 I don't really have experience with Elementor, but it could make sense if your client needs WordPress! You could also try other page builders like Framer or Webflow, but you'll still need to learn CSS in order to understand how they work better
great tutorial, next time make a website which have more animations designs
Thank you. So helpful!!🎉🎉
Awesome, glad you liked it!
Thank you for this wonderful lesson. Learnt a lot of new things.
I wonder if you can make video for images with different shapes used in hero section, although you the exact image but most if times we don't have create those.
Thank you
Thanks for watching! Do you mean different shapes like SVG shapes?
Thank you so much!
You're welcome!
That was fun. Use named grid lines and you could make the image go fullwidth easily. That would also come in handy for some other images.
Definitely! I made a video on my main channel about how to do full bleed wrappers, but wanted to do something a little more beginner friendly for this one. Named grid lines are great 🔥 Thanks for watching!
can you please share figma design link?
Thanks!
A new subscriber. 😊
Thanks so much!
Love and respect from Pakistan. Stay blessed
good, I want to ask Jess , will u add some JS course?
I'm not a JS expert, so no plans to do so right now. But perhaps in the future!
@@codercoderbuilds is it possible to get a job without " js" in todays market.
I would like to learn web full stacks, I just got a Ipad Pro 4generation. What do you think I need as minimal to start? Can I use a raspberry?
I don't know why I haven't subscribed to your channel yet.
Now subscribed 😅
Thanks so much!
Thanks!
Abraço do Brasil!
Thanks for watching!
Keep Posting make more complex website's layouts videos
can i get the name of icons pack you are using?
Why didn't you just edit out the header image in Photoshop, not only to get rid of the hidden part, but also the transparent part?
2:20:00
soooooo veryyyyyyyyy heplful.sweet
Only 4.6k subs? How?
haha thanks, just started this channel, but hopefully will grow soon!
Why not save your time by using Bootstrap and then writing some custom codes to modify certain sections?
Hi where will we be downloading all these images and I don't understand what's on your assets folder where will we get all these things in other to follow up
Sorry for not explaining this part-- the assets and Figma design are from Frontend Mentor which I linked in the description
@@codercoderbuilds pls next time. Explain everything you are doing.
Do you always use firefox browser?
yep pretty much!
Thank you so much ma..
But ma i have a question: what app did you use to design the landing page before creating it ( before using css, html)
I mean the app gave you the details of the colours, the size of the buttons etc, please ma what's the name of the app...
It's a Figma design-- the design was created by Frontend Mentor
Thank you so much ma for your reply...
But ma how can i create mine?
@@wisdomchisom248 Chisom, you'll have to learn Figma. There are a lot of tutorials on that.
From Figma you can see those styles by turning ON "developer mode"
how do you have yt button with 5k subs? :D
This is my second channel 😊
@@codercoderbuilds nice. good luck then. subbed ;-)
Your video is vary vary nice
thanks for watching!
@@codercoderbuilds can i talk to you ?
@codercoderbuilds how can I get the images the padding and other styles exact value that set in the figma design like the images and others
Nice one
Thanks for watching!
its ok to start in small resolution?
I like doing that, but it can work either way!
Bravo!
Hi ma'am, I have a doubt, in my laptop showing 2 ip address like ip6 and ip4 what will I choose ma'am
Please add scrolling animation in the next videos.
Can I put the final code on my github profile?
No one is stopping you, but please don't make it seem like you wrote the code yourself
make video series of convert Figma/Xd to html and CSS
This whole channel is going to be building websites from Figma designs 😊
Hi, why didn't you wrap the entire website in a container, for example, 1440px wide? What is the reason behind your approach?
You can do that, but depending on how you style the wrapper, it could cause issues if you have a section that has a background color or image that goes full-bleed. I've found it works better to have a wrapper for each section.
@@codercoderbuilds Thanks
love from Bangladesh ❤
❤❤❤
why don't you teach DSA in javascript .there is no one teaching in javascript
Great video tutorial, even I think you could shorten up some parts as they're very similar or repeatedly. Personally, I try to use margin as less as possible for various reasons. One is that margin is dead space, you can't style it. I learned to use my so called "section-paddings" for consistent spacing. Then for the content I use padding individually or create content gap classes like 100-900 or s, m, l, xl.... Some of the frontend mentor designs are far away from being realistic. They are made from designers who create fictive layouts, like projects not looking any close to real projects.
thanks for watching! Do you have any alternatives to FEM for finding website designs? I'm always looking for more inspiration.
Upload more videos please 🥲🥲
Trying to!
@codercoderbuilds please do.
raw dogging this without AI is CRAAZY
LMAO thank you?? 😅