MERN Stack Frontend

Duration: 3 Months

STARTING FROM

15 Oct ,2022

Apply Now

Introduction:

MERN Stack (ES6+React) is a complete certificate that will cover all three tiers of technology namely the frontend, the backend, and the database required to make a full-stack web application. It is an introduction to the complete stack necessary to build a modern web app using MongoDB, Express, React, and Node.

Since the MERN stack requires prior knowledge of JavaScript, HTML, and CSS, therefore this certificate starts with a preliminary background in web design covering HTML, CSS, Bootstrap, JavaScript, DOM Model, ES6, React foundation, and Redux integration from the very basic to the advanced levels.

Scope of MERN Stack Frontend

By the end of the certificate, one will be equipped with all that is required to build a full-fledged web application. The student will gain the basics on how to build apps for social media, classrooms, media streaming, online marketplaces with real-time bidding, and web-based games with virtual reality features. They will understand how the different aspects of a MERN application come together through a series of practical projects. This certificate will enable them to develop and deploy robust real-world full-stack web apps which are dynamic.

Outcomes:

After the completion of this certificate, students would be able to comprehend the following:
  • Understand the basic concepts of web development
  • Generate ideas using best practices
  • Develop projects following industry standards
  • Understand and develop the Document Object Model (DOM) model
  • Present the projects developed by using best practices.

Curriculum:

Week Contents
1
  • HTML Basics
  • Explaining Tagging concept
  • List creation and display
  • Divs and Spans creation
  • Attributes and information display
  • HTML Intermediate
  • Table designing using ordered and unordered list
  • Actions based input tags
  • Labels and display fields
2
  • CSS Basics
  • use “ids” to target single elements
  • use “classes” to target groups of elements
  • use combinations of selector tags to target certain combinations of elements
  • CSS Intermediate
  • learning about Fonts
  • learning about Box Model
  • learning about font properties with CSS
  • learning about size
  • learning about weight
  • learning about text alignment
3
  • Bootstrap Basics
  • Framework concepts
  • Understanding Inversion of Control
  • Default Behavior of the Framework
  • Extensibility nature of Framework
  • Non-modifiable Framework Code
  • Bootstrap Intermediate
  • How to create Buttons
  • How to create Forms
  • How to create Navbars
  • How to create Grids
4
  • JavaScript Basics
  • Understanding concepts of Connecting JavaScript
  • Understanding concepts of Operators
  • Understanding concepts of Control Flow
  • Understanding concepts of While Loops
  • Understanding concepts of For Loops
  • JavaScript Intermediate
  • Understanding concepts of Functions
  • Understanding concepts of Arrays
  • Understanding concepts of Objects
  • Understanding concepts of For Loops
5
  • DOM Model Understanding
  • Understanding of methods document.getElementById()
  • Understanding of methods document.getElementByClassName()
  • Understanding of methods document.getElementsByTagName()
  • Understanding of methods document.querySelector()
  • Understanding of methods document.querySelectorAll()
  • DOM Model Application
  • Understanding of methods myvariable.style.color
  • Understanding of methods myvariable.textContent
  • Understanding of methods myvariable.innerHTML
  • Understanding of methods myvariable.getAttribute()
  • Understanding of methods myvariable.setAttribute()
6 Mid Term Exam
7
  • ES6 Basics
  • Understand concepts of Babel
  • Understand concepts of Let and const
  • Understand concepts of Creating variables
  • Understand concepts of Template and Strings
  • Understand concepts of Arrow Functions
  • Understand concepts of Rest and Spread Operators
  • Comparison of ES4 and ES5
  • Understand concepts of methods Array Function map()
  • Understand concepts of methods Array Function reduce()
  • Understand concepts of methods Array Function: filter()
  • Understand concepts of methods Array Function: find() and findIndex()
  • Understand concepts Classes in ES6
  • Understand concepts of Inheritance in ES6
  • Understand concepts Working with Promises
8
  • React Foundation
  • JavaScript framework for writing the web applications
  • Like AngularJS - Snappy response from running in the browser
  • Less opinionated: only specifies rendering view and handling user interactions
  • Uses Model-View-Controller pattern
  • View constructed from Components using pattern
  • Optional, but commonly used HTML templating
  • Minimal server-side support dictated
  • Focus on support for programming in the large and single-page applications
  • Modules, reusable components, testing, etc.
  • React Components
  • Understanding concepts of Component lifecycle and methods
  • Understanding concepts of Styling with React/JSX - lots of different ways
  • Understanding concepts of Iteration in JSX
  • Understanding concepts of Conditional render in JSX
  • Understanding concepts of Programming with JSX
9
  • Redux foundation
  • Understanding of Why use Redux?
  • Understanding of Three Principles of Redux
  • Understanding of Essential JavaScript Concepts
  • Understanding of Combining Reducers
  • Understanding of Integration with React and Asynchronous Operations
10 Final Term Project Presentation
11 Final Term Paper

Benefits:

  • It allows you to switch between frontend and backend improvements depending on requirements.
  • You will strengthen your CSS, SQL, JavaScript & HTML knowledge.
  • Get highly paid jobs at large companies.
  • It allows you to deploy applications on both cloud and premise infrastructures.

Requirements:

Students should have foundation knowledge of the following:

  • Programming Fundamentals
  • Data Structures
  • DataBase
  • Object-Oriented Programming (OOP) Concepts

Mode of Classes:

Classes Mode City

On Campus

Lahore

Online

-