강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

Vue-Django-Bootstrap Quick Blog

You can create a simple yet beautiful blog using the popular trio (Vue + Django + Bootstrap). It is responsive and can be viewed on smartphones as well.

(4.8) 12 reviews

295 learners

Level Basic

Course period Unlimited

  • bestdjango
Vue.js
Vue.js
Django
Django
Bootstrap
Bootstrap
Vue.js
Vue.js
Django
Django
Bootstrap
Bootstrap

Reviews from Early Learners

Reviews from Early Learners

4.8

5.0

때구니

100% enrolled

It was a great lecture to see how to use Bootstrap, Django templates, and VUE.JS effectively. Thank you.

5.0

mo app

96% enrolled

This is a must-see lecture for developing django and vuejs together. You can learn a lot from the high-quality development examples and lectures.

5.0

호타물

100% enrolled

Great lecture. I learned a lot about class-based views (CBV). I think it will be very helpful when I use DRF later.

What you will gain after the course

  • Python Web Programming with Django

  • Using Vue.js instead of jQuery

  • Using Bootstrap Free Themes/Templates

My own blog, made in a jiffy with my own hands 🏠
Vue + Django + Bootstrap Web Development!

Move categories, leave comments, and implement pagination yourself.

You can also implement a scrollspy UI where the menu changes depending on the scroll.

Easy and fast
Awesome web development
?

In web programming, UIs are becoming more and more fancy.
That's why any beginner would wonder, 'Can't I make a cool website too?'

Let me tell you my answer to this question.
This is possible with Vue.js + Django + Bootstrap .

  • First , we do web programming by linking Vue and Django.
  • Second , for UI, we use themes supported by Bootstrap.

All three of these are popular frameworks that many people use and say are easy to use.
In this lecture, we will learn the principles and core technologies of web development that link the front-end and back-end while creating a wonderful blog web page. Let's take a look together.


To these people
I recommend it.

Please check your player knowledge!

  • This course is intended for those who have basic knowledge of Vue.js and Django.

Easy and fast
Great web programming
Anyone who wants to do it

Already made
Using the theme
Anyone who wants to create a great UI

Technology trend
Frontend/Backend
Anyone who wants to connect

Are you having these concerns?

  • This course is for those who know the basic functions of Django and Vue.js.

I can make a tutorial, but
There are times when you get stuck when you do it yourself.

I can do simple web programming, but
I don't like the UI .

I know how to use Django, but I don't know how to use the front-end.
I want to use Vue.js, a cutting-edge technology.

I know how to use Vue.js, but I don't know how to use it as a server technology.
I want to use Django .

  • I'm using Django, but I keep getting errors and getting stuck.
    👉 Django has many features and functions that make developers more comfortable, but you need to understand those functions well to deal with errors. To do this, we will teach you how to read the Django documentation and explain the main contents in detail.
  • I want to create a better UI than what we have now.
    👉 Everyone wants a great UI, but it is a field that requires front-end technology and design sense, so separate study is required. This lecture will teach you how to use a pre-made Bootstrap theme. It is a great UI created by experts, but it is also a good method that beginners can use.
  • I want to create Async/Interactive features such as likes/word recommendations.
    👉 Async/Interactive features are almost essential in web programs. If you used to code with jQuery, this course uses Vue.js. This is because Vue can replace all the features of jQuery and is the latest technology with improved performance.
  • I want to create a web program that works on smartphones as well.
    👉 The Start Bootstrap template used in this course supports responsive behavior by default. So, you will create a web page that works on both PCs and smartphones without any separate coding.

Why this course is special
I would like to inform you.

After taking this lecture!

  • You can learn how to use axios/JsonResponse to integrate Vue-Django.
  • Functions that were created with jQuery can now be created with the latest technology, Vue.
  • You can use Start Bootstrap themes/templates yourself.
  • You can clearly see that Django's class-based views have many advantages.

This is a web development learning course that takes applications into consideration.

Beyond simply saying 'web programs run' and 'you can code', I tried to convey the operating principles or background knowledge of Django. That way, even if you learn one thing, you can apply and expand it to ten things.

Also, although the main content is geared towards beginner-level functions, the course is structured to include intermediate functions such as ▲Pagination ▲Data transfer with JS ▲prefetch-related, etc. so that you can advance a little further.

Finally, I tried to help you understand by writing important content in PPT and explaining it in a video. I provide the source code and materials used in the lecture.

This is the advantage of this lecture compared to the usual Single Page Application linking method.

  • Vue-Django integration without having to use VueRouter/Vuex/DRF.
  • It is a Vue-Django integration method, but it uses Django's Admin function as is.
  • Django can be used not only as an API server, but also for template processing.
  • If needed, you can reuse Django's authentication functionality as is.

Django Rest Framework is great, but what if it gets blocked often?

  • DRF may seem easy at first, but it is often difficult to apply.
  • This may be because you are not familiar with DRF's serialization, class inheritance, and overriding.
  • I recommend that you learn the basic techniques through this course and then use DRF when necessary.
  • This is because the basic technology of DRF is class-based view (CBV).

In the following order
I am learning.

Using Start Bootstrap theme

Learn how to download and use Bootstrap's themes and templates, and modify themes in Django.

Developing a Blog App with Django

Learn how to create the basic structure of a blog app with Django.

