Bootstrap 5 Web Design Course - Create A Social Networking Site

I've been telling you that once you understand the fundamentals of Web Design using HTML and CSS, it'll be like a piece of a cake to design a website using framework like Bootstrap.

Not only for Faster Web Design but to work seamlessly in a team, Code Maintainability and Scalability, Company prefers using frameworks like Bootstrap.

So, let's explore how this course can be helpful to you.

What You'll Learn

At the end of this course, you will learn to 

1. Use the bootstrap documentation.
2. Understand the Bootstrap Grid Layout.
3. Explore Bootstrap 5 Components, Utilities, Forms and Helpers.
4. Create Homepage of Social Networking Site using Bootstrap 5.
5. Customize Bootstrap Design with CSS.

Technologies Used

1. HTML 5
2. CSS 3
3. Bootstrap 5

Tools Used

1. Microsoft Visual Studio Code
2. Icons 8 
3. Freepik Ai Image Generator

Requirements 

1. You should know the basics of HTML and CSS for Web Design.
2. Fundamentals of Website Design Process (Thinking to Designing)

Different Sections of Social Networking Site Design

The social networking site you'll be designing on this course will have multiple section with their own specific purposes.

So let's explore the website design anatomy of this Social Networking Site you're going to design

1. Navigation Bar

At the top of our Social Networking Site Design, we'll have a navigation menu.

First, on the left we'll have logo of the site (which is clickable and takes to homepage) followed by primary menu.

Primary Menu will have multiple major links like Home, About and Contact. But not more because we don't want to make this section cluttered and guide user to major functionality of the site (i.e. publish and explore content, connect with friends, etc.).

After Primary menu, we'll have a Search Bar to search for the posts and peoples. 

Then at last we'll have a dropdown menu (for logged in users) with an option to manage profile, posts, settings and logout. If the user is not logged in then, this dropdown will be replaced by a register or log in option.

2. Main Content Section

This is the major section of our Social Networking Site Design.

The whole layout is sectioned into 3 columns

2.1. Profile Section

This first column displays the information about the logged in user.

It displays the user Profile image at the top followed by Full Name, User Occupation & Short Bio.

After that a Statistic about the user connections (Following and Followers) and feed will be displayed.

Then, we'll list the topics on which the user is interested. This list is clickable and when clicked, it'll recommend the feed (posts) related to the clicked interest.

2.2. Feed Section

This is the middle column of our Main Content Section.

In this section logged in user will first get an option to Post/share content.

They can just type the message or description, select topic and select image (optional), then post.

After the feed post section, the users will see the lists of posts (feed) posted by them and their connections.

Each posts have the option to add the comment.

And the total number of comment on each post and the post added date is also displayed for each post.

2.3. Recommended Users and Trending Posts Section

And the Third Column of our Main Content has Users Recommendation Section at the top.

Here the users will see the list of people they can connect with. Short information about the users like Profile Image, Full Name and Occupation is shown here.

After that, we have a trending posts section where the most popular posts will be listed.

You can click on each posts to see the details about it.

3. Footer

I have kept footer minimalist.

It has a simple horizontal menu linking to Home, About and Contact pages.

Here's The Course for FREE

Donate

If the project was helpful to you and want to support me to create more free projects and free courses, then consider donating from the links (button) below. 

PayPal[button_primary] Buy Me a Coffee ☕️[button_warning] Patreon[button_dark]

Recommended Resources for Better Website Design

Once you learn technologies to design a website like HTML, CSS, JavaScript and Bootstrap, you also need to learn these topics to make a high paying website.

Because these topics will help you to make a website that meets your clients business goals.

So, here's the list I've prepared for you

1. Color Psychology
2. Design Principles
3. Strategic Web Design
4. Brand Identity Design

Check Other Web Design Courses & Projects [ Free ]

1. Complete Website Design Course with HTML & CSS [ Restaurant Project ]

2. Learn to Design Portfolio Website with HTML & CSS

3. Design House Rental System with HTML & CSS 

4. Agency Website Design Project

5. Travel and Tours Website Design Project