Learn Bootstrap 5 and SASS by Building a Portfolio Website - Full Course

[@koshurcoder]

Completed this project after almost 10 days, with in-between breaks. Every aspect of it was awesome. Thank you for this wonderful course.

[@jamesallen3818]

This is hands down the best tutorial on Bootstrap 5 and Sass on youtube, i've learned so much about Sass in this tutorial, i completed the whole thing, watching you typing every command with you. Also you are a master in Emmet, the best i've seen, I'm trying to get all those shortcuts down and its helped a lot watching and trying what you did. Thanks so much, job well done, I realize how much time you've put into this tutorial and I for one am thankful.

[@abdel-rahmanhusam5522]

I just finished watching the whole course! It's so amazing how the final product turned out to be!

[@mdbits]

Just finished coding along through this video. I was able to work along and develop a template with my own images and color schemes with no problem. The Sass setup with npm was excellent, and the integration with Bootsrap v5.0 amazing. It may take you a few dozen pauses of the video to stay on track, but I highly recommend coding along with this video. It is excellent for both Sass and Bootstrap v5.0

[@sarach5691]

How to install it as laravel project?

[@ivanmilenkovic203]

why using Node here? can't we just set up without Node?

[@wm7298]

I took a full-stack bootcamp and still learned a lot of new tricks! I like your use of Emmet, nesting, keeping all the styling in separate sheets. You have a style library, now anyone can snip paste and modify any section of the page. Great work!!

[@elviswarutumo2509]

Appreciating content from my country people🇰🇪

[@calebmbugua745]

Asante

[@JohnOchuro]

Hey majamaa , we should connect! 🇰🇪 my twitter is @itskrox

[@alexokeyo4616]

@@JohnOchuro twitter.com/ItsMeAlekih

[@alexnganga6401]

Kenya. congrats to Patrick

[@joneswafula]

Wakenya tumewakilisha kila place naona!

[@colettewilson6681]

Just finished the tutorial and have truly learned a lot. Thank you Patrick for taking the time to do and share this with everyone, really is very appreciated, especially to a newbie like me, much respect!

[@1DzambazoT1]

66y9

[@shaunsanmiguel1192]

This is what I'm talking about. There's not much any video there with sass and bootstrap 5 combine. Thanks for this

[@julioclc]

Completed this project in almost 20 days, a HUGE learning about boostrap and CSS/SASS. Thanks for the explanations!

[@SuprXer0]

just completed the course and I must say that I'm quite impressed! love the way you order things, makes it more clear. thank you so much!

[@joegracey]

I love his teaching style. Reminds a lot of Traversy Media style. No fluff, just clear and concise.

[@kimutaifelix9092]

Thank you Patrick, I am so happy to learn something from someone from my country. Asante sana.

[@Moonpie1025]

Nimeskia hio Sauti nikajua Ni mkenya! Then the doc name muriungi sold it.. awesome video!

[@Ch1llDev]

This video taught me a LOT about sass! Thank you so much!!

[@sujannepal7458]

I completed this tutorial in 10 days. I found this tutorial very awesome. I learned a lot from this. Thanks to the creator...

[@ambushtunes]

Kenya to the world. Proud of you Pato.

[@michaelriccelli8483]

I like this approach. Much simpler than trying to use a gulp or grunt set up. I also like the architecture of creating a theme-kit and using that as a reference to customize those particular bootstrap styles.

[@devadn9853]

I think I will include this technique in my workflow once I will learn adobe xd

[@DanPaulDrums]

This is amazing. I especially appreciate the rooster call in the background at 1:08:40 I'm learning a ton. Thanks for putting this together!

[@allisonposey1946]

Finished this in 2 days. I learned a lot especially in setting up bootstrap and sass. But what you did was not the best practice using bootstrap and sass. But for the sake of learning and free content, this video was great.

[@KletoReese]

Can you then explain what is the best practice in using Sass and Bootstrap?

[@fnamelname3209]

@@KletoReese The only thing I can think of is you should use @use instead of @import. But it's kind of a moot point because BS5 uses import anyway, so you'll have @imports in your project anyway unless you use the CDN.

[@samuelbaseke5305]

I have just finished coding along. One the best instructors here on KZbin.

[@8koi139]

YES Exactly what got my attention!! they looks sooooo powerful!!!

[@wkudoi]

Bootstrap Day: Traversy Media and now FCC by my country mate 🇰🇪Patrick 👌👍🏽

[@Sandeep-cz7ls]

I literally got a domain for my personal website and this pops on Quincy Larsson's email listing. Some sorta magic not even kidding lol

[@hamzadanish4444]

how to get a domain?

[@gektorix]

This is my favorite project. Patrick, create a more complex project using additional libraries. Your faithful follower)

[@NatColley-t4z]

TWO THUMBS UP! This has been the Bootstrap class I never knew I needed.