Vue-Django API Development

Learn the benefits of integrating Vue.js with Django and design an API.

Various extension functions

Learn about various extensions such as pagination, data passing with JS, CSRF token function, etc.

DB Query Performance Improvement

Improve queries to improve database performance.

View on smartphone

Learn responsive web technologies so that your screen can be viewed appropriately on mobile devices such as smartphones and tablets as well as desktops.


Frequently Asked Questions
Check it out.

Q. I am new to Python-Django. Will I be able to follow the lecture?

You will need to have experience with web programming using Django. After that, you will add Vue and create a program using the upgraded Vue-Django integration method, similar to this lecture.

Q. Do I have to use Views? Can't I do web programming with just Django?

Of course, it is possible with just Django. However, if you use views, the UI will be upgraded. It is much more efficient to handle UI on the client side than on the server side. In this lecture, we are using it at the level of jQuery, and if you study more after finishing the lecture, you will be able to implement advanced UI features such as animation.

Q. Can I use React instead of Vue?

It is possible. The integration and Django side codes are the same. You just need to change the view code to React.

Both Vue and React are good frameworks, so you can choose the one that best suits your situation. However, if you are using an existing HTML file like in this lecture, keep in mind that Vue is much more advantageous than React.

Q. They say it's easy, but what makes it easy?

When integrating View-Django, in many cases, Vue Router, Vuex, DRF, etc. are used. You don't have to use these three. That means less learning.

Additionally, it utilizes Bootstrap themes available on the Internet, so you can create a UI quickly, easily, and beautifully.

Q. How is it different from the knowledge sharer’s other lectures?

The difficulty level is somewhere between the basic and practical parts of my Inflearn lecture (Vue-Django integration).

Compared to the actual version, the blog app is the same, but the asynchronous like function and comment form processing have been added, and the pagination function is coded directly.

The biggest difference is that we use Bootstrap instead of Vuetify, and you get to use a variety of themes yourself, especially by learning how to use the pre-made Start Bootstrap template.


Knowledge sharer's
Are you curious about other lectures?

Recommended for
these people

Who is this course right for?

  • If you want to do easy, fast, and cool web programming

  • If you want to create a great UI using a theme that has already been created

  • If you want to know how to connect Front/Backend, a technology trend

Need to know before starting?

  • Django tutorial and class-based views require coding experience.

  • You should know the basic directives of Vue.js (v-for, v-if, etc.).

Hello
This is

2,104

Learners

154

Reviews

224

Answers

4.6

Rating

5

Courses

Program development began with the C language, moved through Java, and recently has primarily utilized Python.
Participating in the backend server development project for KT ucloud services, I developed a meta-information processing engine for customer folders/files using Java and a client push service using Python.

Additionally, I have developed speed measurement programs for KT internet lines, operation management programs for network equipment, and programs for analyzing massive amounts of traffic data. Personally, I have fallen deeply in love with the charm of Python and enjoy coding in Python whenever possible.

As part of that effort, I am currently expanding the utility of Python by developing projects such as web programming using Django, JSON integration using Django Rest Framework, data analysis using Pandas, and AI solution development using Scikit-learn/Tensorflow/ChatGPT.

< Publications >

1. Python Web Programming with Django (1st Edition, Hanbit Media, April 2015)
2. Python Web Programming Using Django - Practical Edition (1st Edition, Hanbit Media, July 2016)
3. Python Web Programming with Django (Revised Edition, Hanbit Media, August 2018)
4. Python Web Programming Using Django - Practical Edition (Revised Edition, Hanbit Media, November 2019)
5. Python Web Programming with Django (3rd Edition, Hanbit Media, November 2022)

< Video Lectures >

1. Vue.js - Django Integrated Web Programming (Inflearn Video, April 2019)
2. Vue.js - Django Integrated Web Programming - Practical Edition (Inflearn Video, September 2020)
3. Build a Blog Quickly with Vue - Django - Bootstrap (Inflearn Video, September 2021)
4. Django REST framework Core Essentials (Inflearn Video, February 2022)
5. AI Web Programming (Inflearn Video, February 2024)

Curriculum

All

50 lectures ∙ (5hr 44min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

12 reviews

4.8

12 reviews

  • dcloyal10737님의 프로필 이미지
    dcloyal10737

    Reviews 30

    Average Rating 5.0

    5

    100% enrolled

    • taegeunkim2252님의 프로필 이미지
      taegeunkim2252

      Reviews 25

      Average Rating 5.0

      5

      100% enrolled

      It was a great lecture to see how to use Bootstrap, Django templates, and VUE.JS effectively. Thank you.

      • moapp20200336님의 프로필 이미지
        moapp20200336

        Reviews 14

        Average Rating 5.0

        5

        96% enrolled

        This is a must-see lecture for developing django and vuejs together. You can learn a lot from the high-quality development examples and lectures.

        • hyeok53374629님의 프로필 이미지
          hyeok53374629

          Reviews 1

          Average Rating 5.0

          5

          100% enrolled

          Great lecture. I learned a lot about class-based views (CBV). I think it will be very helpful when I use DRF later.

          • hyunho388168님의 프로필 이미지
            hyunho388168

            Reviews 1

            Average Rating 5.0

            5

            100% enrolled

            Thank you for the great lecture.

            $26.40

            bestdjango's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!