Become A Web Developer:‍ Html / Css /Javascript /Node / Etc

Build a Chat App with : (Node.js/Express.js/Socket.io/MongoDB) & Build Website and Web Apps with: HTML/CSS/JavaScript

What you'll learn

The basics of web development and how the internet works.

How to write well-structured HTML documents.

The use of different HTML tags and elements to structure a webpage.

The fundamentals of CSS for styling web pages.

How to use CSS selectors, properties, and values.

The concept of the CSS box model.

Basics of JavaScript programming language.

Fundamental concepts in JavaScript like variables, data types, arrays, loops, and functions.

How to handle events in JavaScript.

How to build a basic website using HTML, CSS, and JavaScript.

Fundamentals of MongoDB, a NoSQL database.

How to perform CRUD operations in MongoDB.

Basics of Nodejs and its event-driven architecture.

Fundamentals of Expressjs, a popular framework for Nodejs.

How to create a basic server using Node and Express

Understanding and using routes in Expressjs

How to connect MongoDB with Nodejs using Mongoose.

Real-time communication using Socket.o.

Build a real-time chat application using Nodejs, Expressjs, Socketio, and MongoDB.

How to deploy a full-stack web application.

Requirements

The prerequisites are minimal as the course is designed to accommodate beginners who are just getting started in the field of web development. However, there are a few recommendations to help you get the most out of this course:

Basic Computer Skills: You should be comfortable with basic computer skills such as creating folders, downloading and installing software, navigating the file system, etc.

Understanding of How to Use a Web Browser: You should know how to navigate the web, download files, and understand basic internet concepts.

Basic Understanding of Mathematics: You don't need advanced math, but having a basic understanding of concepts like addition, subtraction, multiplication, and division is helpful when learning programming.

Access to a Computer: You will need access to a computer (Windows, Mac, or Linux) to install required software and practice coding. The course involves a lot of hands-on learning.

Internet Connection: As the course is delivered online, you will need a stable internet connection to access the course material, download necessary software and resources, and do research when necessary.

Text Editor: You'll need a text editor to write your code. Some popular options include Visual Studio Code, Atom, and Sublime Text. Many of these are free to download and use.

Time and Dedication: Learning web development is a significant time investment. You should be prepared to dedicate time to watch the lectures, complete assignments, and practice coding on your own.

No Previous Coding Experience Required: This course assumes no previous coding or web development experience. It will start with the very basics and gradually move towards more complex concepts.

Curiosity and Willingness to Learn: Web development is a vast and ever-evolving field. Having a strong curiosity and a willingness to learn and explore new concepts will help you succeed in this course and in the field of web development.

Description

Welcome to "Become a Web Developer" – a comprehensive course designed to guide you through the process of creating interactive websites and web applications using a suite of modern technologies including HTML, CSS, JavaScript, Nodejs, Expressjs, Socketio, and MongoDB.This course is designed for learners who are passionate about diving into the world of web development, regardless of previous experience. We'll start with the basics and gradually move towards more complex concepts and projects.In the first few sections, we'll lay the groundwork by exploring what web development is, and how to write and understand code using HTML, CSS, and JavaScript - the three fundamental building blocks of the web. We'll build a sample website and engage in several beginner-friendly web projects like a calculator, quiz app, countdown timer, and todo app .These projects will allow you to consolidate your learning and see how HTML, CSS, and JavaScript work together to build functional, interactive websites.Next, we'll delve into back-end development with a focus on Node.js and Express.js. You'll understand the concepts behind server-side programming, creating RESTful APIs, and managing data with MongoDB, a popular NoSQL database.The course reaches its climax with an exciting project where you'll apply everything you've learned. You'll build a real-time chat application using Nodejs, Expressjs, Socketio, and MongoDB. This project will help you understand how all these technologies interact in a full-stack JavaScript environment.By the end of this course, you'll have a robust understanding of web development and a portfolio of projects to showcase your skills. You'll be equipped to build interactive websites and applications, setting you firmly on your path to becoming a proficient web developer. Whether you're looking to start a career in web development, or you're a professional looking to expand your skill set, this course will provide a solid foundation to help you reach your goals.Enroll now and start your web development journey!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What is Web Development

Lecture 3 Web Development Tools

Lecture 4 Note on text editors

Lecture 5 Installing Visual Studio Code

Lecture 6 Installing Web Browsers

Lecture 7 Http vs Https

Lecture 8 How the internet works

Section 2: Build a Frontend Web Application with : HTML/CSS/JavaScript

Lecture 9 Planning your web application project

Lecture 10 Designing your web application project

Lecture 11 Choosing assets for your project

Lecture 12 Creating project directory

Lecture 13 HTML

Lecture 14 Anatomy of an HTML Element

Lecture 15 Basic structure of an HTML Element

Lecture 16 Creating a basic structure of an HTML Element - Part 1

Lecture 17 Creating a basic structure of an HTML Element - Part 2

Lecture 18 Creating a basic structure of an HTML Element - Part 3

Lecture 19 HTML Attributes

Lecture 20 Marking Up Text

Lecture 21 Creating Links

Lecture 22 HTML Comments

Lecture 23 Viewing HTML Source Code

Lecture 24 What is CSS

Lecture 25 Ways to apply CSS

Lecture 26 Styling multiple properties

Lecture 27 Styling multiple elements

Lecture 28 Modifying CSS

Lecture 29 CSS basic selectors

Lecture 30 CSS Comments

Lecture 31 CSS Box Model

Lecture 32 CSS Margin and Padding Property

Lecture 33 Changing background color

Lecture 34 CSS border property

Lecture 35 CSS Positioning

Lecture 36 CSS display property

Lecture 37 CSS font property

Lecture 38 Using google fonts

Lecture 39 What is JavaScript

Lecture 40 Where to place JavaScript

Lecture 41 JavaScript Variables

Lecture 42 Variable Naming Convention

Lecture 43 JavaScript Arrays

Lecture 44 Data Types

Lecture 45 Mixing Data Types

Lecture 46 JavaScript Operators

Lecture 47 Arithmetic Operators

Lecture 48 Operator Precedence

Lecture 49 Comparison Operators

Lecture 50 Logical Operators

Lecture 51 JavaScript Conditional statements

Lecture 52 JavaScript Functions

Lecture 53 JavaScript Comments

Lecture 54 Linting Tools

Lecture 55 JavaScript Events

Lecture 56 Changing images on a webpage

Lecture 57 Fixing js lint warning - Part 1

Lecture 58 Fixing js lint warning - Part 2

Lecture 59 Adding welcome message to web page

Lecture 60 Project Code

Section 3: Build a web Calculator App using: HTML/CSS/JavaScript

Lecture 61 What we will create

Lecture 62 Creating project directory

Lecture 63 Building the calculator structure with HTML

Lecture 64 Styling the calculator with CSS

Lecture 65 Adding functionality with JavaScript

Lecture 66 Project Code

Section 4: Build a Todo List App using: HTML/CSS/JavaScript

Lecture 67 What we will create

Lecture 68 Creating project directory

Lecture 69 Creating the app structure with HTML

Lecture 70 Styling the app with CSS

Lecture 71 Adding functionality with JavaScript - Part 1

Lecture 72 Adding functionality with JavaScript - Part 2

Lecture 73 Project Code

Section 5: Build an Interactive Quiz using: HTML/CSS/JavaScript

Lecture 74 What we will create

Lecture 75 Creating project directory

Lecture 76 Creating app structure with HTML

Lecture 77 Styling the app with CSS

Lecture 78 Adding functionality with JavaScript - Part 1

Lecture 79 Adding functionality with JavaScript - Part 2

Lecture 80 Project Code

Section 6: Build a count down timer using: HTML/CSS/JavaScript

Lecture 81 What we will create

Lecture 82 Creating project directory

Lecture 83 Creating app structure with HTML

Lecture 84 Styling the app with CSS

Lecture 85 Adding functionality with JavaScript

Lecture 86 Project Code

Section 7: Introduction to MongoDB

Lecture 87 What is MongoDB

Lecture 88 Installing MongoDB on Windows

Lecture 89 Installing MongoDB on Macs

Lecture 90 Modifying environmental variables

Lecture 91 Creating a storage directory for MongoDB

