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

Study Bootstrap 5 and SASS by Constructing a Portfolio Web site – Full Course

by



Study Bootstrap 5 and Sass by constructing a portfolio web site. Bootstrap is likely one of the hottest CSS frameworks and Sass is likely one of the hottest preprocessors for CSS.

✏️ Course from Patrick Muriungi. Try his channel: https://www.youtube.com/channel/UCEtlYWZil1WbX2LoqF2qocQ
🐦 Patrick on Twitter: http://twitter.com/itsmuriungi

💻 Code (accomplished venture): https://github.com/MuriungiPatrick/Bootstrap-5-portfolio-template
💻 Code (theming-kit.html): https://github.com/MuriungiPatrick/Bootstrap-5-Theming-Equipment

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Half 1: Intro to Web site Mission
⌨️ (0:02:13) Half 2-1: SASS Setup
⌨️ (0:19:27) Half 2-2: Customizing Bootstrap
⌨️ (0:35:39) Half 3: File construction
⌨️ (0:43:32) Half 4: The Navbar Part
⌨️ (1:13:25) Half 5: The Intro Part
⌨️ (1:57:00) Half 6: The Firms Part
⌨️ (2:11:11) Half 7: The Providers Part
⌨️ (2:41:20) Half 8: Testimonials Part
⌨️ (3:11:10) Half 9: The FAQ Part
⌨️ (3:20:13) Half 10: The Portfolio Part
⌨️ (3:45:21) Half 11: Getting Began Part
⌨️ (4:10:24) Half 12: The Footer Part

⭐️ Sources ⭐️
🔗 SASS: https://sass-lang.com/information
🔗 Bootstrap 5: https://getbootstrap.com/docs/5.0/getting-started/introduction/
🔗 Google fonts: https://fonts.google.com
🔗 Fontawesome: https://fontawesome.com/begin
🔗 Tablericons: https://tablericons.com
🔗 Bootstrap icons: https://icons.getbootstrap.com
🔗 Illustrations: https://www.manypixels.co/gallery

🎉 Due to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse

—

Study to code without spending a dime and get a developer job: https://www.freecodecamp.org

Learn lots of of articles on programming: https://freecodecamp.org/information

And subscribe for brand spanking new movies on expertise on daily basis: https://youtube.com/subscription_center?add_user=freecodecamp

source

49 thoughts on “Study Bootstrap 5 and SASS by Constructing a Portfolio Web site – Full Course”

  9. 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.

    Reply

  11. would be good if someone make any tutorial/course for explainat all about the (as / ** /, and many more)
    https://youtu.be/iJKCj8uAHz8

    Because it realy terrible not understand that, and only fallowing tutorials, We need someone who realy will explain us every details, and why it working like that, and where we can find solution for the problem, because we will face many problem like that in our future 🙂
    Thanks all 🙂

    Reply

  27. question: why did we install autoprefixer package? Boostrap v5 uses it already out-of-the-box. no?

    according to docu:
    Bootstrap uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.)

    Reply

  31. 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

    Reply

  35. ⭐️ 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

    Reply

  37. 2:32:32 , why do you add: -webkit prefix to the background-clip property if we allready installed the autoprefixer at the beggining of the course? Shouldn't that autoprefixer be enough so that we dont have to think about adding prefixes??

    Reply

  38. I was kinda bothered by how the services section looks like on smaller devices, being that you have the content, then 2 pictures/illustrations one after another, then another content, which seemed off.
    So after some googling I've come up with this solution:

    1. In the web development content, change the class of a row to row–1, should be directly after the START WEB DEVELOPMENT CONTENT comment.
    2. Nest this code in services like this:

    .services {

    .row–1 {
    display: flex;

    flex-direction: row;

    @include media-breakpoint-down(sm) {

    flex-direction: column-reverse;

    }

    }
    }

    I don't know if this is the best approach but it works and looks much better in my opinion.

    Reply

  43. 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!!

    Reply

  49. The only probelm i'm having right now is some of the buttons (Submit and Back to top) are not getting their primary colors pink, they're the default bootstrap 5 color (blue). How can I fix this?

    Reply

Leave a Comment