[@robertobenedit]

27 millons of thanks! Now, I understand Bootstrap and Sass percfectly! Fist time I use them!

[@sethrandalldev4154]

Great course! I changed up some stuff and got a great portfolio now. I'm excited to show it off and start building more projects with some of the tools I learned.

[@zulfikeryahya5375]

thanks for giving the opportunity to learn something special

[@AmaliaDevCode]

⭐️ Course Contents ⭐️ ⌨️ (@) Part 1: Intro to Website Project ⌨️ (@) Part 2-1: SASS Setup ⌨️ (@) Part 2-2: Customizing Bootstrap ⌨️ (@) Part 3: File structure ⌨️ (@) Part 4: The Navbar Section ⌨️ (@) Part 5: The Intro Section ⌨️ (@) Part 6: The Companies Section ⌨️ (@) Part 7: The Services Section ⌨️ (@) Part 8: Testimonials Section ⌨️ (@) Part 9: The FAQ Section ⌨️ (@) Part 10: The Portfolio Section ⌨️ (@) Part 11: Getting Started Section ⌨️ (@) Part 12: The Footer Section

[@asp2867]

It was AWESOME. Thanks a lot Patrick . Love from iran

[@code-snippets]

I like the way you work, very orderly and structured, excellent, thank you very much, I have learned by watching this tutorial.

[@CamiloSanchez1979]

Dude this is the best tutorial out of all tutorials that exist out there, thank you, thank you so much for this. You took the time to go over the steps from very basic folder to the final product. I truly appreciate your video. I was having such a hard time setting up a basic bootstrap. All the other videos are inferior compared to this. Subscribed

[@primeweird]

Dang, how do you guys know what we need most at the moment?❤️😂 Awesome!!

[@SalomDunyoIT]

KZbin knows :)

[@gamersdestiny403]

😮 me too man. Just realised it was uploaded a day ago...

[@earlpascual152]

Just want to thank Patrick for this wonderful video! made me learn that SASS truly is a powerful tool to use :)

[@olekingkinga9151]

Lot of love from Kenya bro. great help

[@mykalimba]

Since version 5 (c. 2017), the "npm install ..." command has automatically added the "--save" option, so you do not need to add that on the command line.

[@aj.arunkumar]

i didnt knew that.!!!! nicee

[@sarcasticdna]

Brad Traversy and FCC : Today is Bootstrap Day

[@mounirelbertouli9990]

Yeah ! I noticed that

[@MIXEDGROUND]

kzbin.info/door/Bo3aDK3m7-Q8ThYCJUiSDQ

[@MohamadMohamad-pl4eb]

also the net ninja

[@sarach5691]

How to install it as a laravel project and make it happen??

[@muralikrishna5570]

Brother, I regularly follow this channel... your videos are amazing to improve my knowledge. It will very useful in application design and development.

[@aviral1841]

For those of you who are wondering that which font is he using in vscode, it is Poppins.

[@gp390]

Thanks. What about font color theme?

[@aviral1841]

@@gp390 Sorry for replying late but I am not really sure about that. But there are some similar themes like Palennight Operator and One Dark Pro. One theme suggestion - Ayu Mirage.

[@gp390]

@@aviral1841 No Problem. Thanks anyway.

[@kirtirattan161]

@@aviral1841 hey at 26:36 the color of his heading is changed ffrom blue to purple, but I am unable to do that. Can you please help me out with that?

[@aviral1841]

@@kirtirattan161 can you share the code?

[@michelribbens8014]

Very nice. And hope to see a similar video for Bootstrap 5 + Sass with React. Would be great to see how to create a boiler plate with this setup for React

[@paulwalker438]

Fantastic project so far! I noticed in the portfolio section you never covered how to organize and show content via the buttons like in your small preview at the start of the section? I'd be really interested in knowing how to do this. Thanks.

[@SonAyoD]

the buttons don't work? Did you figure out how?

[@paulwalker438]

@@SonAyoD I'm afraid not. I went through the entire project and it's never covered sadly.

[@barrientoscardenaslinofern4717]

I love your page when i get my first job i wanna give you a great donation for your amazing job

[@annez8598]

Excellent in-depth course about Bootstrap 5. Thank you very much for your time and sharing it with us!

[@rafaelcolina8099]

Completed. Just missed apply filter on "Latest work" section. Thanks.

[@JoshuaMusau]

Nice to see a fellow Kenyan making moves!

[@ojas.11]

Learnt a lot. Great project. Just on suggestion, keep only one h1 tag per page for SEO reasons.

[@raducosminpugna7222]

🤩 Awesome 🤩 Thank you for this 🙏

[@atikur_rahman_nao]

Excellent! I'm very appreciate for your tutorials. everybody should watch this tutorials to achieve a good knowledge on sass. May happy and long life.

[@AjinkyaMore]

This is what I was looking for. Quality content. Awesome work Patrick, thanks a ton!

[@lilynaciri]

Thank you Patrick and free code academy

[@ccrenshaw6184]

Great tutorial Patrick! I really enjoyed it and learned a lot!

[@lostnative3395]

Thanks a lot Patrick very helpful!

[@anastasiiazakala7035]

can I ask what bootstrap extension is being used here to suggest and automatically complete the names of classes in the HTML like on 48:30? I tried Bootstrap IntelliSense and some others but neither of them worked as intended. I would really appreciate any pointers!

[@mdbicky9460]

thanks for this course Muriungi ❤🎉 took a lot of time to complete this course thanks mate keep up the good work

[@_sharmaji.dev_]

Was looking for similar. THANK YOU❤️

[@MIXEDGROUND]

kzbin.info/door/Bo3aDK3m7-Q8ThYCJUiSDQ

[@richarddrawsstuff]

Brilliant Tutorial. Thank you for the content.

[@chester0759]

I've just finished this course and it's really awesome I've learned a lot .thanks a lot.

[@hectorh.rivera9144]

Awesome work! thank you so much!! one of the best tutorials I've ever seen.

[@parsia130]

I really learned sass with this tutorial it was awesome i really recommend if you wanna learn bootstrap and sass perfectly you must watch this course good job and thank you so much ❤

[@colettewilson6681]

Hi Patrick thanks for the tutorial! I have run into a problem around 26:45 started changing the custom.scss to the pink and purple colours but when I view the live preview, the colours have not changed. What am I doing wrong? Thanks

[@PatrickFromKenya]

Have you linked the compiled style.css on the theming-kit.html?

[@boyceb99]

I get the same problem. I have followed the link to the instructions on github for Bootstrap-5-Theming-Kit, but perhaps I am too much of a noob to understand the instruction number two under getting started, which reads: "cd into the clone". Maybe that is the problem. I have added the tag, into the head section of the ming file, but nothing I do in my _custom file to override the variables in the _variables.scss file has any effect at all. It could be telling that when I go live, the ming-kit does not automatically load, it simply shows all of the files that are in my boostrap-v5 folder and I have to click on it. Am I missing something that is not in the video? I have followed every step precisely three times from the start of the video to the point at 26:45 but I can't effect any change in the template at all.

[@PatrickFromKenya]

​@@boyceb99 once you clone the repo,you need to cd to the cloned folder. so on you terminal/bash/cmd just type cd Bootstrap-5-Theming-Kit. then run npm install to install the dependencies which includes bootstrap.

[@PatrickFromKenya]

@@boyceb99 Have you 1) imported _custom.scss inside style.scss? 2). Have you compiled the style.scss? 3). Is your script running when you make the changes?

[@boyceb99]

@@PatrickFromKenya got it working- thanks!!!

[@zaqqeus]

This was a fruitful journey. Much appricited 🙏

[@MrGiovanniOSFP]

What an amazing tutorial. Well done sir.

[@anangyoga1381]

thank you so much! Muriungi

[@VS-wx8hk]

Thank you! I have learned a lot of informations and built my own project.

[@NelCapeTown]

Excellent introduction. Thank you so much for taking the time to do this.

[@speedbreaker5642]

Very helpful no bullshit pure content

[@giannitelliroberto6103]

great video and content. I am a complete beginner and every step takes me probably double the time it should (when I am lucky) but I am so grateful for your channel!!!

[@chzmo]

How to double like a KZbin tutorial. Its amazing : -)

[@shashidhargr26]

Don't forget to update the proper path for "bootstrap.bundle.min.js" in theming-kit.html. It should be something like after we install bootstrap 5 using npm.

[@richardkrone538]

Ah, Thank you! This was a missing bit in the video.

[@nataliagonzalez6051]

I don't think that path in the theming-kit.html needs to be changed if you add the compiled JS files (downloaded from Bootstrap) into the "assets" folder. Just create a subfolder named "js" and add all those compiled JS files into it

[@jmo4859]

hello dude, and if i want to upload my project to netlify, what should i do with the js file?

[@КсенияУсик-н3г]

Thank you so much for this project! It works perfectly and is easy to follow ❤

[@ΑΘΑΝΑΣΙΟΣΧΑΛΚΙΩΤΗΣ]

Great tutorial. Learned a lot. Keep up the good work!

[@mugiirakimathi6299]

This is great Patrick. Thank you!

[@2odd485]

Thanks so much I have learned a LOT from You Sir. God Bless - I wont forget you once I get paid on my first Work

[@roseannam5252]

This is a great class. The sass compiler didn't work the next day and nothing changed. I'm not the most computer literate and I got as far as the Intro section when I noticed the typography didn't change. Thanks and keep coding! I truly learned a lot so far but I'm not sure about the sass compiling thing. I need to look into that more.

