Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar
Vložit
- čas přidán 5. 08. 2024
- 🚨 NOTE: I didn't mention in the video how to get the "dist" folder to appear when running the Live Sass extension! You will have to go into your VS Code Settings (Ctrl-Shift-P and type in "settings" then select "Preferences: Open Settings (JSON)" and in the settings.json file, inside the outer curly brackets "{" and "}" add the following:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist",
"savePathSegmentKeys": null,
"savePathReplaceSegmentsWith": null
}
],
______________________
🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, and JS: coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
This is first in a series on how to build a responsive website from scratch with HTML & CSS. This video, Part 1 covers setting up the Frontend Mentor project and building the desktop navigation bar.
Full playlist here: • Build a website from s...
Challenge on Frontend Mentor: www.frontendmentor.io/challen...
Source code on GitHub: github.com/thecodercoder/fem-...
See the final website: codercoder-easybank.pages.dev/
0:00 - Intro
0:25 - Setting up Frontend Mentor files and using Adobe XD for the design
2:09 - Creating SCSS and JavaScript files
5:31 - Using the Live Sass Compiler VS Code extension
7:36 - Studying the header navigation in Adobe XD
8:00 - Writing the HTML markup for the header
9:32 - Creating styles for the navigation using helper classes
12:06 - Creating header styles
13:46 - Creating Sass variables for colors
14:20 - Styling navigation bar spacing, hamburger menu, and logos
17:56 - Creating and styling header links
20:29 - Creating Sass variables for font sizes
21:28 - Styling header link text
22:30 - Creating CTA button
24:18 - Adding linear-gradient to CTA button
25:57 - Styling the CTA button text
28:38 - Creating helper classes to hide/show content on desktop or mobile
29:16 - Creating a Sass mixin for breakpoints to use in the helper classes
36:40 - Tweaking header link and CTA button styles
39:22 - Tweaking logo styles
40:34 - Adding active/hover states and transitions
_____________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming - Věda a technologie
![How to Make a Super Simple HTML Website [Tutorial]](http://i.ytimg.com/vi/cnt_rMA1pe0/mqdefault.jpg)
The issue with programming is not its difficulty...it’s the lack of mentors like you! You can really teach. Keep it up for us.
You are so right
@@aheartoflovecanneverbedefe4596 I love your Profile Name!
@@RockstahRolln Haha...Yeah....me too.
Best comment of the year.
This channel is so underrated
Thanks for the support!
L E G I T
IKR? She has an amazing video quality and content I am so happy I found her channel.
Truth.
@Coder Coder can you make a website without front end mendor
THANK YOU FOR LITERALLY BUILDING THINGS STEP BY STEP AND SHOWING YOUR THOUGHT PROCESS AS YOU GO ALONG. THIS IS UNDERVALUED -- MANY CHANNELS RUSH THROUGH A LOT OF CONTENT AND SHOW YOU A LOT OF "FINISHED" STUFF. THANK YOU CODER CODER!
Glad it could help!
@@TheCoderCoder
i installed the live sass & i open the settings.json & copy and paste the code from description. But I got error messages
Property savePathSegmentKeys is not allowed.
Property savePathReplaceSegmentsWith is not allowed. Why? Should I create dist folder by hand or this extension creates automatically?
Thanks for your response from now on.
@@itiremiroglu7646
i also had the same problem but a single god damn "comma" fixed it
you just need to put it in the last line before adding the code
I hope this helps :)
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "dist",
"savePathSegmentKeys": null,
"savePathReplaceSegmentsWith": null
}
]
@@raisama4314 So, we don’t put any , on the last line. Am I right?
@@itiremiroglu7646 after pasting the code don't put any
God, I'm so glad I found this channel. There are many tutorials out there, but few explain in such a pleasant way and with
code as clean and with good practices as I have seen in your videos.
I hope you continue to grow and can continue to see more of your videos, they will definitely be a reference for me. Thanks c:
100%!!! So good.
Excellent tutorial, Jessica - thank you so much! I started web development many years ago, but then left the field entirely for a long while - your tutorial has been a great re-entry point. Just finished watching it ... now on to Part 2! 😁️
Please don’t stop instructing. 😊 Your videos are the best that I’ve found to learn and grow from. You have inspired and motivated so many people. I’m thankful for your channel.
I've always dreaded CSS until I found your channel. You're so organized and have a good workflow that makes sense to me!
Although, I'm a total beginner, it was great to see how coding looks like. Loved it! Keep posting please.
Thank you for making this series! I created a web app project for myself to learn how to code and your videos are informative and educational!
this channel is officially my new addiction ... i love your glasses guurl
Thank you :) I love everything about your channel. Subtle not overbearing music, detailed explanation of everything. I could not do css for my life, your videos make it different.
Now I'm feeling satisfied with all my demands that I need from a youtuber. A big thank you but please keep on uploading such videos.
This is one of the best channels on programming.
Criminally underrated!
Hope you get a ton of subscribers
This is so easy to follow up . Watching your tutorials from now on
For someone like me, learning the basics of Front End Development at the moment, this channel and your videos are like a Bible!
The way everything is explained and how you detail every move you make, it's awesome.
Keep up the great work and THANK YOU so much for all your videos and your time doing them. Really appreciated.
So glad my videos could help you! best of luck as you learn coding!
You should do more html/css project walkthroughs like this. You have a really great style of teaching and explaining things. Thanks for this and keep up the good work :)
I've actually learned more from this tutorial than any where else tbh 😍
She basically explains things along the way and why it is helpful to do things a certain way (though some things do require prior knowledge to understand)
Omg every second of this video made me feel I'm from iron age, watching 2020 designing methods .
Excellent excellent excellent.
These videos are truly amazing. Thanks for sharing your knowledge. Would love to see more of these. Keep up the great work!
im so happy to have found this series. Been trying to teach myself at home and you do a great job breaking down your steps. :)
Your voice is so pleasing. I always enjoy your videos. Helpful and easy to understand.
Keep up the good working going !
Oh, thank god I read the description after a while, I re-read my code a bunch of times until understand that was everything ok.
I appreciate your notes in the descprition.
Wow, I was able to follow everything single step done in your video. Very informative content. The background music was 👍. New things learned from this video : mixins, how to use sass live compiler, px to rem conversion, bem, linear-gradient, scss map-get, &:not(:last-child), and much more... 😍 Please don't stop posting content!
Very REAL coding happening here. Your humility as a developer is a lot noticed!
I really like how you take you time to THINK and try during this serie. This might be less enticing than build a great website in one hour videos but this is muuuch more helpful for beginners like me.
Fantastic video, Jess! I just finished the first part of this series. Very instructive and easy to follow. Thanks for sharing your knowledge.
Quality content, great intro and so on....This girl deserves more subscribers Mahn!!
Good job on creating such inviting learning experience. Love the subtle music background!
Watching you code and the way you do your set up - its amazing - omg thank you for such a great video - subbed!! :)
Okey, I'm going to subscribe. THIS kind of channel is what we need =)
I know that a lot of people can't get a good microphone and others stuff, but this type of channels are the best :3
This video was so smooth. I appreciate your videos so much! Keep it up!!
This is what i was looking for. Thanks mate, for making this !!!
Most tutorials don't show how to fix when u get stuck. But here she showed that very nicely.
Thank you very much "coder coder"🍁
Hello from India! I am not from IT or computer field but a Mechanical Engineer 30 years in industrial maintenance I am learning HTML, CSS, JS, Python, MSSQL, MongoDB, MariaDB, AWS, Azure, OCI , VSCode etc. from CZcams from last 3 years and your courses are among the best ! 😊 thanks a lot and keep doing it!
So much better than videos that just say “Now do this, now do that...” without any explanation.
I love this Kite, very calm and well explained. even tho I just started to learn coding, watching your video helps me during my journey. can't wait for more!
I'm so glad I found this channel. Keep up the good work. :)
I like how you go further in depth than other channels. many other tutorials just do things without giving the "why?" . great content, subscribed.
Thanks so much!! I definitely try to explain the decision-making and "whys" behind the coding. Glad you are enjoying it!
The background music fits your personality I love it! Planning on following this tutorial. Thanks for the helpful content... earned my sub!
oh my god, i was so intimidated to start coding, but now that i found your channel, im really looking forward to learn front end developement! keep it up!
I don't know if anybody has mentioned this previously, but it looks like the style-guide has been updated to show font weights of 300, 400, and 700. The button in the design seems to be using a font-weight of 700.
Thank you for this awesome tutorial. I stepped away from coding for a while, and this has been acting as a great refresher. Plus, the way you show your own mistakes, difficulties, and thought processes brings a sense of realness to the process. I feel more confident knowing that professionals also have to look things up and logic things out.
Where have you been all my life!? I will now be binging your videos. Thanks for explaining each of your steps and the reasoning for some choices. Looking forward to the rest!
This is the best coding channel I have encountered by far the most best and underrated channel ever
I really loved your animation about your progress on how you started and how you've come this far. If it isn't a bother I hope to also learn how to make interactive stories/animations like that.
I'll just admit upfront that I am a teen hoping to make a fun website of my own and learn to edit
You are one of the best models that I follow :)) keep it up
Okay, I'm saving this one for tommorow. Had a minor setback and did not practice for a week. This will be a great start again.
I don't know fully web dev yet but one thing is clear with this , This is just pure profession being flex to us guys. Look at those neat coding its just so satisfying to watch. looking forward for more coding stuff tutorials with you.. Take care !! more power !!
Absolutely love being able to see your process! I've been wanting to get more into front end development but every time I tried I would get a bit overwhelmed with all the tools and resources and where to even begin the design process. This helps immensely, so thank you!
I'm really glad that this could help you! Best of luck in your journey!
I just love the way you code sis. Simplicity!
Oh my goodness just binged this first tutorial and it is amazing! Please continue uploading more tutorials like this, it really helps me learn good web development practices 💛
@@sinfps1 At least for me I enjoy watching her thought process on how she decided to build certain sections of the website and organize her code. I'm guessing it's not possible to cover all good practices with one tutorial? But yes I agree there's a limit to how much you can learn from watching tutorials but I still find them super helpful.
Hey dude . I am trying to find one dude to share our knowledge together . Can I get connected with you?!
i just love the away you teach.i am a cs guy but i don't have much interest in studies. one day I saw your videos and then I decided to start doing programming by watching your videos and now I have improved a lot just because of you. you are a angel for me , just keep making these videos . i hope I will meet u soon .lots of love.
Had huge trouble at the start with vs code not reading the style.scss file and importing in my other scss files, but then I changed the order to match yours (dont know why i didnt when following along) and it fixed it. such a great video thank you
This kind of responsivity mechanism is pretty smart. Well done!
I really appreciate your content. I'm a month in learning HTML, CSS and my goal is to become good as you. Keep up the great content!
Just found your channel through reddit. Really great video and love the explanations and the thought process. Thank you for this great video series.
Big thanks , I've been searching for these kind of stuff bcuz I really enjoy coding them , keep up
I think it’s great how you troubleshoot and it shows your audience that no matter how long someone has been writing code, there’s nothing that a Google search or an !important tag can’t fix! 😆 great tutorial 👍🏼
i’m an absolute beginner ( just watching this video to see how crazy building a website can get ), i have watched your first live vs this video and this video is smooth and amazing and your explaining is great . please do continue with videos . learning so much .
Thanks so much for watching!
Hello everyone. If you found it difficult updating the fonts or applying styles, it is most likely because you linked the html file to the .Scss file not the .CSS file. Relink to the main .CSS file and it should work. Worked for me after hours and hours of browsing Stackoverflow
First video and it was honestly so chill to watch! :o
long time no see, i am happy that you have a new video again! i like it so much
I’ve fallen in love with your videos and very understanding explanations
You're so smart, what an amazing tutorial on the navigation bar. I like the way you utilise scss with some mixins for media queries.
I have never used it before myself so it was really cool to learn something from this tutorial!
I love your project videos. Please keep them coming.
Thanks you so much! I just started this video but I'm already learning a lot from you. You are an excellent teacher. Your explanations are so good and your voice makes me feel so relaxed! I am enjoying this! Thanks.
Glad this could help you!
thank you for this. needed a detail workflow like this one so much
love your content. please keep making this types of web designing series. watched the whole video 50min and didn't feel bore for 1sec. love that background music.
I am very happy, cause every thing worked properly. It was my first navigation bar making. though it took almost 2hr to finish. love from Bangladesh.
she's a angel, i'm crying thank youuuu
Great video, I had a go at this website before seeing your video and it was interesting how you approached it. One small tip, if you set the font size to 62.5% in the css html element, then the rem measurements are worked out by dividing by 10 instead of 16. For example 18px = 1.8rem, 30px = 3rem.
Promise i just discovered your channel and i think and i feel you really love what you’ve doing
You're an amazing teacher, thanks a lot; I recently started learning html+css, and you explain them really well and easy to follow.
Awesome video! My teacher only explains how to use HTML and bootstraps, but I wanted to learn CSS and this channel is so helpful! Subbed!
You are just an inspiration because of you I started my coding career again from scratch.
Cannot wait for your course!!!
This videos are unvaluable. The most usefull I have seen untill this moment. Thank you so much for your incredible videos!!!!
So happy i found you 😭 currently tying to make ecommerce website and I have no idea how to start from doing it. Fortunately, I am now starting to have an idea and motivation because of you ❤
Can't wait till you're course comes out
Stumbled across this gem this morning, subscribed!
Eagerly waiting for next part....lots of love to this channel.
Thanks so much! Next part is coming soon :D
Your teaching makes me happy i learn a ton of new thing that are details, you are so skilled.
I'm inspired by you in my field data analyst I already know front end and sql.
Thanks for all the information.
Very nice. Thank you. Your delivery is appreciable.
Hey. Hi...
Just wanted to say I love how you explain stuff and what you do. Keep it up!
I didn't even know front end mentor was a thing this is awesome. And I learned a lot form this video thank you I liked and subscribed.
It's working, it's working! Thank you for this, I'm learning a lot. I can't wait to do step 2.
I'm glad I found this channel sooner! 😍
I seriously love all your videos and I appreciate all the hard work that you do for us. I'm just 16 and learning web dev and I don't know where to start I always watch tutorials. And when it comes to coding on my own I'm just stuck most of the time.
All I'm trying to say is that id love to talk with you just to ask a few questions since you're well experienced
Instant subsriber 😁
Learned a lot from this vid. Keep it up 👍
Oh that's great . Demystifying concept very well . You are unique
Great work keep doing 👍👍
This was amazing! Thank you so much. I'll be watching the rest of the series for sure! =)
Thank you! you seem to know your thing very well. I learned a few things too. I need to start using sass to make my codes a little organized.
I am very excited to watch the second part :)
Yay!! Part 2 should be out next week :)
Thank you for making these amazing videos! I am learning a lot because of you.
Your Tutorials Is AWESOME
love your channel, so addictive and easy to learn, way to go, upload more so we can learn and achieve more.
Very nice work, structured and simple
I love the segmentation of the video
Thank you. I was searching what about this from long time.
This is gonna be an amazing series! great video Jessica
Thanks so much!! I think it will be fun for people to watch :D
@@TheCoderCoder yes it is, thank u so much!
Thank you so much for this. i really learned a lot in applying what ive watched in tutorials.
best I have ever found, took me a while to finish the video, a lot of details but thanks a lot
I'm addicted to you. subscribed!