Developing Home Page of the Bootstrap website (Part 1) | Tutorial – 10

In this bootstrap portfolio website development tutorial, we will start developing the home page of the website. We will add the home page hero section and the our qualities section. This is part 1 and we will continue the home page in part 2. This is how the homepage of the website will look like –

homepage design part 1

Setting up everything Library into our Project Offline –

Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE

The folder hierarchy should look like this –

  • test code
    • bootstrap
      • css
        • bootstrap.min.css
      • js
        • bootstrap.min.js
        • jquery-3.3.1.slim.min.js
        • popper.min.js
    • css
      • style.css (our custom css file)
    • fontawesome-free-5.6.3-web
      • css
        • all.css (the only one we need to link in our project for font awesome icons)
      • js
      • etc
      • etc
    • imgs
      • our_qualities(folder)
        • (6 images)
      • logo_text_white_small.png
      • hero-img-half.png
    • aboutus.html
    • contactus.html
    • default.html
    • graphicdesign.html
    • mobileapps.html
    • portfolio.html
    • seoservices.html
    • softwaredevelopment.html
    • webdesigning.html
    • webdevelopment.html
YouTube video tutorial –

Leave a Reply

Your email address will not be published. Required fields are marked *