Hi Brian! I'm a subscriber in South Korea. I'm always studying by watching your videos. Your videos are more valuable and richer than any of the videos I have ever bought. You don't know how much I appreciate it. I don't even comment on Korean UA-camrs, but I have no choice but to comment on your videos
I am Bangladeshi. My mother tongue is Bengali. I'm not good at English. I don't understand your language 100%. But the video was not difficult for me to understand. Thank you very much.
WoW.. Amazing tutorial broo.., but i don't know, intentionally or not, the burger button navbar does not work when the display is mobile and the navigation bar cannot be opened. But never mind, I still really, really appreciate the tutorial you made ..
Yes make it as a full website, i cant say no to your tutorials man they are helpful and easy to follow bro. Dont forget to make SaaS frontEnd not SASS😂
Hello Brian I have uploaded the .scss files (navbar, colors, etc) I have imported into the main.css file, but they do not compile; and an error appears in the terminal, suddenly you know what it can be?
Hello thanks for this video I follow your steps 1.click watch Sass, 2.create automatic file style.css and style.css.map in folder style, but when i wrote the property in file style.scss like ( display: flex; justify-content: center;) only two this property display me automatically in file style.css/ not other like display: -webkit-box; display: -ms-flexbox; -webkit-box-pack: center; -ms-flex-pack: center; I will write manually. Way doesn't display me automatically? Thanks for your time?
you can check out BEM naming convention, but at the end of the day it's just preference. As long as you understand it and others can read it, then you should be good
It's BEM naming, it's used when you are working as a team so that other dev's can understand the elements easily. You can read more about it at getbem.com/introduction/
can someone please explain this part of the code padding: 0.5rem calc((100vw - 1200px) / 2); I know what is calc I just don't understand why -1200px and after that it divided to 2
it's just another way to set left and right padding without having to wrap everything with another div and add a max-width. It checks the width of the screen and then subtracts 1200px and then divides that value by 2, so each side has equal spacing. If you inspect the page you'll see the calculation working when you hover over the padding sections
Great Job Brian! It looks like my request has been granted...Thanks very Much ! I have an idea, maybe a surfboard rental full responsive website with Sass JavaScript and 3d animations? It will be Awesome !!! Best regards from Europe !!!
@@briandesign When it comes to ideas, I have them a lot. You can count on me ! Worse with skills;) Peace! and keep moving forward! You're doing great Job .
@@briandesign I changed the height and width in the .hero__container- -img{ to 300% and it’s responsive but a little off in comparison to the original image. Just incase, I downloaded the source code and tried changing the image there as well and it doesn’t line up as well as the image provided. Even though I replaced it with another the with identical dimensions.
@@briandesign Look at 3:49, it automatically adds a bunch of lines to the .css file for cross platforms compatibility, and in my case, both .scss and .css files stay the same. I tried compiling it manually in Terminal but same happens there (which means Webstorm isn't the problem), it simply doesn't add those extra lines
@@briandesign I have Live Edit extension and Sass extension + SCSS File Watcher in WebStorm which are equivalent to Live Server and Live Sass Compiler in VSCode. I am starting to think maybe it's because we are using different Sass versions, I'm using v1.29.0
Just a suggestion. Can u do a fully react app with the backend part also? Like a website for a store.. Or even a blog may be with post creation like stuff. as I said just a suggestion
Brian, thanks for the vid. I am the guy contacted you on twitter with a UI mockup. Thanks for helping me out.
I love no nonsense 'just get started' videos. Well done!
Hi Brian! I'm a subscriber in South Korea. I'm always studying by watching your videos. Your videos are more valuable and richer than any of the videos I have ever bought. You don't know how much I appreciate it. I don't even comment on Korean UA-camrs, but I have no choice but to comment on your videos
Thanks! I appreciate it! awesome to see others from all over the world
I love the design you choose for building website. Keep it going❤️
Thanks Dhanush!
@@briandesign what is the name of this theme
I appreciate the work you put in, cheers!
Thanks Louis!
Would love to see more of react :)
plan on dropping more vids soon!
Thank you for the wonderful video. It would be a pleasure if you create a crash course of javascript!
its really simple and awesome for beginners ..thank you so much
💚
I love these videos. It would also be good if you show us building websites like these using CSS frameworks like Tailwind or something...
Pay attention! Do not use extension Live Sass like at this video! It is not maintaining. Use fork of Glenn
I am Bangladeshi. My mother tongue is Bengali. I'm not good at English. I don't understand your language 100%. But the video was not difficult for me to understand. Thank you very much.
your all react video is awesome.. 👌
Glad you like them!
WoW.. Amazing tutorial broo.., but i don't know, intentionally or not, the burger button navbar does not work when the display is mobile and the navigation bar cannot be opened. But never mind, I still really, really appreciate the tutorial you made ..
Thank u so much u save my life
Thanks for the great video! I enlightened when I see media query mixins. Keep up!
Thanks Ozkan!
You are tooo awesome ❤️❤️❤️❤️
u get 1 more sub :)) congras
Great tutorial ! Thank you !
Thank you for making such great videos :)
Thank you! Was really struggling with going live with sass. I was using gulp watch for a while, but it's kind of complicated.
BTW... The extension is gone and there are no other alternatives.
When i try editting the navbar in scss, it wont work for some reason only if i do it in style.css
FLAWLESS VICTORY!! well done. a bit quick for a newbie but nonetheless very nice.
awesome!! BUT, how do you make a dropdown menu from that icon on scss?
Yes make it as a full website, i cant say no to your tutorials man they are helpful and easy to follow bro. Dont forget to make SaaS frontEnd not SASS😂
Great tutorial thanks man
realy useful.Thank you very mutch
Very nice vidoe keep it up
Thanks
i dont have watch sass button in vs code. any other way of accomplishing the same?
i love this and your content
Thanks!
Thanks Brian.
You're welcome!
Thanks for the video man
No problem!
Can you please make complete portfolio website
Thank you, great tutorial! You type very fast, which is cool, once I just copy/paste, second time I listen to you. When is coming the rest of site? :)
I plan on making a full site in the near future
@@briandesign When can we expect a full site, im looking forward to the full site
thanks bro
Where will i find the picturs pleas
awesome thank bro great work
Thanks Jon!
Cool!!! TQVM!
Thanks!
Nice tutorial brian 👍
Thanks 👍
Hey is it cool if you can create some dynamic dashboard using ReactJS?
Awesome man
Thanks!
Would wait for gatsby version of this
yeah I got some plans for making gatsby sites soon
awesome video bro.. keep up
Thanks a ton
superb...👌👌
Please make a video on portfolio website using Html5 and CSS, please 🙏🏻🙏🏻
sure I'll add it to my list
thnx King
Hello
Brian
I have uploaded the .scss files (navbar, colors, etc) I have imported into the main.css file, but they do not compile; and an error appears in the terminal, suddenly you know what it can be?
Hi, how if my html code is like this :
Sign Up
How to direct to the button in sass ?
great, keep it up!
Thanks Evgeny!
Nice !
For the hamburger menu to work you need additional JS right?
Can you do a beginner-friendly video of SCSS?
Hello thanks for this video I follow your steps 1.click watch Sass, 2.create automatic file style.css and style.css.map in folder style, but when i wrote the property in file style.scss like ( display: flex;
justify-content: center;) only two this property display me automatically in file style.css/ not other like display: -webkit-box;
display: -ms-flexbox;
-webkit-box-pack: center;
-ms-flex-pack: center; I will write manually. Way doesn't display me automatically? Thanks for your time?
Just to let you know , Liver Server is a dependency of Live Sass Compiler, so you need both of them.
ah okay! thanks for sharing
Great Content . Could you please do full-stack react application ?
The video is very ok, but when u click the bars the menus items don't show
When you inspect the page are they showing in the elements tab?
I'm here for this!
Hey Brian, I've wondered is there a reason you define your classes like hero__section ? I've seen others go hero-section
you can check out BEM naming convention, but at the end of the day it's just preference. As long as you understand it and others can read it, then you should be good
It's BEM naming, it's used when you are working as a team so that other dev's can understand the elements easily. You can read more about it at getbem.com/introduction/
@@briandesign Alright, I see. Let me go have a look at that
Dude can you do website layouts? You have an amazing video and great websites even fot tutorial.
like templates? not sure what you're asking
Please some one tell me is this project same as real time (mnc company project) project or not.
can someone please explain this part of the code padding: 0.5rem calc((100vw - 1200px) / 2); I know what is calc I just don't understand why
-1200px and after that it divided to 2
it's just another way to set left and right padding without having to wrap everything with another div and add a max-width. It checks the width of the screen and then subtracts 1200px and then divides that value by 2, so each side has equal spacing. If you inspect the page you'll see the calculation working when you hover over the padding sections
Great Job Brian! It looks like my request has been granted...Thanks very Much ! I have an idea, maybe a surfboard rental full responsive website with Sass JavaScript and 3d animations? It will be Awesome !!! Best regards from Europe !!!
for sure! if you got any references to a design feel free to comment it so I can check it out! I'm always looking at new design ideas
@@briandesign When it comes to ideas, I have them a lot. You can count on me ! Worse with skills;) Peace! and keep moving forward! You're doing great Job .
brother why u not tell about click on bars and show menu ? why??
I've made a bunch of website videos already showing that, so you can check the longer vids on my page if you wanna see how I did it
@@briandesign any link of that video which help me about this problem
bro please make a video on next js
Brian is there a site similar to pexels.com but for graphics like the alien graphic?
just undraw, but it's only illustrations
@@briandesign much appreciated Brian! my extension keeps crashing vscode when i create partials in sass, it's crazy right?
@@dominicshib3276 does that happen all the time? or if you restart vscode it fixes it?
Hey Brian I'm trying to insert an svg but when it comes up on the live server it's way too small even though I haven't changed any of the css or scss.
are you able to change the size or did you wrap everything correctly?
@@briandesign I changed the height and width in the .hero__container- -img{ to 300% and it’s responsive but a little off in comparison to the original image. Just incase, I downloaded the source code and tried changing the image there as well and it doesn’t line up as well as the image provided. Even though I replaced it with another the with identical dimensions.
@@shapes8198 you might have to add custom css to fit other sized images
@@briandesign ah, I see thank you!
When I compile `h1 { display: flex; justify-content: center; }` I get the same in styles.css, how can I fix this? I'm using WebStorm
I'm not sure what you're asking. I only have vscode so I wouldn't know if you're using a different editor
@@briandesign
Look at 3:49, it automatically adds a bunch of lines to the .css file for cross platforms compatibility, and in my case, both .scss and .css files stay the same.
I tried compiling it manually in Terminal but same happens there (which means Webstorm isn't the problem), it simply doesn't add those extra lines
do you have the extensions installed that I showed?
@@briandesign I have Live Edit extension and Sass extension + SCSS File Watcher in WebStorm which are equivalent to Live Server and Live Sass Compiler in VSCode.
I am starting to think maybe it's because we are using different Sass versions, I'm using v1.29.0
hey brother brian can be possible with reactjs and sass at the same time?
yeah
pls lets make it a full site.
What situation would u use @extend for...?
check their official docs to see use cases sass-lang.com/documentation/at-rules/extend
Just a suggestion. Can u do a fully react app with the backend part also? Like a website for a store.. Or even a blog may be with post creation like stuff. as I said just a suggestion
if you wanna make a blog it's easier with gatsby. That's what I used to build mine. I have plans in the future to make a tutorial
@@briandesign waiting 😀
Why u like to complicate the class names with ___ and --
But that's only a landing page. Please do other sections like a about, services, contact, foter, etc...
yeah I'll make one in the future!
@@briandesign keep going
@@briandesign still these are great projects for time-short people
11:14
I came here because your react video for beginners are hard to understand for me, because of styled components. Im not good at Designing front end 😁