Web Design and Development using Laravel and Vue

Web Design and Development using Laravel and Vue

In this web development course, you will learn HTML, CSS, Bootstrap, JavaScript, JQuery, PHP, OOP, Laravel and Vue JS to help you launch your career as a full stack developer.

course at a glance

  • Date : 18 May - 10 Aug 2021
  • No. of Classes/ Sessions : 30
  • Total Hours : 90
  • Last Date of Registration : 17 May 2021
  • Class Schedule :
    • Sunday - 6:00 PM - 9:00 PM
    • Tuesday - 6:00 PM - 9:00 PM
    • Thursday - 6:00 PM - 9:00 PM
  • venue : PencilBox Training Institute Lab EDB Trade Center (5th Floor), 93 Kazi Nazrul Islam Avenue, Kawranbazar, Dhaka- 1215

Price: TK. 20,000
(Excluding VAT & TAX)
Early Bird Registration Going on Valid Until 17th May, 2021 Taka 18000


This training is jointly organized by BITM & PencilBox Training Institute,
A Training wing of bitBirds Solutions.

Training will be held in PencilBox Training Institute Premises.

Course Outline Description:

  1. HTML Review
  • HTML Tags, Attributes,
  • Elements, Comments,
  • Head, Body, Section,
  • Div, Header,
  • Footer,
  • Page Title,
  • Headings,
  • Paragraphs,
  • Hyperlinks,
  • Lists,
  • Images,
  • Tables & Form Making

 

  1. CSS Rehash - 1
  • Types of Style Sheets,
  • CSS Selectors,
  • Properties, Values,
  • Backgrounds, Colors,
  • Text Styling & Formatting,
  • Borders, Margins, Paddings
  • Outlines

 

  1. CSS Rehash - 2
  • Pixels, Percentages, Points, Em,
  • Block & Inline Elements,
  • Float & Clear,
  • CSS Positioning,
  • Text Effects,
  • ID & Class Selectors,
  • Layers,
  • Pseudo Classes, Pseudo Elements,
  • Media Types,
  • Layouts

 

  1. JQuery Review
  • About jQuery
  • Syntax, Selectors,
  • Attributes,
  • Traversing,
  • CSS,
  • Events,
  • Making jQuery Scroll top with animation.

 

  1. Bootstrap Recap - 1
  • What is Bootstrap
  • How to use it
  • Bootstrap Grid system,
  • Typography,
  • Tables,
  • Breadcrumbs,
  • Pagination,
  • Labels,
  • Badges, Alerts

 

  1. Bootstrap Recap - 2
  • Forms,
  • Bootstrap Navs, Navbar,
  • Bootstrap Display,
  • Flex,
  • Float,
  • Shadow,
  • sizing,
  • spacing,
  • vertical Align
  • Starting to make a Personal Portfolio webpage
  • Bootstrap Basic Template
  1. Setup Development Environment & PHP Basics:
  • Understanding server side technology.
  • PHP history.
  • PHP development environment.
  • PHP Basic Syntax.
  • PHP Variable & Data Type.
  • PHP Operator
  • PHP Statement

 

  1. PHP Fundamentals and OOP Introduction:
  • PHP Array
  • PHP Function
  • Built in Array and Function.
  • PHP super global variable.
  • Understanding the concept of OOP
  • Introduce to Class, Object
  • Introduce to Property
  • Introduce to Method.

 

  1. PHP OOP Advanced and Practices:
  • Understanding the concept of Encapsulation, Inheritance
  • Basic Practices with OOP
  • Introduction to Namespace.
  • Introduce to magic method.
  • Introduce to Composer.
  • Introduce to Autoload.

 

  1. Introduction to MySQL:
  • Introduce to Database and MySQL Database Server.
  • Create database, table inside the Database Server.
  • Introduction to Structured Query Language (SQL).
  • Perform action through SQL inside Database Server.
  • Introduction to CRUD operation.
  • Data Save into the database server.
  • Data Retrieve form the Database Server.

 

  1. CRUD and Login Concept:
  • Data edit & update.
  • Data Delete.
  • Understand the Session
  • Understand the Login Concept.
  • Create secure Login Panel.

 

  1. Introduction to Laravel 8:
  • Understanding the concept of framework.
  • History of PHP framework.
  • Introduce to MVC
  • Why Laravel.
  • Laravel 8 installation.
  • Project folder structure.
  • Route Introduction & Route Naming.
  • Request Lifecycle.
  • Resource view route.

 

  1. Controller, Blade template:
  • Data passing process without controller.
  • Artisan command & Create Controller Class.
  • Data passing process with controller.
  • Introduce to Blade Template Engine.
  • Introduce to directive Blade Template Engine.
  • Laravel Blade Templating.
  • Template Mastering.

 

  1. Authentication:
  • Authentication Starter Kits (Breeze, Jetstream)
  • User registration, Login
  • Introduce to Migration, Schema, and Blueprint.
  • Create migration file.
  • Prepare migration file for creating table.

 

  1. CRUD with Laravel:
  • Introduce to Quire builder & Eloquent ORM in Laravel.
  • Create Model Class with migration file.
  • Data insert in the database through Quire builder & Eloquent ORM.
  • Data Retrieve from database through Query Builder & Eloquent ORM.
  • Data Edit & Update through Eloquent ORM & Query Builder.
  • Data Delete through Eloquent ORM & Query Builder.

 

  1. Laravel Project – Ecommerce 1
  • Discuss about SDLC.
  • Understanding Ecommerce Website
  • Database Configuration.
  • Add Admin Panel
  • Admin Panel Customization
  • Working with category
  • Introduce to Factory, Faker & Seeding

 

  1. Laravel Project – Ecommerce 2
  • Working with Product
  • Multiple image save
  • Intervention Image
  • Form validation
  • Database relationships: One to one, One to many

 

  1. Laravel Project – Ecommerce 3
  • Setting up front-end
  • Display products on home page
  • Category wise products
  • Single product

 

  1. Laravel Project – Ecommerce 4
  • Add to cart
  • Cart calculation
  • Checkout
  • User sign in/ register
  • Email Sending

 

  1. Laravel Project – Ecommerce 5
  • Shipping
  • Payment method
  • Confirm Order
  • Order management

 

  1. Laravel Project – Ecommerce 6
  • Introduction to Middleware
  • Create user from admin panel
  • Create user roles
  • Role wise view and action
  • Profile page setup
  • RESTful API Development

 

  1. Introduction to Vue JS
  • Js Framework
  • What is Vue Js
  • Vue Syntax
  • Vue Condition
  • Vue v-for, v-model
  • Vue Practices

 

  1. Laravel and Vue Js Project – Blog 1
  • Laravel and Vue Js Mix Routing
  • Install Vue Router
  • How to use Vue Component
  • Create component with Vue Routing.

 

  1. Laravel and Vue Js Project – Blog 2
  • Category List Page Design with Vue.
  • Add Category page design using Vue component.
  • Validate form and save data using axios
  • V-form with ajax request
  • How to add sweet alert

 

  1. Laravel and Vue Js Project – Blog 3
  • How to setup vuex in laravel project
  • Category list display using vuex
  • Install Moment Js with Vue Filter
  • Delete Category using Laravel Vue Js
  • Edit Category using Laravel Vue Js
  • Delete category using checkbox

 

  1. Laravel and Vue Js Project – Blog 4
  • Category List Update
  • Post List Design
  • Display post list using laravel vuex
  • Display post filter using laravel vuex

 

  1. Laravel and Vue Js Project – Blog 5
  • Add new post design
  • How to add mark down editor
  • How to save post
  • How to delete post with image
  • How to edit post
  • How to update post

 

  1. Laravel and Vue Js Project – Blog 6
  • How to use vue component in home page
  • Frontend vue routing
  • How to load sidebar and display post

 

  1. Laravel and Vue Js Project – Blog 7
  • How to display single post using vue router
  • How to display category with latest post
  • How to display category with post

 

  1. Laravel and Vue Js Project – Blog 8
  • How to implement real time search
  • Real time search using debounce function
  • Real time Comment
  • Ending course and discussion

Curriculum

Course Module 90 Hrs