Django 4 - Build Portfolio Project with Bootstrap 5

Name: Django 4 - Build Portfolio Project with Bootstrap 5
Rating: 4.5 (19 reviews)

Learn Django 4 by Building a Portfolio project and Designing it with Bootstrap 5. Step by Step guide to Django 4.

Created byFatah Gabrial

Last updated 6/2024

English

English [Auto],

What you'll learn

You will build a complete portfolio website from scratch using Django 4 and Bootstrap 5, gaining practical experience and tangible results.
The course covers all essential aspects, including project setup, database management, front-end development, and customization of Django Admin.
Learn each concept and technique in well explained, clear and easy-to-follow manner, ensuring that you can grasp the material even if you're new to Django.
Real-world examples and exercises are provided throughout the course to reinforce your understanding and enable you to apply your skills to different scenarios.
You will learn how to seamlessly integrate Bootstrap 5 into your Django project, allowing you to create visually appealing and responsive portfolio pages.
Discover how to customize the Django Admin interface, making content management and project administration more efficient and user-friendly.
Learn how to create project models, perform database migrations, and effectively manage your project data within Django.
Utilize Django templates to render dynamic content and present your projects in an engaging manner on the front-end.
The course emphasizes techniques and strategies to optimize your portfolio website for search engines, improving its visibility and ranking in search results.
You will have a polished and professional portfolio website that showcases your projects effectively, leaving a lasting impression on clients and employers.
Gain access to supplementary materials, code examples, and support from the instructor and community to enhance your learning experience.
You'll be well-equipped to advance your career as a web developer or freelancer, as portfolios are a crucial asset in the industry.

Course content

5 sections • 31 lectures • 1h 25m total length

Introduction2:21
Build a Django 4 portfolio site with Bootstrap 5, enabling you to manage projects, customize profile pictures and names, add descriptions, and preview the site via the admin panel.
Using Exercise Files4:16
Details on how to use the Exercise files.
Skills & Tools Required1:34
Prepare by installing Biton, ensuring Python 3, and mastering HTML, CSS, and Bootstrap; use templates with a code editor like Visual Studio Code for Django 4 projects.
Install & Setup Django Project3:45
Set up a Django 4 project by creating and activating a virtual environment, installing Django, starting a project with django-admin startproject, and running the development server to view Django page.
Project Folder Structure1:05
Explore the default Django project structure, including the database file and manage.py, then open the project root to configure settings.py for media rules, location, installed apps, and routing.
Section 1: Quiz

Creating a New App in Django 31:54
Registering The Projects App1:00
Creating Home Page3:12
Create a Django homepage by adding a templates folder, a home.html with hello world, implement a home view returning render(request, 'home.html'), and map a URL to access the home page.
Creating About Page2:35
Create an about page in Django 4 portfolio project by adding an about.html template and view, wiring the URL, and organizing templates into a project folder to render at /about.
Section 2: Quiz

Creating Project Models4:12
Create a Django model named project with a title char field (max_length 250), a project_image image field uploading to the images folder, and a description text field.
Selecting Database for Django1:22
Django Migrations2:44
Learn how to create and apply django migrations after adding a new model, using makemigrations, show_migrations, and migrate, and verify 0001_initial is applied.
Creating Superuser for Django2:37
Adding Projects App to Django Admin2:06
Adding Projects to Database2:36
Add projects to the database using the admin panel, entering titles, text, and images with uploads sourced from the project images folder.
Setting Titles in Django Admin1:13
Improve Django admin by displaying the project title. Add a model method to return the title, update models.py, and enable filters in the admin.
Adding Filter in Django Admin2:01
Section 3: Quiz

Setting-up Views for Front-End2:08
Display Data with Django Templates3:32
Display all projects from the database using Django templates and a for loop to render data on the front end. Edit and add projects in admin, then refresh.
Integrating Bootstrap 5 in Django3:04
Customizing Bootstrap Template3:37
Customize a bootstrap-based portfolio by trimming the Booza template: remove header, extra cards, and photo, rename the title, and add a mailto contact button; prepare for dynamic database cards.
Add Static Images in Django4:31
Add a static image in Django by creating a static folder, configuring STATIC_URL and STATIC_ROOT in settings, and loading the image with Django's static helper.
Collect Static in Django1:54
Run the collectstatic command to gather all static assets from your Django apps into a single folder, including images, admin assets, and fonts, for template use.
Displaying Profile Image in Front-Page2:49
Adding Static CSS & JS Files3:11
Learn to add static css and js for a Django project by downloading Bootstrap 5, placing files in the static directory, and serving assets offline.
Showing Title in Cards from Database1:57
Displaying The Project Images3:39
Section 4: Quiz

