• Tuesday , 25 February 2020

Build a responsive animated website [Part 1] | Bootstrap 4 Tutorial

Code Canyon

In this video we will be covering many of the topics I covered in my Bootstrap 4 crash course. We will be building a bakery themed responsive website from start to finish in. We will also be applying some simple animations to certain elements. This video will give you the necessary tools to start building responsive websites using Bootstrap’s powerful grid system as well as other components on your own. Responsive web design is a very important subject when it comes to web development. I hope you enjoy the video!

Don’t forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you’ll be notified the moment new videos are uploaded.

Subscribe ► https://bit.ly/2Q3pCiB


GitHub ► https://bit.ly/30xvLE9


Get exclusive Patreon perks.
Patreon ► https://www.patreon.com/juliocodes


Instagram ► https://www.instagram.com/juliocodesyt


Email ► codingwithjulio@outlook.com


Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.

HostGator ► https://bit.ly/2ZfR0u3
Coupon code ► JULIOCODES60
Video tutorial ► https://youtu.be/5B_LQqR0zsE


Programming & Video editing laptop Specs

Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)

Dell XPS 15 7590

United States ► https://amzn.to/2Gd7U4M
United Kingdom ► https://amzn.to/2NMJzqm
Canada ► https://amzn.to/2ReU08x
France ► https://amzn.to/2vcPU8n

CORSAIR Vengeance Performance RAM

United States ► https://amzn.to/38rWdmD
United Kingdom ► https://amzn.to/30FXNyA
Canada ► https://amzn.to/3awleix
France ► https://amzn.to/30JMkxX

Samsung 970 EVO Plus SSD

United States ► https://amzn.to/2NMIaAu
United Kingdom ► https://amzn.to/37hrJnc
Canada ► https://amzn.to/38tk9Gg
France ► https://amzn.to/2RfUdbC

Blue Yeti Microphone

United States ► https://amzn.to/2NNPSLr
United Kingdom ► https://amzn.to/2RiLKVb
Canada ► https://amzn.to/2RB6vdq
France ► https://amzn.to/30EJpqy

Microphone Shock Mount ► https://amzn.to/2MU1nBr
Microphone Boom Arm ► https://amzn.to/2ZQzbRR


In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.


This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!

Original source

3d Ocean

Related Posts


  1. Muhammad Adnan
    February 10, 2020 at 17:11

    You r the instructor. Without saying hey friends . Friends and friends bla bla bla. ..

  2. L J
    February 10, 2020 at 17:11

    could the reason why the <i class></i> wont show be due to an older link for bootstrap?

  3. Shehab beram
    February 10, 2020 at 17:11

    Sir, may I know the purpose of the script links inside the HTML file?

  4. Arul Jothi
    February 10, 2020 at 17:11

    Hey Its looking so cool man !
    Thank for the video.

  5. The Logic
    February 10, 2020 at 17:11

    you got me in 1 minute , cool design.

  6. Ljubicica Ganci
    February 10, 2020 at 17:11

    Thnks a lot bro, u r a truly legend. Cheers!

  7. Ric Ric
    February 10, 2020 at 17:11

    U r amazing thnks a lot4everything.Cheers

  8. Stan
    February 10, 2020 at 17:11

    Why my navbar doesn't have that 3 lines ??
    anyone can help??

  9. Thanadilok Panyafuang
    February 10, 2020 at 17:11


  10. Aleksa Car2000
    February 10, 2020 at 17:11

    I subscribed. Let's do it…

  11. heli keshariya
    February 10, 2020 at 17:11

    please share the source code file

  12. Abu Salehin Rifat
    February 10, 2020 at 17:11


  13. Richard Micheals
    February 10, 2020 at 17:11

    This is wonderful thanks a lot i love the hover effect on the button. A very nice concept

  14. Angela Rubio
    February 10, 2020 at 17:11

    Love your tuts, tey are the best!
    I have a problem with the script.js and I already check it to be a script properly on the html, and I don´t know what is happening, can you put the js file for download please?

  15. K Doodles
    February 10, 2020 at 17:11

    Uno problemo, I can't get the bars on the hamburger to display or the cross, though it is working! I have changed it to white so I can at least see the placement, any suggestions? I've been through the code twice and it's all good >.<

  16. Ahmad James
    February 10, 2020 at 17:11

    Awesome tutorials. I am having trouble with my hamburger menu not working on click. Can you see anything wrong?
    $(function () {

    $('.hamburger-menu').on('click', function () {




  17. Umer Farooq
    February 10, 2020 at 17:11

    If you build e-commerce website using HTML and CSS then I'll subscribe your channel coz I don't like bootstrap right now?

  18. Michael F
    February 10, 2020 at 17:11

    Great tutorial, you have some crazy CSS skills. Everything works perfectly so far on my machine. Only thing I had to do different was change the font-awesome kit to my own key because the hamburger menu was broken for me otherwise. On to the next video 🙂

  19. Omer
    February 10, 2020 at 17:11

    its a last part ?

  20. zohaib hassan
    February 10, 2020 at 17:11

    Love from Pakistan
    Excellent simply love it…..Awesome art of work..
    But I want to say that please make a separate video on the all the files thats you link in the project and please tell which class belong to which file

  21. dag
    February 10, 2020 at 17:11

    so good!

  22. Alem Kahrovic
    February 10, 2020 at 17:11

    Clean and modern 👌🏻 The side would be perfect if you added a 3 or 4 column footer section😎

  23. Myles Luke
    February 10, 2020 at 17:11

    Awesome Tutorial!

    I love seeing you post these videos then I'll have a play myself and see how it goes; of course done with a slight twist whereby a custom logo has been added and the overall theme is based a local cafe rather than a bakery.

    Can view the project here: https://github.com/mylesluke/Cafe

    – So far created a Adobe XD design
    – Created Logo in CS6
    – Using SaSS as a basis for my styling and color configuration
    – Using the AOS library for some of those animations but had to download the files for it as source wouldn't work

    A fun project; keep them coming!

  24. Suvrajit Naskar
    February 10, 2020 at 17:11

    Plz shear the next part….

  25. Jansenio Gonzales Venegas
    February 10, 2020 at 17:11

    todo bien hasta que me salio un error en la primera linea $ no definido alguna solucion gracias

  26. Jakub Krajewski
    February 10, 2020 at 17:11

    Happy that I've found your tutorial. Thank you for your effort and share. Regards.

  27. Евгений Бутков
    February 10, 2020 at 17:11

    I love this website!

  28. Jed
    February 10, 2020 at 17:11

    Why use jquery? You can use vanilla js.

  29. Web Coder
    February 10, 2020 at 17:11

    Hoping to get the next part soon

  30. rahul king
    February 10, 2020 at 17:11

    When the next part is uploaded

  31. Unathi Mehlomakulu
    February 10, 2020 at 17:11

    Great stuff!

  32. Hamza Guerfi
    February 10, 2020 at 17:11

    Hey thanks for this tutorial
    I have a small problem on the js file it says on the line 2 ($('.hamburger-menu').on('click', function(){
    i have this error Missing "use strict" statement
    so if u can help me and thanks for this

  33. Rachhann Cheav
    February 10, 2020 at 17:11

    thanks for this video teacher

  34. Jean Guimarães
    February 10, 2020 at 17:11

    Excellent tutorial. Congratulations teacher! 🙂

  35. ωєвкιн
    February 10, 2020 at 17:11

    This why YOUTUBE still Trending …….LOVE YOU YOUTUBE

  36. walter rivera
    February 10, 2020 at 17:11

    muy bueno cuando pondras el siguinete video

  37. Mochamad Rizky
    February 10, 2020 at 17:11

    Awesome tutorial. Can't wait for the next part.

  38. Jekwu Maxwell
    February 10, 2020 at 17:11

    Very nice tutorial

  39. Cedric Paje
    February 10, 2020 at 17:11

    Thx Julio for sharing your knowledge!

  40. 〈VipexCODE/〉
    February 10, 2020 at 17:11

    Lorem cake 😂 You are fken god

  41. teran neranga
    February 10, 2020 at 17:11

    Great video.Thanks bro❤️

Leave A Comment

You must be logged in to post a comment.