Thoughtful Web Development Course: HTML, Vue.js, PHP, MySQL
4.8 (211 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,089 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Thoughtful Web Development Course: HTML, Vue.js, PHP, MySQL to your Wishlist.

Add to Wishlist

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

HTML5, CSS3, JavaScript, jQuery, responsive web page, Vue.js, AJAX, PHP, MySQL, OOP
4.8 (211 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,089 students enrolled
Created by OnlyKiosk Tech
Last updated 8/2017
English
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
Includes:
  • 26.5 hours on-demand video
  • 46 Articles
  • 92 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
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:

At this moment (April, 2017), the whole course covers 10 subjects: 

  • HTML
  • CSS
  • JavaScript
  • Ajax
  • jQuery
  • font awesome
  • Vue.js
  • animate.css
  • PHP
  • MySQL

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 as possible. 

Who is the target audience?
  • Anyone who wants to learn web development
  • Anyone who wants to learn to Vue.js
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
548 Lectures
26:34:51
+
Front-end introduction and preparations
5 Lectures 08:04

In this course, we will first develop an overview of what kinds of technology we need and how to set up a development environment. 

Preview 02:38

In this lesson, we will get an overview of what JS is and what it can do for us. JS has also developed several derived techs, you need to know that as well.

Preview 01:47

Browser compatibility issue
00:55

Install your development environment


IDE and ready your development tools
01:11

Install and use notepad++

Installing Notepad++
01:33
+
Start coding and working on the invisible part
8 Lectures 21:30

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. 

The first line of your HTML code: version declaration
03:19

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. 

HTML Rules and Grammars
03:30

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

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

The four indispensable HTML tags
01:13

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

Create your first standard HTML file
02:25

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. 

Adding a Favicon
05:09

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 to achieve better SEO results
02:28

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 multilingual web pages
02:18

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

Use META for page behaviour control: auto page renewal, etc.
01:08
+
Creating the visible part
3 Lectures 06:21

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

Front-end development for dynamic websites
01:58

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

Page Structure Analysis
02:22

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. 

How to display texts properly
02:01
+
CSS: Cascading Style Sheet
7 Lectures 19:11

What is Cascading Style Sheet


CSS Introduction
01:59

What is inline CSS?

How to use STYLE attribute?

Basic structure of CSS property.

Inline CSS: Part 1
03:26

What is inline CSS?

How to use STYLE attribute?

Basic structure of CSS property.

Inline CSS: Part 2
01:34

Internal CSS and type selector.

Internal CSS and CSS Type Selector: Part 1
03:03

Internal CSS and CSS Type Selector: Part 2
02:22

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

Class and ID Selector-- More Accurate Control
03:09

The priority order.

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

The Priority Order of CSS Selectors
03:38
+
Vital Difference between BLOCK and INLINE tags
8 Lectures 18:57

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

Preview 02:32

Discover and compare the difference between block and inline.

Preview 01:47

Discover and compare the difference between block and inline.

Preview 03:10

Discover and compare the difference between block and inline.

The Difference between BLOCK and INLINE Tags PART 3
01:37

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

Initialising CSS: Getting Rid of Default CSS Styles
02:41

Miscellansous Issues about Styling Texts
01:02

How to use your own font file in your web project

Use Your Own Font
02:35

EM: control all font size

For Responsive Web Design: Using EM, Not Pixel
03:33
+
Image Display and things you should pay attention to
8 Lectures 17:24

How to display images and security measures you should take. 

Display Image: Part 1
02:24

How to display images and security measures you should take. 

Image Display Part 2
01:41

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. 

The INLINE-BLOCK Type
01:33


Creating a window using DIV.

Fill this window with image using the background property.

This is how you display an icon.

Display ICON Part-1
03:02

Display ICON Part-2
01:25

Display ICON Part-3
02:05

Display ICON Part-4
01:42
+
Collect data: FORM and INPUT
3 Lectures 07:09
INPUT Part-1
01:56

INPUT Part-2
03:17

INPUT Part-3
01:56
+
URL, External CSS and Comments
5 Lectures 10:49

What is relative URL and why we need it.

Preview 01:13

Relative URL-Part 2
03:35

Relative URL-Part 3
01:11

External CSS
03:27

Comments
01:23
+
Hyperlink and Anchor
7 Lectures 12:07

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. 

Two types of Hyperlinks
01:17

Creating the first type of Hyperlink
01:40

Open new page in the current window or in a new one
01:01

Navigation in a long page


The second type of Hyperlink
01:55

Demonstration of creating the second type of hyperlink
01:15

Quasi selector and its applications
02:27

Doing conversions among BLOCK, INLINE, and INLINE-BLOCK

DISPLAY: conversion among BLOCK, INLINE and INLINE-BLOCK
02:32
+
TEXT-ALIGN and its challenges and applications
9 Lectures 18:59

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

Getting ready for challenges
00:45

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

Position texts and non-text elements
01:46

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

Positioning clickable text inside the navigation button
02:34

Know how text-align works.

The trap of TEXT-ALIGN Part 1
04:01

Predict the behaviour of text-align

The Trap of TEXT-ALIGN Part-2
01:18

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

Real-life application: amazon footer
03:23

word-break
00:49

Align multiple-line texts using vertical-align.

Vertical-align and Table-cell
01:21

Padding
03:02
81 More Sections
About the Instructor
OnlyKiosk Tech
4.8 Average rating
347 Reviews
11,092 Students
5 Courses
Making Your Efforts More Effective

No matter where and whom you take your lessons from, you will always have to do all the hard work yourself.

You have to spend time and efforts learning, understanding, memorizing and practicing new knowledge. This is NO short-cut here.

But a good course can show the best route and help you avoid traps and detours. You can achieve maximum productivity from your time and efforts.

Based on user feedback, tech development, and our new thoughts and inspirations, we will keep adding new contents and improving existing ones.

We will cover basics as well as advanced applications. You will learn smart and creative tech combinations as well.

Web development has been a popular area for years. The internet has accumulated tons of free tutoring videos and materials.

Even if you are stuck with questions you cannot solve, just post them on stackoverflow, you will have your answers within a few minutes.

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

It depends on what you really want.

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 safe and efficient enough to be applied in real life and solve all kinds of challenge, then this course is perfect for you.  

We believe a good online course should also be a navigator, not just explaining coding concepts.

It should show you where the real destination is and most importantly, take you there in the most efficient way.  

Why we emphasize real destination?

First of all, you should know a program that can work is very different from a program that can survive in real life.

This is like playing a racing game on your phone is definitely not the same as driving a real car on a real track.

For example, in our PHP lesson, we will teach you how to create an upload program.

We have seen books and courses that only teach how to upload files.

If you run that program in real life, it will not last a day. It will do more damage than good.

For an upload program to work in real life, you need to check file type and size before letting any file being uploaded.

You also need to protect your program from uploading the same file repeatedly by keeping refreshing the uploading page.  

Uploaded files should be properly renamed and stored. Most importantly, this process must be automatic.

Uploaded files must also be retrievable, therefore information about uploaded files should also be automatically recorded into database.

If one step is missing, your upload program will not survive the real life environment.

This is why we emphasize real destination. We want to show you the whole picture, rather than just a segment of it.

Knowing the whole picture is what separates a trustworthy professional programmer from a coding amateur.

Apparently the road to the real destination is quite long.

This is why a good course should be a navigator. It should show students the best route.

When designing our course contents, we acknowledge and most importantly, take in consideration two very important facts:

Everybody forgets and you have other things going on in your life and can only partly devote to your study.

This means your study will be constantly interrupted and when you resume your study, you might find what you have learnt has become rusty.

As a result, all your new knowledge are built on a collapsing foundation. At the end of your study, you will find that despite you have spent time and money, but you just cannot make satisfactory progress. You thought you have learnt everything but just cannot put them together can create a functional program.

So how do we solve this problem?

We divide our whole course content into small segments. At the end of each segment, there will be a review session summarizing everything you have learnt from that session.

When you are creating APPs, we will give a review session on key knowledge as well.

Apart from review sessions, we will also help you control your study pace. You will often hear we tell you that if you cannot answer this quiz, do not proceed and review previous lessons.

The biggest card up our sleeve is our content table.

You might think our upload program lesson starts here. But actually our upload lesson has started long before that. We have started to lay foundations for you since we teach you how to create a file type detector.

We divide a complicated program into components and will only add one component at a time. Most importantly, every time we add a new component, we will review the previous components again.

In the very end, despite the program we are creating is long and complicated, you will be able to master everything.