Bootstrap 5 - Creating a Web Project from Scratch

Anyone can create a website!
Web project created with Bootstrap 5

The lecture
Before you start

Bootstrap?

Bootstrap is a kind of framework library that provides a standardized interface by integrating HTML, CSS, and Javascript, which are the components of a website, into one on the front-end.
Bootstrap allows anyone to quickly and easily build a website . Without Bootstrap, web developers would have to create HTML, CSS, and JavaScript separately and then integrate them. However, the Bootstrap framework distributes these codes (classes, components, etc.) in a consistent format, allowing us to build websites more easily.

Why should I learn Bootstrap?

Bootstrap allows beginners to create decent websites with basic HTML and CSS knowledge .
If you're new to web coding, learning HTML and CSS, and then actually doing front-end HTML code, you may have experienced a sense of daunting. Bootstrap can help you achieve this with powerful and efficient web coding.
Additionally, since Bootstrap is a library that was first developed when Twitter was first developed for mobile, it has the advantage of being displayed responsively on mobile devices and tablets.

Why should I learn from this course?

This course focuses on the structure and content of Bootstrap . Individual components will be coded comprehensively and repeatedly while building real-world projects. By building several real-world projects from start to finish, your web coding skills will advance by leaps and bounds, laying a solid foundation for advanced web development, including JavaScript and backend development.
In short, this course is designed and created to help you quickly learn the introductory or beginner level of web development.

Bootstrap 5
Creating a Web Project from Scratch

When will I ever finish the website?

As you get started with web development, you'll likely encounter the following step-by-step dilemma:

1. I wanted to build a website and homepage, so I studied HTML on Google and YouTube. However, it only ended up displaying information about the content. Creating a great website is not easy!
2. So I started learning CSS to give my website a nice design. But aside from things like changing font size and color, I couldn't understand anything!
3. I want to create more dynamic text and image changes on the web, like slides, scrolls, drop-downs, and pop-ups. But to do this, I need to learn JavaScript!
4. Do I need to learn HTML, CSS, and Javascript to create a website? Then, when will I ever finish it?

Even after learning web development, the worries persist.

Even if the above concerns are resolved, web development still presents countless questions and concerns. For example, instead of creating HTML files every time, can we create a basic design template and incorporate diverse content efficiently and cost-effectively? Is there a way to store and manage this content data? Is there a way to speed up the rendering of web pages? And so on. These and many other questions continue to arise.

But what if you learn bootstrap?

However, just as all learning and experience have stages, the first step toward full-stack web development, encompassing both the front-end and the back-end, is HTML and CSS. Therefore, a thorough understanding of HTML/CSS and the ability to utilize them freely are essential. Bootstrap can neatly resolve these initial concerns.
If you take the course “Bootstrap 5: Project Creation from the Basics”!

This lecture
Introducing

Web coding beginner

Beginner developer and html,
css, Javascript
Beginners who have learned web coding

I'm curious about Bootstrap 5

I know the basic usage, but
Classes, components, etc.
When you are curious about the application method

Can't you do it faster?

When developing a website
Front-end development
For those who want to finish quickly

How is it in practice?

In a practical project
How to apply bootstrap
Anyone curious

I recommend this to these people!

• Beginner developers who have just started web coding
• Someone who has learned HTML, CSS, and Javascript to some extent
• Those who want to study the basic class concepts and components of Bootstrap 5
• I know the basics of Bootstrap, but I want to modify and apply it.
• For those of you who are curious about how bootstrap is applied in real projects
• Anyone who wants to quickly learn front-end web development
• Those who want to learn the above knowledge compactly in a short period of time

After taking this lecture?

• You can learn the basics of web development such as HTML and CSS.
• You can quickly and easily create front-end web designs. You can create any type of web coding you want on the front-end, and utilize it for a variety of applications.
• After this, you will ultimately become a web development expert through in-depth learning such as building a CMS like WordPress or a server like NodeJS.

In this lecture
It has these characteristics

This is how it goes!

This course is broadly divided into two parts: the basics of Bootstrap 5 and project creation.

• Basics
  • You will learn about Bootstrap's Grid, Display, Box, Position, and Contents class concepts.
• Project
  • It consists of three parts in total.
  • The second project is more difficult than the first, and the third is more difficult than the second through slight customization.
  • Starting with the most basic concepts, you can repeatedly and step-by-step acquire the ability to code the website you want, through practical application and use.
• The code used in each lecture is provided as a file.

Introduction to the lecture content

1. Basics : Learn about Bootstrap 5 concepts and frequently used classes and components.
2. Project 1 : A one-page website created using only Bootstrap classes and components, with minimal CSS.
3. Project 2 : Build a multi-page website using Bootstrap classes and components, as well as custom CSS (SCSS) and JavaScript. You'll also learn how to code maps in JavaScript using the Kakao Map API.
4. Project 3 : You'll learn basic Bootstrap, as well as more advanced front-end web coding through SCSS and Javascript modularization. The map used in this project is coded using the Naver Map API.

Q&A
Expected questions

In this lecture
Knowledge sharers

Self-coding

• Front-End (WordPress) Developer
• Medipress website creation and training (freelance)
• Udemy Instructor