[@sak2752]

completed this project in a week , it was great thanks a lot for it .

[@balajiravi9259]

Very nice I covered only header section but it's worth I learned lot of things 🙏🙏🙏🙏🙏🙏

[@w3mct]

perfect course, excxatly what i need right now!!

[@landsfadern2]

same here. Apparently this video is so interesting.

[@thelaststanding97]

Thanks you very muchhh!!! I learned a lot of things. Greate job! Best wishes for you and your family!

[@sayed1821]

This video is the first in my life time of watching KZbin dev tutorial that I saw a instructor use Opera browser.

[@richardkrone538]

Variety the spice of life. :)

[@suryaaytha7376]

How will we get - "theming-kit.html" at 19:37. Can anyone tell me how to get it

[@PatrickFromKenya]

the file is available. check the link on the description

[@landsfadern2]

This is so cool! Keep up the good work!

[@guestabalouisarnaudsavadog9721]

So amazing and well explained. You saved me a lot of reading.lol. thanks

[@durellmwakulo4793]

Lot's of love from Kenya

[@fernandapw08]

Excelent tutorial! Thank you so much

[@LearnEnglishwithKevin101]

Great content but a little advice for beginners: watch some bootstrap and sass tutorial before you watch this video as he doesn't explain what is the purpose of the things that he is doing. If you don't watch some tutorials before watching this video you might feel a bit frustrated!! 03:29:00 I wish you could have done that part separately!!

[@MonaliGore21]

But, please can anyone tell me that, can we add these freecodecamp's projects in our resume by doing modifications in it. Or else interviewer knows these projects already ????

[@gokulraj9535]

No Problem , but make sure that you know to explain the whole project end to end that's all.

[@OPGAMER.]

you should build your own projects and then add them to your resume!! Don't add these!!

[@sarcasticdna]

@@OPGAMER. dude it's okay for fresher to add these. But when someone asks the person should be able to explain the code.

[@rahulbhoir1820]

i'll will say learn the project don't copy it, as we have done for an assignments in college , show your creativity in that ... make some changes. It will help you in longer run..

[@robyadiputra6683]

If you can make something like this you can use this for your resume

[@jeromyclassyca7063]

Okay, now this is what i was searching for

[@mwapeg]

I have a question: how do we create an effect on the portfolio section such that clicking or hovering over the buttons will show the user which portfolios belong to specific categories/sections

[@saidneder41]

Thank you for so much knowledge 🙌

[@rahulgauniyal4927]

Great tutorial

[@jwalantbhatt527]

In part 2-2, where did the theming-kit.html file come from? It wasn't present in the chapter before that and suddenly appeared at the start of the next chapter. Edit: Got it. It's linked in the description. He also mentions it in the video after a while.

[@MIXEDGROUND]

kzbin.info/door/Bo3aDK3m7-Q8ThYCJUiSDQ

[@ademolakadiri7647]

Hi Jwalant, still can't understand where it came from. Kind of stuck there

[@jwalantbhatt527]

@@ademolakadiri7647 check the description of the video, a GitHub link has been provided for that file. You need to copy paste that code and make a new indexong-kit.html file yourself

[@jwalantbhatt527]

@@bigcheese2001 For the JavaScript, I used the CDN mentioned in the video. However, even I've been facing an issue with the navbar color and I have no clue what's wrong

[@ademolakadiri7647]

@@jwalantbhatt527 Thank you Jwalant. Figured it out eventually.

[@sadik_farhan_]

I waited for this course! Mom: Last video before sleep ME: OK

[@MIXEDGROUND]

kzbin.info/door/Bo3aDK3m7-Q8ThYCJUiSDQ

[@flair4030]

@@MIXEDGROUND Stop spamming. I am gonna report you for spam

[@legendkartik2285]

YOU JUST GAINED A NEW SUBSCRIBER!!❤️

[@Gaurav-um4oh]

Just yesterday i discovered this awesome channel and since yesterday my new life has begun!

[@19999hz]

npm run compile:sass at 15:25 does nothing. Shows >projectName@version compile:sass /folder and > sass scss:assets/css but the folders and files don't get created.

[@CodewithPatric]

check how you do your spacing on the script. and run the script again

[@pavlinapsarsky2819]

I learned a lot, thank you!

[@smritigupta1468]

I love when he says 'pakege'!😄 & sass is sus🤫 got a feeling of among us😁

[@SuperPainPk]

Awesome course Patrick!! I definitely learned a lot from your great explanations and different ways you showed us how to do things. I am very grateful for learning Bootstrap from a master like you. All the best and I can't wait to see the next course.

[@sameeradde]

Thank you so much, From Somalia.

[@halumination5472]

32:59 why i cant pop down when i press the button? do you know why?