Front-end Design with React
If you are interested in this course, please click the below link to fill in the form, and we will get back to you.
Introduction
This is a fully hands-on course with a focus on a deep understanding of the concepts and principles underlying modern frontend development with the JavaScript programming language and React framework. React framework is one of the most widely used tech stacks across the globe. This course will teach you to code in a professional manner, following the industry best practices, standards, and norms. After the completion of this course, you will be proficient at developing highly scalable, accessible, and maintainable state-of-the-art user interfaces for web applications.
Course organization
| Topics | Hours |
| Introduction to HTML, CSS & JavaScript | 20 |
| In Depth Programming with JavaScript | 30 |
| Deep Dive into React | 36 |
| Total Hours | 86 |
Course Contents
Introduction to HTML, CSS & JavaScript
This unit covers the fundamental understanding of structuring elements of a web page with HTML, styling it using CSS with further understanding of how we can manipulate these elements using JavaScript.
Topics Covered
- Development Environment Setup
- HTML
- Tags: div, section, a, img etc. and its semantic uses.
- Best Practices with HTML
- CSS
- In-line styling
- External stylesheets
- CSS Selectors
- CSS Box Model
- Flexbox
- JavaScript
- Using on-page script tags
- Using external script tags
- Manipulating HTML elements
- Events & Listeners
- DOM Selector APIs
- Brief Intro to Functions
In Depth Programming with JavaScript
This unit covers the in-depth understanding of programming with JavaScript with its latest features.
Topics Covered
- JavaScript Variables
- Data Types
- Constants
- Type Conversions
- Hoisting
- Operators
- Conditionals
- Loops
- Functions
- Objects
- Duplication
- Pass by reference VS value
- Arrays
- Foreach
- For of
- For in
- Map
- Filter
- Reduce
- Duplication
- Built in APIs
- Date Time
- Set timeouts
- Window
- Navigator etc.
Deep Dive into React
This unit covers the process of developing state of the art web applications using React, handling business logics and using frameworks, tools & libraries to speed up the development process.
Topics Covered
- Introduction to React
- Virtual DOM
- Diffing
- Life cycle
- Environment Setup
- Node
- Npm & Yarn
- Create-react-app template
- Overview of project structure
- Component Patterns
- First Component
- Introduction to React Hooks
- State vs Props
- Reusable components
- Conditional Rendering
- React Router
- External APIs
- Rest API integration
- Context API
- Redux
- Frameworks & Tools
- Ant Design
- Tailwind CSS
- Lodash
- Github Co-pilot
Weekly Course Outline
Week 1 – Week 2
Introduction
Objective: To gain an overview of the course and setup environments for learning the basics of frontend web development.
| Topics | Hours |
| Introduction | 1 |
| IDE Setup & Walkthrough | 1 |
| Exploring HTML & CSS | 9 |
| DOM Manipulation With JS | 9 |
| Total Hours | 20 |
Week 3 – Week 6
JavaScript
Objective: To learn about all the aspects of programming with JavaScript and discuss its latest and evolving features.
| Topics | Hours |
| Variables | 4 |
| Operators | 2 |
| Conditionals & Loop | 4 |
| Functions | 6 |
| Objects & Arrays | 8 |
| Inbuilt Methods – DOM API | 6 |
| Total Hours | 30 |
Week 7 – Week 11
React
Objective: To gain the ability to develop state-of-the-art web applications using React, handling business logic and using frameworks, tools & libraries to speed up the development process.
| Topics | Hours |
| Introduction to React | 4 |
| Node installations & Project Setup with Create React App template. | 4 |
| Component patterns in React | 4 |
| State & Props | 4 |
| React Router | 4 |
| Fetching data from an external source (API) & Error Handling | 4 |
| State Management using Context APIs | 6 |
| State Management using Redux | 6 |
| Total Hours | 36 |
Week 12 – Week 20
Capstone Project
Objective: To build the front end of a web application from scratch following standard software engineering process, industry best practices within a specified timeframe in order to meet clients’ needs as best as possible.
Teams of students (4 to 5 students per team) will be given project scenarios, based on which each team will perform requirements engineering, system analysis, design, and implementation with proper unit tests and QA (Quality Assurance) tests following the Agile development process.
The final project should have the following attributes.
- Well-documented
- Sound design covering all responsive layouts on all devices
- Should use version control system
- Should use Dev/Test/Staging/Production pipeline
- Proper project management
Each team will be guided/supervised by highly experienced IT professionals, who will ensure that the design and code are up to the highest standards.
The soft skills such as writing skills, interpersonal skills, team skills, presentation skills will be reinforced in this module.
If you are interested in this course, please click the below link to fill in the form, and we will get back to you.