Module 1: Web Development Essentials
8 Lectures (16 Hours & 4 Weeks) , 4 Coding Challenges , 6 Tasks
Do you aware that the web page is the only part of a web application with which the user interacts directly? If you, do it incorrectly, the server-side becomes useless to the user! The modern user expects a lot from a web page: it must load quickly, provide the needed service, and be easy to read on a variety of devices, including desktop computers, tablets, and mobile phones.
Introduction to HTML5
- We’ll master the fundamentals of HTML5 in this module. We’ll start with how-to videos on setting up your development environment, then go over HTML5 fundamentals including proper document structure, which elements can be placed inside other elements and which cannot, the meaning and utility of HTML5 semantic tags, and key HTML5 tags.
Introduction to CSS3
- CSS is used by a lot of individuals to “tinker” with their websites. We’ll cover everything from the fundamentals of CSS3 to more complex concepts like floating and CSS rule conflict resolution in this section. We’ll go through things like the ‘box model,’ the background property, and so on. We’ll end the subject by learning about Responsive Design.
Coding the Static Site
- Are you ready to have a good time? This is the module for you! When managing a web site project, we’ll go over the fundamentals of interacting with clients. We’ll spend the rest of the module creating a real web site from scratch for this company, and you’ll get to sit next to me and witness the process unfold.
Module 2: Frontend Development
8 Lectures (16 Hours & 4 Weeks), 4 Assignments
In this Module you’ll learn how to make a Single Page Application. You will work with ReactJS, TypeScript, JS, Redux, React Hooks, Tailwind CSS. When you’re through, you’ll have a fully functional Mobile-Friendly Offline-Capable app with a code base that’s clean, readable, and performant. You’ll study best practices while also seeing how to construct a whole application piece by piece!
Introduction to TypeScript
Introduction to React
The Magical Tailwind CSS
- Tailwind CSS is a utility-first CSS framework that allows you to quickly create bespoke user interfaces. It’s a highly configurable, low-level CSS framework that offers you all the building blocks you need to create personalized designs without having to fight to override irritating opinionated styles. The beauty of tailwind is that it doesn’t enforce design specifications or how your site should look; instead, you simply combine small components to create a unique user interface. Tailwind just takes a ‘raw’ CSS file, processes it over a configuration file, and outputs it.
Why Tailwind CSS?
- Faster UI building process
- It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach.
Advantages of Tailwind CSS
- No more silly names for CSS classes and Id’s.
- Minimum lines of Code in CSS file.
- We can customize the designs to make the components.
- Makes the website responsive.
- Makes the changes in the desired manner.
- CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS, we can use utility classes and make local changes.
Module 3: Backend Development
8 Lectures (16 Hours & 4 Weeks), 7 Assignments
This Module covers the basics of setting up your Next.js app and configuring it for Redux, MongoDB,
NodeJS and ExpressJs from there we will go over some implementations of these
key features, the aim is to give you a solid understanding of what can be
accomplished and how you can accomplish it! We will also take into account some
best practices when it comes to file structuring
Introduction to Next JS
- Next.js is a React framework that includes a page-based routing system, server-side rendering, static optimization with data-fetching, automatic code splitting, client-side routing with page prefetching, built-in CSS (and SASS) support, and API routes for constructing React apps. React, webpack, and babel are all used in Next.js. It’s a fantastic tool for building online applications, and it’s well-known for server-side rendering. Zeit is the creator of Next.js. While react is fantastic, Next.js goes a step further with its Server-Side Rendering functionality, which improves SEO. Next.js is a popular React framework that is presently used in over 110,000 GitHub repositories.
Introduction to Node JS
- Express is the most popular Node web framework, and is the underlying library for a number of other popular Node web frameworks. It provides mechanisms to: Write handlers for requests with different HTTP verbs at different URL paths (routes).
- Integrate with “view” rendering engines in order to generate responses by inserting data into templates.
- Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response.
- Add additional request processing “middleware” at any point within the request handling pipeline.
- MongoDB is a document oriented NoSQL database for storing large amounts of data. MongoDB uses collections and documents instead of tables and rows, as in traditional relational databases. Documents are made up of key value pairs, which are MongoDB’s basic data unit. Collections are the equivalent of relational database tables in that they include sets of documents and functions.
- Each database contains collections which in turn contains documents. Each document can be different with a varying number of fields. The size and content of each document can be different from each other.
- The document structure is more in line with how developers construct their classes and objects in their respective programming languages. Developers will often say that their classes are not rows and columns but have a clear structure with key-value pairs.
- There is no need to establish a schema for the rows (or documents as they are known in MongoDB). Fields can be built on the fly instead.
- MongoDB’s data schema makes it easier to represent hierarchical connections, store arrays, and store other more complicated structures.
- Scalability – MongoDB environments have a lot of scalability. Companies all across the world have defined clusters, with some running 100 or more nodes and millions of documents in the database.
Auth Module for Our App
The purpose of this part is to introduce you to web application development using Node.JS and Express. MongoDB is used to store the data in the database. The emphasis of the part is on security and permission. Here’s a rundown of some of the most important topics:
- Use Registration
APIs for Frontend App
We will build powerful, scalable RESTful APIs using latest technologies for our App.
Module 4: Integration
8 Lectures (16 Hours & 4 Weeks)
This module is exclude from the regular training, can be joined on special request (would be charge separate)
This Module covers the integration of our Restful APIs that we have build previously. Now, we will implement them on our App and we will also learn GraphQL in this Module. When we are done implementing GraphQL and APIs integration into our app will do software testing and in the end of the course will have project review where we will check candidates project build by them.