Lecture 92 Starting and stopping MongoDB

Lecture 93 MongoDB Data Types

Lecture 94 MongoDB CRUD Operations

Lecture 95 Creating a database

Lecture 96 Inserting documents in MongoDB

Lecture 97 Querying a document in MongoDB

Lecture 98 Updating a document

Lecture 99 Deleting a document

Lecture 100 Dropping a database

Section 8: Introduction to Node.js

Lecture 101 What is Node.js

Lecture 102 Installing Node.js

Lecture 103 What is NPM

Lecture 104 Some NPM Commands

Lecture 105 Creating a basic Node.js application

Lecture 106 Components of a Node.js application

Lecture 107 Modules and packages

Lecture 108 Installing and using third-party packages

Section 9: Introduction to Express.js

Lecture 109 What is Express.js

Lecture 110 Installing Express.js

Lecture 111 Creating a basic Express.js application

Lecture 112 Express application generator

Lecture 113 Creating an app with Express generator

Lecture 114 What is package.json file

Lecture 115 Understanding apps.js

Lecture 116 Editing dependencies

Lecture 117 Using template engines

Lecture 118 How to start Node.js server

Lecture 119 How to stop Node.js server

Lecture 120 What is Routing

Lecture 121 How routing works

Lecture 122 Cloning routing functions

Section 10: Building a Chat App with :(Node.js/Express.js/Socket.io/MongoDB)

Lecture 123 What we will create

Lecture 124 Creating project folder and package json file

Lecture 125 Installing Express.js

Lecture 126 Installing Postman

Lecture 127 Serving static content with Express

Lecture 128 Using callback function

Lecture 129 Using arrow functions

Lecture 130 What is Bootstrap

Lecture 131 Creating user interface - Part 1

Lecture 132 Creating user interface - Part 2

Lecture 133 What is jQuery

Lecture 134 Adding jQuery

Lecture 135 Creating a get message service - part 1

Lecture 136 Creating a get message service - Part 2

Lecture 137 Creating a post messages service - Part 1

Lecture 138 Creating a post messages service - Part 2

Lecture 139 Sending post request

Lecture 140 What is Socket.io

Lecture 141 Installing Socket.io

Lecture 142 Setting Up Socket.io

Lecture 143 Emitting messages to client

Lecture 144 Note on MongoDB Setup

Lecture 145 MongoDB Cloud Setup

Lecture 146 MongoDB Cloud Setup - Updated

Lecture 147 Creating a new database

Lecture 148 Creating a database user

Lecture 149 Installing Mongoose

Lecture 150 Connecting to mlab

Lecture 151 Connecting to mlab Updated

Lecture 152 Saving data to MongoDB

Lecture 153 Replacing Message Array

Section 11: Deploying App to the Cloud

Lecture 154 What you need to do

Lecture 155 What is Git

Lecture 156 Installing Git

Lecture 157 Basic Git Configuration

Lecture 158 Retrieving Git Configurations

Lecture 159 What is Heroku

Lecture 160 Creating Heroku Account

Lecture 161 Installing Heroku-CLI

Lecture 162 Tracking your app with Git

Lecture 163 Deploying app to Heroku

Lecture 164 Checking Heroku Logs

Lecture 165 Project Code

Beginners to Programming: Individuals with no prior programming experience who are looking to dive into web development from scratch.,Front-End Developers: Developers who are proficient in front-end technologies like HTML, CSS, and JavaScript, and are looking to expand their knowledge into back-end development with Nodejs, Expressjs, and MongoDB.,Career Changers: Individuals considering a career change into the tech industry. Web development is a sought-after skill and this course can provide a comprehensive foundation.,Students and Lifelong Learners: Students studying computer science or related fields, or lifelong learners interested in understanding the inner workings of the web.,Students and Lifelong Learners: Students studying computer science or related fields, or lifelong learners interested in understanding the inner workings of the web.,Designers: Web or UI/UX designers looking to enhance their skill set by understanding how to bring their designs to life through coding.,Non-Technical Roles: People in non-technical roles such as project managers, quality analysts, etc. who work with technical teams and want to better understand web development in order to improve cross-functional communication and collaboration.