Updating Veiws.py for Single Project4:02
Updating Urls.py for Single Project3:06
Update urls.py to add a detail route for a single project, linking the project id to the detail view, and ensure the detail template displays the project using Bootstrap styling.
Customizing Project Details Page4:12
Finishing The Project with Linking to Details Page2:47
Turn each project card into a clickable link that navigates to its detail page using the project id, wiring up the URL and dynamic routing.
Section 5: Quiz

Requirements

A solid understanding of Python programming is essential for learning Django. You should be familiar with Python concepts such as variables, data types, control structures (if statements, loops), functions, and object-oriented programming (classes, objects, inheritance).
Having a basic understanding of web development concepts like HTML, CSS, and HTTP will provide a strong foundation for learning Django. Knowledge of HTML markup, CSS styling, and the client-server model will help you understand how Django interacts with the web.
Familiarity with Bootstrap 5, a popular front-end framework, will be beneficial. Understanding Bootstrap's grid system, components, and utility classes will allow you to leverage its power to create responsive and visually appealing web pages.

Description

Hey guys, welcome to "Django 4 - Build Portfolio Project with Bootstrap 5 (2024)" – the ultimate course to unleash your web development potential! Are you ready to create a stunning portfolio project using Django 4 and Bootstrap 5? Join me on this exciting journey as we dive into the world of web development and transform your coding skills into a masterpiece.

In this hands-on course, we'll start by setting up Django 4 and organizing our project folder structure. With every step, you'll gain confidence as we dive into creating a new app and registering it in Django. From there, we'll build the foundation by crafting the captivating home page and informative about page, showcasing your unique style and creativity.

But that's just the beginning! We'll move on to creating project models and selecting the perfect database for our Django project. With Django migrations, you'll learn how to manage and evolve your database schema effortlessly. And let's not forget about the crucial superuser creation – you'll have complete control over your project.

Next, we'll enhance the administration of your projects by adding them to Django Admin. With titles and filters, you'll have a polished and intuitive interface to manage your projects effortlessly. But we won't stop there. It's time to shift our focus to the front-end and learn how to set up views, display data with Django templates, and seamlessly integrate Bootstrap 5 to create stunning and responsive web pages.

We'll add static images, collect them, and even display your profile image on the front page. With static CSS and JS files, you'll have the power to customize and tailor your project to perfection. Our cards will showcase project titles directly from the database, grabbing attention with elegance. And when it comes to displaying project images, we'll ensure they shine, leaving a lasting impression on your visitors.

But we won't stop until we've covered it all. We'll update views and URLs for single project display, customizing the project details page to captivate your audience. And finally, we'll finish the project with seamless navigation, linking it all together for a seamless user experience.

By the end of this course, you'll possess the skills and confidence to build a portfolio project that will impress potential clients and employers alike. So why wait? Enroll now and unlock the power of Django 4 and Bootstrap 5. Together, we'll dive in a thrilling web development journey that will shape your future success.

Let's bring your dreams to life – one line of code at a time!

Who this course is for:

Aspiring Web Developers: If you aspire to become a web developer and want to learn how to build a portfolio project using Django 4 and Bootstrap 5, this course is perfect for you.
Python Developers: If you're a Python developer looking to expand your skillset and venture into web development, this course is tailor-made for you.
Front-End Developers: If you have a background in front-end development and want to enhance your skills by adding back-end capabilities, this course will provide you with the necessary knowledge.
Django Beginners: If you're new to Django and want to learn it from scratch while working on a practical project, this course is an ideal starting point.
Web Development Enthusiasts: If you have a passion for web development and enjoy learning new technologies and frameworks, this course is a perfect fit.
Freelancers and Entrepreneurs: If you're a freelancer or entrepreneur who wants to develop your own web applications or offer web development services, this course will equip you with the necessary skills.

Django 4 - Build Portfolio Project with Bootstrap 5

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 13min

Setting up Projects App4 lectures • 9min

Django Databases8 lectures • 19min

Display Data on Front-End10 lectures • 30min

Display Single Project4 lectures • 14min

Requirements

Description

Who this course is for: