4.46 out of 5
4.46
1055 reviews on Udemy

Complete Web Development Course: HTML, Vue.js, PHP, MySQL

HTML5, CSS3, JavaScript, jQuery, VueJS, AJAX, PHP, CLI, NPM, Babel, Webpack, MySQL, OOP, Node.js and Express.js
Instructor:
OnlyKiosk Tech
4,975 students enrolled
English [Auto]
Develop the ability of solving problems by yourself
Master HTML, CSS, JS, and Vue.js
Create 12+ Front-end APPs using HTML, CSS, JS, jQuery and Vue.js
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

What you will learn from this course:

  1. HTML   

  2. CSS

  3. JavaScript   

  4. Responsive Web Page

  5. Ajax

  6. jQuery   

  7. font awesome   

  8. Vue.js

  9. animate.css

  10. PHP   

  11. MySQL   

  12. Command Line

  13. NPM

  14. Babel

  15. Webpack

  16. ES6 Import and export

  17. VueJS CLI

  18. Vue.js single-file components

  19. Vue Router

  20. Advanced JavaScript: scope, scope chain, JavaScript Garbage Collection, Closure, IIFE(Instantly Invoked Function Expression), THIS, etc. 

  21. 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 contents to our course. For example, we just added contents teaching Vue.js. 

 

For better user experience, all course contents are voiced by professional voice-over artists. Therefore, new contents 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 grammars 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 efforts.

 

Why us:

 

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

 

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

 

Therefore, when designing course contents, 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 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. 

Basic Computing Knowledge

1
Bit and Byte
2
Essential Encoding Knowledge
3
Memory Address, Pointer and Byte Addressing
4
The Bit Width of Memory Address

Basic TCP/IP knowledge

1
TCP/IP introduction and the four layers
2
The application layer and how COOKIE works
3
The transport layer: three-way handshake
4
The transport layer: four-way wave
5
The transport layer: HTTP Keep-Alive vs. TCP keepalive
6
The internet layer
7
Port and scoket
8
The full process

Basic web hardware knowledge

1
Cables
2
Hub and switch
3
Bridge and router
4
NAT and DHCP

Start coding and working on the invisible part

1
The first line of your HTML code: version declaration

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. 

2
HTML Rules and Grammars

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. 

3
The four indispensable HTML tags

<html>,<head>,<body>, and <title>

They are the four indispensable tags for every HTML file you create.

4
Create your first standard HTML file

In this lesson, we will show you how to create a standard and decent HTML file.

5
Adding a Favicon

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. 

6
Use META to achieve better SEO results

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. 

7
Use META for multilingual web pages

If you are running a multi-lingual web page, META is particularly as it is what we use to set language encoding. 


8
Use META for page behaviour control: auto page renewal, etc.

META allows us to control the behaviour of web page, for example, we can set auto-renewal using it. 

Creating the visible part

1
Front-end development for dynamic websites

What it feels like developing front-end program for dynamic websites?

2
Page Structure Analysis

Analyze page structure: header, footer, main area, etc.

3
How to display texts properly

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: Cascading Style Sheet

1
CSS Introduction

What is Cascading Style Sheet


2
Inline CSS: Part 1

What is inline CSS?

How to use STYLE attribute?

Basic structure of CSS property.

3
Inline CSS: Part 2

What is inline CSS?

How to use STYLE attribute?

Basic structure of CSS property.

4
Internal CSS and CSS Type Selector: Part 1

Internal CSS and type selector.

5
Internal CSS and CSS Type Selector: Part 2
6
Class and ID Selector-- More Accurate Control

Class Selector and ID Selector: giving you a more accurate control

7
The Priority Order of CSS Selectors

The priority order.

When ID, Class, and Type selectors are styling the same HTML element, whose order will be followed in the end? 

Vital Difference between BLOCK and INLINE tags

1
SPAN and the concept of BLOCK and INLINE tags

Learn a new tag: SPAN and the new tag belongs to a new category: inline.

2
The Difference between BLOCK and INLINE Tags PART 1

Discover and compare the difference between block and inline.

3
The Difference between BLOCK and INLINE Tags PART 2

Discover and compare the difference between block and inline.

4
The Difference between BLOCK and INLINE Tags PART 3

Discover and compare the difference between block and inline.

5
Initialising CSS: Getting Rid of Default CSS Styles

Get rid of default CSS styles so that our own design will not be affected.

6
Miscellansous Issues about Styling Texts
7
Use Your Own Font

How to use your own font file in your web project

8
For Responsive Web Design: Using EM, Not Pixel

EM: control all font size

Image Display and things you should pay attention to

1
Display Image: Part 1

How to display images and security measures you should take. 

2
Image Display Part 2

How to display images and security measures you should take. 

3
The INLINE-BLOCK Type

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. 

4
Things you should pay attention to when displaying images
5
Display ICON Part-1

Creating a window using DIV.

Fill this window with image using the background property.

This is how you display an icon.

6
Display ICON Part-2
7
Display ICON Part-3
8
Display ICON Part-4

Collect data: FORM and INPUT

1
INPUT Part-1
2
INPUT Part-2
3
INPUT Part-3

URL, External CSS and Comments

1
Relative URL-Part 1

What is relative URL and why we need it.

2
Relative URL-Part 2
3
Relative URL-Part 3
4
External CSS
5
Comments

Hyperlink and Anchor

1
Two types of Hyperlinks

The first type of hyperlink takes you to a new web page.

The second type keeps you at the current page but will take you to a different location of the current page. 

2
Creating the first type of Hyperlink
3
Open new page in the current window or in a new one
4
The second type of Hyperlink

Navigation in a long page


5
Demonstration of creating the second type of hyperlink
6
Quasi selector and its applications
7
DISPLAY: conversion among BLOCK, INLINE and INLINE-BLOCK

Doing conversions among BLOCK, INLINE, and INLINE-BLOCK

TEXT-ALIGN and its challenges and applications

1
Getting ready for challenges

What we are about to learn is the difficult part in front-end study. So be prepared!

2
Position texts and non-text elements

There is a very big difference between positioninig texts and non-text elements.

3
Positioning clickable text inside the navigation button

We have created a navigation button before, now, let's move the clickable text to the vertical and horizontal center of the navigation button. 

4
The trap of TEXT-ALIGN Part 1

Know how text-align works.

5
The Trap of TEXT-ALIGN Part 2

Predict the behaviour of text-align

6
Real-life application: amazon footer

Another application of text-align. You will like it!

7
word-break
8
Vertical-align and Table-cell

Align multiple-line texts using vertical-align.

9
Padding

Margin and its bugs, challenges, solutions and applications

1
Margin and its values

Margin and its values

2
Why, when and where should we use Margin
3
The three application scenarios of MARGIN
4
Setting MARGIN to INLINE tags and related problems

The problems you will meet when setting margins to inline-type HTML tags, such as SPAN. 

5
Special Margin Value: AUTO and its application

Moving a DIV to browser center using the auto value of margin. 

6
Margin: Parent and Child DIV

Setting margins for parent and child DIVs and all the bugs you will meet and how to fix those bugs. 

7
Setting Margin: Siblings
8
Setting vertical margin to sibling images: Part 1
9
Setting vertical margin to sibling images: Part 2
10
Setting vertical margin to sibling images: Part 3
11
Percentage Value used by Margin

POSITION and its challenges, solutions and applications

1
Characters of normal-flow elements

Review characters of normal-flow elements. 

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.5
4.5 out of 5
1055 Ratings

Detailed Rating

Stars 5
691
Stars 4
249
Stars 3
75
Stars 2
21
Stars 1
18
507f038e123e4320c38a7d186787f6b7
30-Day Money-Back Guarantee

Includes

33 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday 9:30 am - 3.00 pm
Sunday Closed
Complete Web Development Course: HTML, Vue.js, PHP, MySQL
Price:
$199.99 $140