Full Stack Web Development with React and Django

Duration: 12 weeks
Instructor: Sagar Adhikari Sabbiu Shah
Fee: NRS. 25000

Full-Stack Web Development, is the most popular developer occupation today. It’s no wonder then that there are dozens of online and in-person programs that will help people become Full-Stack Developers and then even assist these new developers land high-paying programming jobs.

Objectives of this course:

Upon completing this course, students will:

  • Learn how to use HTML to create website content.
  • Use CSS to create beautifully styled sites.
  • Learn how to take advantage of Bootstrap to quickly style sites.
  • Be familiarized with Javascript framework.
  • Use Django as a backend for the websites.
  • Implement a basic Models-Views-Templates structure for your site.
  • Learn What is/Why  Django Rest Framework (DRF).
  • Create APIs using DRF.
  • Learn advanced concept of DRF.
  • Concept of New Age GraphQL.
  • Building flexible APIs using GraphQL.
  • Integrating DRF with GraphQL.
  • Be familiarized with latest trends in React.
  • Understand what problem React addresses.
  • Understand project structuring and configuration.
  • Configure form validation.
  • Learn best practices of using React.
  • Learn advanced concepts.

Prerequisites for this course:

It is preferable to have basic knowledge of HTML, CSS and Javascript although not complusory since the course starts with basics. Having a basic experience of building a website and working with API is a plus.

Course Content:

  1. Course Introduction
  2. Front End Introduction : What is web?
  3. HTML Basic
    • Introduction to HTML
    • Introduction to HTML Tags
    • Divs, Spans and Paragraphs
    • Images and Videos
    • Lists
    • Attributes
    • Assignment -I
  4. HTML Advanced
    • Tables
    • Forms
    • iFrames
    • HTML5 Concepts
    • Assignment -II
  5. CSS Basic
    • Introduction to CSS
    • Basic Styling
    • Assignment-III
  6. CSS Advanced
    • Advanced Styling
    • Flexbox Layout
    • Assignment -IV
  7. Bootstrap
    • Introduction
    • Basic Bootstrap Classes
    • Forms
    • Navbars
    • Grids
    • Assignment -V
  8. Javascript I
    • Introduction
    • Basics of JS
    • Operators
    • Control Flow
    • Loops
    • Assignment -VI
  9. Javascript II
    • Functions
    • Arrays
    • Classes and Objects
    • Event Handling
    • Ajax
    • Assignment - VII
  10. Document Object Model (DOM)
    • Introduction
    • DOM manipulation
    • Assignment - VIII
  11. Backend Introduction
  12. Python I
    • Introduction
    • Python Installation and setup
    • Numbers and Strings
    • List and Dictionaries
    • Tuples, Sets and Boolean
    • Comparison and Operators
    • Python Statements (If, For, While, etc)
    • Methods and Functions
  13. Python II
    • Object Oriented Programming
    • Errors and Exceptions
    • Modules and Packages
    • Decorators
    • Name and main
  14. Django Basics
    1. Django overview and Setup
    2. Django apps and projects
    3. Installing Django packages
    4. Project Structure
    5. Model and ORM
    6. Forms and Model Forms
    7. Form Validations
    8. Views
    9. Templates
    10. URL Mappings
    11. Static files and Media Files
  15. Django User Registration System
    1. Built in Users
    2. Customize User Model
    3. Email Confirmation
    4. Social Login with Facebook and Google
  16. Database
    1. Design
    2. SQL raw query
    3. Django ORM query
  17. Advanced Django
    1. Class Based Views (CRUD, Mixins, Permissions)
    2. Middleware
    3. Custom template tags
    4. Custom Decorators
    5. Django Debug Toolbar
    6. Custom Model Manager
    7. Customizing the django admin
    8. Django message framework
    9. Django contenttype framework
    10. Model Inheritance: Abstract Models, Multi-table model inheritance and Proxy models
  18. Django Rest Framework
    1. Overview
    2. Components
    3. Serializers
    4. Serializer validation
    5. Request and Response
    6. Views
    7. Urls
  19. DRF (Advance)
    1. Model Serializer
    2. Class Based Views
    3. Viewsets
    4. Router
    5. Authentication
    6. Permission
  20. Web Optimization
    1. Query Optimization
    2. Database Optimization
    3. Frontend Optimization
    4. Backend caching
    5. Frontend Caching
  21. Django GraphQL API
  22. Integrating DRF with GraphQL
  23. Introduction to React
    1. Current Scenario of React
    2. Environment Setup
    3. Overview of React
    4. Introducing JSX, Hello World!
    5. Overview of ES6
  24. Understanding React by building a Contact Directory Application [Project I]
    1. Project Setup
    2. React Components and Props
    3. State and Life cycle methods
    4. Event handling
    5. Handling Ajax Requests
  25. State Management by building a Todo Application [Project II]
    1. Introduction to Redux
    2. Structuring Project
    3. Reducers
    4. Connecting Redux to React
    5. Actions and Action Creators
    6. Middle-wares
  26. Navigation in React by building a Blog Application [Project III]
    1. Project Setup
    2. React Router Setup
  27. Form validation in Blog Application with formik
    1. Getting values in and out of form state
    2. Validation and error messages
    3. Handling Form Submission
  28. Testing in React
    1. Setting up Project for test
    2. Unit testing
  29. Advanced concepts
    1. Code Splitting
    2. Context
    3. Refs
    4. Higher Order Components
    5. Integrating other libraries
  30. GraphQL in React
    1. React-Apollo store Setup
    2. Query
    3. Mutation
  31. Understanding React Hooks by building a Slideshow Application [Project IV]
    1. Introduction to Hooks
    2. Using the State Hook
    3. Using the Effect Hook
  32. Conclusion and What's Next?