Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Complete Web Development: React 18, HTML, Vue.js, PHP, MySQL

React, HTML5, CSS3, JavaScript, jQuery, VueJS, AJAX, PHP, CLI, NPM, Babel, Webpack, MySQL, OOP, Node.js and Express.js

Created byOnlyKiosk Tech

Last updated 9/2024

English

What you'll learn

Develop the ability of solving problems by yourself
Master HTML, CSS, JS, and Vuejs
Create 12+ Front-end APPs using HTML, CSS, JS, jQuery and Vuejs
Create 12+ Back-end APPs using PHP and MySQL
Create responsive and retina-ready web pages
Operate MySQL database
Master advanced MySQL operation such as transaction, prepared statement, pagination, etc.
Create a memebership system
Master image-processing skills like CAPTCHA, thumbnail, watermark and image cropper
Master Command Line Instrument
Master NPM
Master Babel
Master Webpack
Being able to create modern front-end apps using single-file components
Master Vue
TCP/IP protocol suite
Data structure

Course content

104 sections • 620 lectures • 34h 13m total length

React Introduction12:28
Set up a React project, install dependencies, and run a dev server while exploring how React renders components, uses hooks like useState, and reuses elements for efficient updates.
First Component8:08
Event Handler and State Setter10:37
Master React useState by learning how to handle events without infinite rerenders. Use anonymous wrappers, batching, and functional updates to set new state safely.
JSX7:03
Explore GSX by turning HTML tags into components and using state to render a heading or image. Toggle elements by parity, manage arrays, and ensure unique keys for DOM order.
JSX Challenge8:20
Explore mapping an array to JSX list items with map, styling via the style attribute, and alternating colors. Learn to highlight items with state and to convert objects to lists.
Application: Creating a Clock8:17
Create a clock in React that shows the current hour, minute, and second, updating every second via useState and setTimeout, with a one-second gap and leading-zero formatting.
Application: Clock Challenge7:50
Toggle between 12-hour and 24-hour clock formats using a new empty state and two buttons. Learn to use setTimeout and clearTimeout to prevent infinite re-executions.

Bit and Byte3:33
Define bit and byte, show how 8 bits form a byte, and explain storage units and 1024 versus 1000. Describe unsigned and signed one-byte ranges and the sign bit.
Essential Encoding Knowledge4:11
Identify how bits and bytes store data, map numbers to characters with ASCII and Unicode, and compare UTF-8 and UTF-16, while noting national standards like GBK for multilingual display.
Memory Address, Pointer and Byte Addressing2:36
The Bit Width of Memory Address3:42
Learn how memory addresses use binary bit width to map bytes, from 4 to 64 bits, and how hexadecimal notation, prefixed with 0x, makes binary values easier to manage.

TCP/IP introduction and the four layers2:29
Learn how local area networks scale to the internet, and how the TCP/IP suite organizes four layers: link, internet, transport, application, for end-to-end data exchange.
The application layer and how COOKIE works6:56
Explore the application layer, http/https, and url structures, including dns mapping and the request-response flow. Understand get and post methods, status codes, and how cookies work, including cookie size limits.
The transport layer: three-way handshake3:38
Explore the transport layer's data delivery role and how a three-way handshake establishes client to server and server to client data channels, using syn, syn-ack, and established states.
The transport layer: four-way wave2:42
The transport layer: HTTP Keep-Alive vs. TCP keepalive0:58
Explore http keep-alive vs tcp keepalive to maximize transport efficiency by reusing the TCB connection for http messages, and understand health checks that send empty packets when no data traffic.
The internet layer4:10
Explore the internet layer by examining ip and mac addresses, how arp maps ips to macs, and ipv4 to ipv6 evolution with cidr and subnet masks.
Port and scoket3:18
The full process3:54
Trace the four-layer request journey, top-to-bottom and back, detailing PDUs, headers, and login data from application message creation to transport segmentation, IP routing, and link-layer framing.

The first line of your HTML code: version declaration3:19
What is version declaration?

How to read version declaration of XHTML?

How to declare and read version declaration of HTML 5?
Watch this lesson to find out.
HTML Rules and Grammars3:30
Browser has a high tolerance for bad HTML codes. But this does not mean you should write bad HTML codes. Watch this lesson to find out what kinds of rules you need to follow.
The four indispensable HTML tags1:13
<html>,<head>,<body>, and <title>

They are the four indispensable tags for every HTML file you create.
Create your first standard HTML file2:25
In this lesson, we will show you how to create a standard and decent HTML file.
Adding a Favicon5:09
Have you ever wondered what the small icon image is on the tab of your browser window?
Do you want to know how to create and install that icon image?
Watch this lesson to find out how.
Use META to achieve better SEO results2:28
META is the hidden hero that contributes to your web page in silence, behind the scene. Because of this, many people tend to overlook the importance of META.
In this lesson, we will show you the important role played by META in achieving good SEO results.
Use META for multilingual web pages2:18
If you are running a multi-lingual web page, META is particularly as it is what we use to set language encoding.
Use META for page behaviour control: auto page renewal, etc.1:08
META allows us to control the behaviour of web page, for example, we can set auto-renewal using it.

Front-end development for dynamic websites1:58
What it feels like developing front-end program for dynamic websites?
Page Structure Analysis2:22
Analyze page structure: header, footer, main area, etc.
How to display texts properly2:01
Text is one of the most important element in a web page. So it is imperative that you know how to handle texts properly. In this lesson, we will show you the basic rules you must follow when displaying texts.

CSS Introduction1:59
What is Cascading Style Sheet
Inline CSS: Part 13:26
What is inline CSS?

How to use STYLE attribute?

Basic structure of CSS property.
Inline CSS: Part 21:34
What is inline CSS?

How to use STYLE attribute?

Basic structure of CSS property.
Internal CSS and CSS Type Selector: Part 13:03
Internal CSS and type selector.
Internal CSS and CSS Type Selector: Part 22:22
Learn how the CSS type selector targets elements by tag name, applies color and bold styling, and why it can over-select compared with class selectors when styling multiple paragraphs.
Class and ID Selector-- More Accurate Control3:09
Class Selector and ID Selector: giving you a more accurate control
The Priority Order of CSS Selectors3:38
The priority order.
When ID, Class, and Type selectors are styling the same HTML element, whose order will be followed in the end?

SPAN and the concept of BLOCK and INLINE tags2:32
Learn a new tag: SPAN and the new tag belongs to a new category: inline.
The Difference between BLOCK and INLINE Tags PART 11:47
Discover and compare the difference between block and inline.
The Difference between BLOCK and INLINE Tags PART 23:10
Discover and compare the difference between block and inline.
The Difference between BLOCK and INLINE Tags PART 31:37
Discover and compare the difference between block and inline.
Initialising CSS: Getting Rid of Default CSS Styles2:41
Get rid of default CSS styles so that our own design will not be affected.
Miscellansous Issues about Styling Texts1:02
Set text font with the font family property and use web safe fonts, a 19-font set supported by all browsers. Avoid installing your own font files to reduce server load.
Use Your Own Font2:35
How to use your own font file in your web project
For Responsive Web Design: Using EM, Not Pixel3:33
EM: control all font size

Display Image: Part 12:24
How to display images and security measures you should take.
Image Display Part 21:41
How to display images and security measures you should take.
The INLINE-BLOCK Type1:33
The new category: inline-block.
Inline-block allows you to set its width and height but is also willing to share its line with others.
Things you should pay attention to when displaying images3:32
Choose the right image type (jpeg, png, gif) with 72 ppi, optimize width and height, and pre-size images in css to minimize load while preserving quality and layout stability.
Display ICON Part-13:02
Creating a window using DIV.
Fill this window with image using the background property.
This is how you display an icon.
Display ICON Part-21:25
Display ICON Part-32:05
Display ICON Part-41:42

Requirements

A smart phone with a decent camera is recommended for taking notes
A computer (PC/Mac) with internet access is needed
All software needed in the class is free of charge and easy to install and run
No previous coding experience needed

Description

What you will learn from this course:

React 18
HTML
CSS
JavaScript
Responsive Web Page
Ajax
jQuery
font awesome
Vue.js
animate.css
PHP
MySQL
Command Line
NPM
Babel
Webpack
ES6 Import and export
VueJS CLI
Vue.js single-file components
Vue Router
Advanced JavaScript: scope, scope chain, JavaScript Garbage Collection, Closure, IIFE(Instantly Invoked Function Expression), THIS, etc.
Express.js

All subjects are taught from ground zero. Therefore, no previous coding experience is needed.

Based on user feedback and tech development, we will keep adding new content to our course. For example, we just added content teaching Vue.js.

For better user experience, all course content is voiced by professional voice-over artists. Therefore, new content may be voiced by a different voice artist.

Why not learn from free YouTube videos, manuals, and online tech blogs?

Web development has been a popular area for years. The internet has accumulated tons of free tutoring videos and materials. Some of them are actually really good!

Even if you are stuck with questions you cannot solve, just post them on StackOverflow, you will have your answers within a few minutes. The answers you get are also really great!

With all the free tutoring materials and teachers, what is the point of creating this paid online course?

It depends on your own situation and what you want.

If you already have lots of coding experience, then learning web development is actually very simple for you. All you need is to familiarize yourself with a new set of coding grammar and functions.

But if you have no coding experience before, then learning to code can be rather challenging. In this case, you will find that learning from a well-designed course can make your life a lot easier. You will make faster progress as well.

If you just want to have a rough idea of how web apps work and create some basic programs, then there is really no need for you to pay for any courses. Free internet information is more than enough to meet your demands.

If you want to be able to turn your design and idea into programs that are also safe and efficient enough to be applied in real life, and most importantly, you want to do this as soon as possible, then learning from a well-designed and considerate course is your best choice.

You will be shown directly where the best route is. With all the detours being avoided, you can therefore save lots of time and effort.

Why us:

Most online students can only devote partly to their studies. They still have other things going on in their life. Their study will often be interrupted.

We believe this is also a situation most of our students are facing.

Therefore, when designing course content, we have arranged lots of review sessions. In our Vue course, we even ask you to take photos of screenshots.

All our projects will be broken into small bits. We only focus on one bit at a time. In the end, we will combine everything together and create complicated APPs.

Every time previous knowledge is needed, we will either remind you to review previous lessons or directly give you a review to fresh your memory.

In this way, we can keep strengthening the foundation while putting more weight on it. Eventually, you will master everything we cover in this course.

In summary, explaining new knowledge to you is NOT our goal. Our goal is to help you master new knowledge as well and fast as possible.

Who this course is for:

Anyone who wants to learn web development
Anyone who wants to learn to Vuejs
Anyone who wants to earn a living by becoming a web developer
Anyone who wants to start their own business
Anyone who wants to be their own boss by becoming a freelance web developer
Anyone who wants to strengthen their fundamental skills
Anyone who wants to enhance their skills and go higher
Anyone who wants to learn how to use Command Line, NPM, and Babel
Anyone who wants to learn how to use webpack
Anyone who wants to learn TCP/IP

Complete Web Development: React 18, HTML, Vue.js, PHP, MySQL

What you'll learn

Explore related topics

Course content

Complimentary Section: React 18 Course7 lectures • 1hr 3min

Basic Computing Knowledge4 lectures • 14min

Basic TCP/IP knowledge8 lectures • 28min

Basic web hardware knowledge4 lectures • 13min

Start coding and working on the invisible part8 lectures • 22min

Creating the visible part3 lectures • 6min

CSS: Cascading Style Sheet7 lectures • 19min

Vital Difference between BLOCK and INLINE tags8 lectures • 19min

Image Display and things you should pay attention to8 lectures • 17min

Collect data: FORM and INPUT3 lectures • 7min

Requirements

Description

Who this course is for: