Download appDownload App

Projects in Bootstrap 4: Learn by Building Apps

We have come a long way from the first websites that were dull and full of text. While those served their purpose back then, today websites need to be more dynamic and interactive. In addition to fulf...

  • All levels
  • English

Course Description

We have come a long way from the first websites that were dull and full of text. While those served their purpose back then, today websites need to be more dynamic and interactive. In addition to fulfilling their purpose, they must also look aesthetically appeasing. Websites are primarily designed in HTML and CSS, with HTML being used for the structure and CSS helping with the design and the lo...

We have come a long way from the first websites that were dull and full of text. While those served their purpose back then, today websites need to be more dynamic and interactive. In addition to fulfilling their purpose, they must also look aesthetically appeasing. Websites are primarily designed in HTML and CSS, with HTML being used for the structure and CSS helping with the design and the look-and-feel of the website. Having to code every inch of a website can often be a tedious task, which is why there are templates or frameworks that can be modified to get the desired layout of the website.

What you’ll learn
  • Photosharing – A complete photosharing website that will include multiple pages and a different layout. As you move from one page to another, the layout will change.
  • Resume – A sophisticated resume website, where you will learn how to use the Bootstrap 4 grid and create the corresponding layouts with that.
  • Social Networking – A social networking website, where you will learn how to incorporate a number of different feature such as comments, adding photos, groups. You will also learn how to add a sidebar to the website.
  • Agency – A clean and nice looking website with a nav bar on the top, followed by a jumbotron. In this project, you will learn how to block of sections of a page to add a different segment of the website and add a contrasting design.
  • Lightbox – In this project, you will learn how to incorporate the Bootstrap 4 grid layout, to create a lightbox, that includes images. The images are added in a slideshow, can be clicked on and the webpage even includes a sticky menu.

Covering Topics

1
Section 1 : Course Introduction
2
Section 2 : Bootstrap 4 Features
3
Section 3 : Photosharing Website
4
Section 4 : Building a Resume Website
5
Section 5 : Social Network Front end
6
Section 6 : Agency Website
7
Section 7 : Lightbox Website
8
Section 8 : Course Summary

Curriculum

      Section 1 : Course Introduction
1
Introduction
      Section 2 : Bootstrap 4 Features
2
Introduction
3
New In Bootstrap 4 Preview
4
Code Editor
5
Initializing A New Project
6
Quick SASS Introduction
7
Gulp
8
Hello World Example Preview
9
Summary
      Section 3 : Photosharing Website
10
Introduction
11
Building The Menu Preview
12
Jumbotron and Footer
13
Main Content Sections
14
Starting Sass Build Out
15
Completing Sass For Index
16
Creating The Contact Page
17
Styling The Content Page
18
Creating The About Page Preview
19
Additional Styling And Custom Media Breakpoints
20
Installing Font Awesome
21
Grid Analysis
22
Summary
      Section 4 : Building a Resume Website
23
Introduction Preview
24
Revising Gulp File
25
Initial HTML For Layout
26
Initial Styling For Home Page
27
Adding Education & Skills Sections
28
Completing Education & Skills Sections & Styles
29
Adding Services & Projects
30
Summary
      Section 5 : Social Network Front end
31
Introduction
32
Home Page Header Layout
33
Navigation And Wall Comments
34
Creating Bubble Comments
35
Styling Bubble Comments
36
Creating The Sidebar
37
Adding Photos Page
38
Summary
      Section 6 : Agency Website
39
Introduction
40
Creating The Navbar And Footer
41
Intro Section and SaaS
42
Who Section
43
Scrolling and Project Completion
44
Summary
      Section 7 : Lightbox Website
45
Introduction
46
Creating The Carousel
47
Home Page Tab Pane Content
48
Summary
      Section 8 : Course Summary
49
Summary

Frequently Asked Questions

It is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.