Full Stack Web Development Certification
Course Length: 120 hours
Full stack
web development is the process of developing an application, both frontend, and
backend, which makes it a fully developed application. The course is suitable for beginners with no prior experience in web
development or professionals already working in this space and who want to
enhance their knowledge and upgrade skills.
The course is pretty immersive
and covers HTML5, CSS3, JavaScript, Bootstrap 4, DOM Manipulation, NPM, Node,
MongoDB, REST, Express, ES6 and React.
Course Objectives
- Basics of HTML
- Version control and GIT
- CSS, layouts and Mobile Responsive Design
- Bootstrap Framework
- JavaScript
- API Backend development with Node and Express
- Databases
- Project – Full stack website development with React
Prerequisites:
Before
attending this course, it is recommended that students:
• Have basic computer navigation skills
• Prior programming experience is NOT necessary,
but it can help to put these topics in perspective
Training Course Contents
INTRO TO
WEB DEVELOPMENT/ COURSE INTRO
- What is web development?
- How websites work?
- Advantages of learning web development
- History of web development
- Course and Projects Overview
HTML –
PART 1
- What is HTML?
- Structure of Webpage
- HTML Tags
- Adding and formatting texts, title, paragraph, body
- Lists – Ordered/Unordered
- Images
- Forms
HTML –
PART 2 | CSS – PART 1
- Links
- Tables
- Iframes, Videos
- Anchor tags
- HTML Divs
- CSS Introduction
- Inline vs Internal vs External styling
- CSS Display
- Project 1 - To-do App – Frontend using basic HTML/CSS
CSS– PART
2 | ADVANCED CSS – PART 1
- CSS Backgrounds, Borders, Margins, Padding
- CSS Font Styling
- Stylings Lists
- Styling Tables, Forms
- Gradients
- Font Awesome
ADVANCED
CSS – PART 2
- Tool tips
- Buttons
- Transitions, Transformation, Animations
- Box sizing
- Flex
- Grid
- Project 1 - To-do App – Enhance Frontend using CSS
PROJECT
BUILDING
- Responsive Media Queries
- Discuss TO-DO App
- Project 2 - Blog – Add blog frontend using HTML/CSS
BOOTSTRAP
– PART 1
- Bootstrap containers
- Tables, Images, Colors
- Alerts, Buttons
- Spinners, Cards
BOOTSTRAP
– PART 2
- Pagination, Drop Down
- Carousel
- To-do App – Develop To-do App Frontend using Bootstrap
- GitHub Overview
JAVASCRIPT
– PART 1
- Introduction to JavaScript
- Variables, scoping, Data type
- Strings and Numbers
- Operators and loops
- Functions
- Project 1 – Add Functionalities to To-do App
JAVASCRIPT
– PART 2 (DATA STRUCTURES)
- Arrays
- Linked List
- Stacks
- Queues
- Maps
- Hashing
JAVASCRIPT
– PART 3
- Understanding and working with DOM
- Developer tools in Browsers
- JQuery
- Project 2 – Add Functionalities to Blog
- Prototypes
- Closures
- Local Storage
- Ajax
- Promises
- Project 3 – Dice Roller Game using Animation and JavaScript
JAVASCRIPT
– PART 5
- ES5 vs Es6 vs Es7
- Event loop in JavaScript
REACT –
PART 1
- React Intro
- Install node
- Create an app using create-react-app
- Understanding basics of react app
- Understanding JSX
- Understanding virtual DOMS, Single page apps
REACT –
PART 2
- React Lifecycle
- States
- Class components vs functions components
- Event handling
- Props
- Building a basic Forms using React
- Project 4 – Build Blog using React
REACT –
PART 3
- Routes
- Conditional Rendering
- Pure Components
- High Order components
- Controlled vs Uncontrolled components
REACT –
PART 4
- Redux
- Babel, webpack
- Add Redux in a Project and build using webpack
REACT – PART 5
- Creating a Mock API Server
- Axios
- Server-Side Rendering
- Project 4 - Fetch Data in Blog from an API
REACT.JS
– PART 6
- SASS Overview
- 20. NODE.JS – PART 1
- Simple Server
- Response Types – HTML, JSON
- Routing
- Express Intro
- Make a call from frontend to server
- Project 4 – Create API to fetch blogs from DB
NODE.JS –
PART 2
- Express Params and Query String
- Express Middleware
- API Authentication
- JWT token, Passport.js
- Project 4 – Add API Authentication to Blog App
NODE.JS –
PART 3
- Socket Programming
- Project 5 - Build Chat App
DATABASE
– PART 1
- SQL vs NO SQL
- MongoDB / DynamoDB overview
- Installing MongoDB
- Connecting and inserting data
- Upload / Modify Tests of Online Quiz System using DynamoDB
DATABASE
– PART 2
- Deleting and updating data
- CRUD
- Write functions to add/update a blog
CODE
REVIEW + DEPLOYMENT
- Tools for code review
- Standard coding conventions
- Firebase
- Deploy using Netlify
- Deploy using AWS Ec2
- Get code reviewed by Software developers and deploy projects
GOOGLE
ANALYTICS + WEBENGAGE
- GTM
- Google Analytics
- Facebook analytics
- Webengage
MAJOR
PROJECT ASSIGNMENT (4 WEEKS)
- Shopping App PRD sharing
- Online Assessment App PRD sharing
- Timeline Discussion (Every project in tech companies have timelines)
- Weekly progress discussions
