🚨 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!!
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!
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
@@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 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...
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
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.
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.
🚨 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.
You are the awesome mentor for web development. Keep updating new videos always. We will support u always
Thanks for the kind words!
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.
You are the best!. This is just the channel I have been looking for. Not scripted.
Thank you so much! Pls never stop creating these kind of tuts💞
Glad you liked it!
Babe wake up Coder Coder dropped again
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 learnt many things in just 1 hour. Making notes as i watch this video. Thanks alot!!
Awesome, glad you've found this helpful!
We want more videos like this, love from Bangladesh 🇧🇩
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!
Love and respect from Pakistan. Stay blessed
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!
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!!
love from Bangladesh dude❤
you make great content more videos like from figma to code👍
Thanks! I definitely will!
Great video, learned a lot! Thank you!
awesome, glad it was helpful for you!
Thank you so much.
Looking forward to more projects
You're welcome, and 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!
You are an amazing mentor.
thanks for watching!
I’m new subscriber keep it up queen
2:41:50 genius genius move!
Thanks! I was pretty happy with that solution 😄
great tutorial, next time make a website which have more animations designs
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!
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?
Keep Posting make more complex website's layouts videos
Thank you very much.
I don't know why I haven't subscribed to your channel yet.
Now subscribed 😅
Thanks so much!
A new subscriber. 😊
Thanks so much!
Thank you. So helpful!!🎉🎉
Awesome, glad you liked it!
Hi can you do video on colors? How to choose colors for designs.
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
Thank you so much!
You're welcome!
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?
soooooo veryyyyyyyyy heplful.sweet
Bravo!
Why not save your time by using Bootstrap and then writing some custom codes to modify certain sections?
Thanks!
Abraço do Brasil!
Thanks for watching!
Nice one
Thanks for watching!
Please add scrolling animation in the next videos.
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
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.
can i get the name of icons pack you are using?
Only 4.6k subs? How?
haha thanks, just started this channel, but hopefully will grow soon!
love from Bangladesh ❤
Hi ma'am, I have a doubt, in my laptop showing 2 ip address like ip6 and ip4 what will I choose ma'am
make video series of convert Figma/Xd to html and CSS
This whole channel is going to be building websites from Figma designs 😊
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 ;-)
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.
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.
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
Do you always use firefox browser?
yep pretty much!
its ok to start in small resolution?
I like doing that, but it can work either way!
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
why don't you teach DSA in javascript .there is no one teaching in javascript
❤❤❤
raw dogging this without AI is CRAAZY
LMAO thank you?? 😅
Upload more videos please 🥲🥲
Trying to!
@codercoderbuilds please do.