Module 1: Web Development Essentials
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
Node (or Node.js) is an
developers to create a variety of server-side tools and apps. The runtime is
designed to be used outside of a browser (i.e., running directly on a computer
or server OS). As a result, the environment drops support for browser-specific
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).
“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
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.