🚨 NOTE: I did not point out within the video how one can get the “dist” folder to seem when working the Reside Sass extension! You’ll have to go into your VS Code Settings (Ctrl-Shift-P and sort in “settings” then choose “Preferences: Open Settings (JSON)” and within the settings.json file, contained in the outer curly brackets “{” and “}” add the next:
“liveSassCompile.settings.codecs”: [
{
“format”: “expanded”,
“extensionName”: “.css”,
“savePath”: “/dist”,
“savePathSegmentKeys”: null,
“savePathReplaceSegmentsWith”: null
}
],
______________________
🔥 My course: Responsive Design for Novices! https://coder-coder.com/responsive/
💻 Develop into a full-stack net dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/exterior?affcode=441520_ti97uk6b
That is first in a collection on how one can construct a responsive web site from scratch with HTML & CSS. This video, Half 1 covers organising the Frontend Mentor mission and constructing the desktop navigation bar.
Full playlist right here: https://www.youtube.com/playlist?listing=PLUWqFDiirlsuYscECzks6zIZWr_Cfcx9k
Problem on Frontend Mentor: https://www.frontendmentor.io/challenges/easybank-landing-page-WaUhkoDN
Supply code on GitHub: https://github.com/thecodercoder/fem-easybank
See the ultimate web site: https://codercoder-easybank.pages.dev/
0:00 – Intro
0:25 – Organising Frontend Mentor recordsdata and utilizing Adobe XD for the design
2:09 – Creating SCSS and JavaScript recordsdata
5:31 – Utilizing the Reside Sass Compiler VS Code extension
7:36 – Learning the header navigation in Adobe XD
8:00 – Writing the HTML markup for the header
9:32 – Creating kinds for the navigation utilizing helper courses
12:06 – Creating header kinds
13:46 – Creating Sass variables for colours
14:20 – Styling navigation bar spacing, hamburger menu, and logos
17:56 – Creating and styling header hyperlinks
20:29 – Creating Sass variables for font sizes
21:28 – Styling header hyperlink textual content
22:30 – Creating CTA button
24:18 – Including linear-gradient to CTA button
25:57 – Styling the CTA button textual content
28:38 – Creating helper courses to cover/present content material on desktop or cellular
29:16 – Making a Sass mixin for breakpoints to make use of within the helper courses
36:40 – Tweaking header hyperlink and CTA button kinds
39:22 – Tweaking brand kinds
40:34 – Including energetic/hover states and transitions
_____________________________________
SUPPORT THE CHANNEL
⭐ Be part of channel members and get perks: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/be part of
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://market.visualstudio.com/objects?itemName=CoderCoder.codercoder-dark-theme
WANT TO LEARN WEB DEV?
Take a look at my programs:
🌟 Responsive Design for Novices: https://coder-coder.com/responsive/
🌟 Gulp for Novices: https://coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard– get 10% off with code THECODERCODER — https://vissles.com/?ref=mu96kxst5w
💻 Different gear — https://www.amazon.com/store/thecodercoder?listId=1LMCKGUTMVYXD
📚 My Favourite Books — https://coder-coder.com/best-web-development-books/
📺 My Favourite Programs — https://coder-coder.com/best-web-development-courses/
🔽 FOLLOW CODER CODER
Weblog — https://coder-coder.com/
Twitter — https://twitter.com/thecodercoder
Instagram — https://www.instagram.com/thecodercoder
#webdevelopment #coding #programming
source
Thanks a lot! I am trying to understand how to hide and show the hamburger menu on desktop / mobile, and your method is clear, I think is the best I've found, and I'm going to apply it on another frontend mentor challenge I'm working on🤗🙏👏
Hello
I'm new to coding and trying to follow the steps. But I am having an Issue, everytime I type the code in _header.sccs or _glabals.scss it does not update when I compile the code. Any ideas? Did I link it incorrectly?
programming is so fucking boring. theres so many elements, attributes, values and properties need to choose.
I don't know.. I like the way you tell and explain, but already following your tutorial for the second time, I come to a dead end because of some incomprehensible errors that you don't have. I even downloaded your final code and tried to run it myself, but it still doesn't work. Very annoying, very disappointing.
When can i find the images ?
For anyone who got stucked with "dist" part:
1. you have to create the folder named "dist" beforehand, it will not automatically appear.
2. you need to include all the codes in the description box inside the brackets.
3. when you click watch sass, it should appear two different files in dist folder automatically
Don't forget in the SASS 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
}
],
hello, Jess. I liked your teaching. I was following along with this video but at some point i lost track and my code is not working now. do you by any chance have this code in your github??
Thank you very much for the awesome video, this is the only tutorial that have clear explanation and clear sound 👍
Your teaching makes me happy i learn a ton of new thing that are details, you are so skilled.
i've manually created dist folder because whilst I was in the json settings file it kept throwing me an error, which i wasn't able to solve. and the styles weren't imported anyway…
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.
can anybody explain the /dist thing in more detail, im confused as to what to do instead since my settings only give me an " open user settings" button or a (UI) marked button?
Hello, im having some issues with the hamburger lines not showing up would you know why, i seem to have followed the same code you did on your end. thank you
You are a magician!
Mt hamburger menu isn't showing. Can someone help?
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 YouTube from last 3 years and your courses are among the best ! 😊 thanks a lot and keep doing it!
Coming back in two months Time and I’m going to understand what she’s doing
You are just an inspiration because of you I started my coding career again from scratch.
I followed the video step by step but my header.scss file is not affecting my webpage.. so the hamburger menu is not showing..
Hi you look so lonely, i would love to be your boyfriend. ❤
nice , fun I liked this video yes!!!!👍😅
hey boss . huh I barely started web programming a few weeks ago . I have discover front Endmentor by you and i would really like if you could help me with the first challenge ( i mean ..just break down how should i start ? thanks for read)
I was like, why isn't the hamburger lines appearing?? then… turns out i missed a ">" at the end of the code line of /dist/app/style.css, wasted 3hrs looking for why it wasnt showing….
This video was so smooth. I appreciate your videos so much! Keep it up!!
Hi
thank you so so much for sharing all this info!
I've always dreaded CSS until I found your channel. You're so organized and have a good workflow that makes sense to me!
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.
I need to know if that's visual studio code, if so, what theme are you using in this video
Very Job Goooooooooooooooooood