The Fundamentals of Web Front-End Development
3.7 (12 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.
55 students enrolled
Wishlisted Wishlist

Please confirm that you want to add The Fundamentals of Web Front-End Development to your Wishlist.

Add to Wishlist

The Fundamentals of Web Front-End Development

HTML + CSS + BootStrap + JavaScript + JQuery to get you on the road of modern frontend design
3.7 (12 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.
55 students enrolled
Created by Le Deng
Last updated 1/2016
English
Price: $20
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Develop your own website front-end using HTML, CSS, Bootstrap, JavaScript and JQuery
View Curriculum
Requirements
  • It's better that you already know some of the basics of front-end design. If not, it means more work is needed to get your throught the course.
Description

More than 5 hours of lectures covering HTML, CSS, BootStrap, JavaScript and JQuery. You don't need to know every detail of the topics to get started on building your website.

9 projects as assignments will force you to learn through yourself, whose knowledge will eventually retain in your body.

Why this course?

There are many web front-end courses out there. This course has the following features:

  • You don't need to know every detail to get started. This course goes through the essential parts of each subject with examples, not to a wildly comprehensive level, but enough to get you started.
  • HTML + CSS + BootStrap + JavaScript + JQuery. A good package of skills and pretty much what you need to start to build a modern website front-end.
  • No detail steps for your projects. You have to rely on yourself to use the knowledge learned to build your own projects. This could be hard. However, you would definitely be able to achieve it with patience and efforts.


Why there is no detail steps in those projects?

Usually a project is guided as a walk-through in other online courses. The good side is that you can follow the steps to build whatever it instructs you. However, simply typing by following instructions doesn't give much to you. You have to first understand and then do it on your own to retain those knowledge in your body. Project without detail steps trains you on how to attack the problem (the project to be built in this case) using the knowledge learned. Hence, you need to do your research and find ways to solve each issue blocking you from going further.

There are two ways of thinking, reactive thinking and proactive thinking. Reactive is you start to remember something after logically reminded by other things. Proactive is thinking without direct reminding or hints. The latter is much more difficult than the former. Doing projects by reverse engineering trains you in the latter form.


What if I get stuck or don't understand it?

Well, that's the point of learning, right? Try to search online and use resources to solve your problems. You need to think and train yourself to learn how to attack any obstacles that in front of you.


But there are other courses that have longer duration and wider coverage on those topics?

You can learn comprehensively or learn what is enough to get you started. I personally enjoy knowing just what I need so that I can get my hands dirty on doing stuff. Look at those topics that are covered in this book, each one could be a complete book or course to study. It all depends on what you are interested in.


So what should I plan to do?

1. Watch the tutorial video and know the element topics in the tutorial.

2. Practice writing code of each element topic yourself and see the outcome of it. Any trouble, google it.

For project, you can design the layout first and then add in JavaScript/JQuery to control the logic.

Who is the target audience?
  • Anyone who wants to enhance their front-end development skills and would like to find an efficient course as guidance
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 37 Lectures Collapse All 37 Lectures 05:32:27
+
Bonus
1 Lecture 00:03
+
Intro
1 Lecture 02:45

This is the course introduction.

Preview 02:45
+
HTML Essentials
5 Lectures 38:38

This lecture talks about what HTML is, text editor you can use and start to look at some basic HTML tags such as <head>, <body>, <h1>, <p>, <br>

HTML - intro and basic tags
06:59

Here we talk about some HTML attributes: id, name, value and etc. Also, we will start to use HTML styling, such as background-color, fonts and etc.

Preview 08:27

We continue to talk about HTML tags. This time we will look at <div>, <span>, <a> and <img>

HTML - More tags <div>, <a>, <img>
11:14

More tags are coming here. We will be looking at how to build table and list in HTML.

HTML - More tags <table>, <ul>, <ol>
08:07

This is our first project. We'll build a simple website using the HTML knowledge we have learned so far. I know you can do it.

HTML Project - A Simple Website
03:51
+
CSS Essentials
6 Lectures 01:02:22

This is our first CSS tutorial video. We'll have a brief intro and start to look at some of the CSS powerful selectors.

CSS - Intro and HTML element selectors
08:24

We will look at different ways of inserting CSS elements into HTML. Besides that, we will look at some background properties.

CSS - Insert CSS to HTML; background property
11:52

In this tutorial, we will look at text, font and link property.

CSS - Text property, font, hyperlink
09:12

So here comes the box model, border, margin, padding and dimensions.

CSS - Box model; border, margin, padding, dimension
12:28

We will talk about display, position, z-index and float property.

CSS - Display, position, z-index, float
17:00

This is our CSS project. We will be using HTML and CSS to build a modern website, which will make use of what we have learned so far.

Preview 03:26
+
BootStrap Essentials
5 Lectures 40:30

BootStrap is probably the most popular front-end framework currently. This tutorial will have a brief intro on it.

BootStrap - Getting started
06:54

Here we look at some of the BootStrap template and see how we can leverage it for our use.

BootStrap - How to set up a template
10:40

We'll look at some BootStrap components and see how to actually use them. A login example is presented.

BootStrap - How to use BootStrap components
09:28

Here we look at how to use BootStrap table and navigation bar.

BootStrap - Using tables and nav bar
10:23

In the example, I'm showing an online music store. Yet, it doesn't have to exactly the same. Use your imagination and knowledge learned to try.

BootStrap Project - Music Website Front-End
03:05
+
JavaScript Essentials
11 Lectures 02:01:38

In this tutorial, we start to look at JavaScript. And this video addresses some of the tools we will be using.

JavaScript - Setup
05:23

This tutorial talks about the first part of data types.

JavaScript - Data types 1
14:51

In this tutorial, we will be looking at the second part of data types. We'll also talk about the operators in JavaScript.

JavaScript - Data types 2 and Operators
17:30

Conditional and Loop statements are important for controlling the logic of the program. We'll look at how to implement those in JavaScript

JavaScript - Conditional and loop statements
12:53

This tutorial will look at array and some of its methods.

JavaScript - Arrays
20:35

We start to look at functions in JavaScript and specifically how to define them.

JavaScript - Functions
07:12

This tutorial briefly talks about classes in JavaScript

JavaScript - Classes
07:12


JavaScript with Web - part 2
18:31

This is our first JavaScript project and it's a simple online application that shows some famous quotes on the page. Everytime user clicks the button, a new quote will be shown in the text area.

JavaScript project - Random Quotes
00:46

This is our second JavaScript project. It's a timer application. Compared to the previous one, this is more complicated. You may need to do some research to finish it. Just be persistent and I know you can do it.

JavaScript Project - Pomodoro Clock
02:20
+
JQuery Essentials
6 Lectures 01:04:24

Here we start to look at JQuery, one of the most popular JavaScript framework.This tutorial gives a brief intro on JQuery and some of the basic ideas in JQuery.

JQuery - Intro
16:25

In this video, we will be looking at some interesting JQuery effects, which you can use to make your website vivid.

Preview 17:55

Here we look at how to manipulate HTML elements using JQuery.

JQuery - HTML
12:31

In this course, we will be talking about AJAX, which in general is for browser to exchange data with server without reloading the whole page.

JQuery - AJAX
13:48

In this project, we will develop a basic calculator application. You can use just JavaScript or you can use JQuery so that it helps on writing this app.

JQuery Project - Calculator
01:26

This is a Tic Tac Toe game. If you want to make it interesting, you might want to do some research on the algorithm part. If this project is really bogging you, you might want to skip it for now and come back later.

Preview 02:19
+
Some More Projects
2 Lectures 02:06

We'll be developing a stylish camper news page. We'll be using some api to get the news feed data. You can refer to the project guide for more information.

Project 1 - Free Code Camper News
01:00

In this project, we will develop a simple Wikipedia search engine. Again, we will be using some of the api from Wikipedia. Hope you will enjoy it.

Project 2 - Simple Wikipedia Search Engine
01:06
About the Instructor
Le Deng
4.1 Average rating
1,263 Reviews
5,395 Students
15 Courses
ldeng.net/courses, consultant, thousands of students

Le Deng was first exposed to programming when he was at elementary school and his first language was Logo, a 2D drawing programming language. He received his BS in Electrical Engineering in China and his MS in Electrical Engineering at RIT in US. He has been both a learner and a teacher through the course. In the past few years, he has been interested in web technologies and working on his own path to become an entrepreneur. He’s life philosophy is to contribute a hand on better shaping this world and he is willing to spend just a life-time to fulfill it. He is currently working as a consultant in Boston US.