The Complete front end web developer Bootcamp - 14 projects
4.1 (1,215 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,874 students enrolled

The Complete front end web developer Bootcamp - 14 projects

Learn HTML, HTML5, CSS, CSS3, Bootstrap, JavaScript, Jquery and usage of dozens of plugins like animated CSS & TypeAhead
4.1 (1,214 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,874 students enrolled
Last updated 11/2017
English [Auto-generated], Indonesian [Auto-generated], 4 more
  • Italian [Auto-generated]
  • Polish [Auto-generated]
  • Romanian [Auto-generated]
  • Thai [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 19 hours on-demand video
  • 1 article
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • code front end of the web page
  • Convert any web page into mobile optimised theme.
  • Write custom Javascript code
  • Write code in jQuery
  • Use any pre built libraries in JS and jQuery
  • Convert any Template into required one
  • Take online web development projects and complete them
  • understand codes in HTML, CSS, Bootstrap, javascript and Jquery
Course content
Expand all 128 lectures 19:12:50
+ Introduction, getting the development tools and basics of HTML
9 lectures 01:09:03

We will be building 14 major and polished projects in this course. these are not just toy projects, these are fully paid and ready for professional use projects. This is first quick look at projects.

Preview 10:19

Getting a course tour in this video. This will help you to customise a personal learning experience. Also you will get to know about where to ask questions and few more such details.

Introduction to the front end development course

A few personal notes before we start this course. Web development is a process and process does takes time. There is no such thing as be a web developer in 1 day or 2 days. This video will help you to stay motivated in the learning process.

Preview 04:06

Collecting developers tools is an important step. Choosing an IDE with color highlighting, code suggestion will help you to write and learn web development quickly

Preview 12:01

after selection web development tools, we will learn to structure our files. This is one the most important process of web development but mostly over looked

Structuring the files and creating first file

we will start learning the HTML with text tags. These are just basic tags from h1 to h6, but this is always a good point to start learning.

Text tags

There are 2 types of list items available in HTML. Ordered list and unordered list. un ordered list is the one that you would mostly use, specially in the case of designing navigation bars.

list items

Finally we have reached at the end of this very first section. It's always a good idea to test the skills and we will do that with this dummy project. This is for sure not an exciting project but is a good one for this stage.

Ending with challenge and solution

Get your exercise files here. Exercise files are great way to compare code and solve errors

Get Your Exercise files here
+ Div, tables and Forms with Challenge to create FB page
7 lectures 01:02:24

Division is a block level element and is usually used to group a few element likes text tags, lists, images etc to group together. On the other hand span is little different. Let's say, you want to style third word in h1 with different style, in this case, wrap that word with span.

Divisions and Spans

Links are essential building blocks of entire web page. Sometimes they point towards local HTML files while sometime we point it to other webpages. Also images play an important role in looks of a web page. Rule of thumb is great images makes great web pages.

Images and links

now you know how the links are used and coded in web development, why don't you try with this small challenge. Don't worry, in case you get some hiccups, there is a solution too in the same video.

Challenge for links in images and solution

Tabular data is another important part of web development. You will see tabular data in the admin panel a lot. There was a period when entire web structure was designed using tables but that is not a good practice now and we woun't even show that.

Tables in HTML

Forms are a way of how you take input data from the user. There are a lot of options by which you can collect data, it can be text forms, passwords, multiple choice selectors, check boxes, and many others. These forms also have a submit button at the end to pass the data, usually with POST method.

Basic forms

Forms are relatively a big topic and it was tough for us to cover that in just one video. Things like placeholder text and properties like disabled input types are discussed in this video.

More about forms in HTML

Here we will strip off the CSS of main facebook page and then we will ask you to replicate the facebook login and signup page. This is just for educational and learning purposes. In case you feel that you are facing problems, there is a solution too at the end of movie.

Challenge to create a facebook login page and solution
+ HTML 5 semantics and adding audio, video and YouTube to web page
3 lectures 24:16

With the launch of HTML 5 things are now much simpler as compared to previous versions. Introduction to special divisions like header, aside and footer are making things clearer and easy to target from CSS and JS point of view. Let's have a look on HTML5

Introducing HTML 5

It is important to understand key differences between HTML5 and its various previous versions. We will design a basic layout in html 4 and then we will design same layout in html 5. This will give us the ground to compare both of them.

Comparing HTML 4 semantics with HTML 5

Internet is no longer now a place of boring texts. Now it consists of audio, video and other multi media resources. We will learn to add these multi media resources as well as to integrate youtube videos in a web page.

Adding Videos, audios and YouTube Videos
+ CSS - Box model, color selection, Google Fonts and Font Awesome integration
5 lectures 56:26

CSS makes a web page look good. Without CSS a web page will look like a pdf. We will learn to write first CSS code as well as best practice about where to write css. CSS can be written in separate file, in head section as well  as in inline tags. Lets have a look on what are the advantage of each of those

Introduction to CSS and where to write it

While writing CSS, naming the color as balck or red is not a good practice. It is recommended that you use color as RGB values of hex values. We will learn to design best hex color as well as to pick color from your favourite website out there.

Solving the color selection problem

Here we will design a basic coming soon template and learn about box model. Box model is important to learn about the difference between margins and paddings. This coming soon template can be used at any of your favourite place. All the code in this course comes with "Do whatever you want to do" licence.

Coming soon Template and box model

Putting a division in center is not an easy task. We will learn some tricks like when we assign a custom width to our division, we can assign margin as 0 from top and bottom, auto from left and right to put it in center. Also we will learn to center the text elements in that division.

Box model and centering text

Great images and classic fonts, yep these are the secret ingredients to make a web page look good. We will learn to import free fonts from google and put some scalable icons from front awesome. These icons are just like text and are scalable to high resolutions.

Google fonts and Font awesome integration
+ Web development projects - GYM and Sushi Restro Templates
4 lectures 45:05

A complete section dedicated for projects. In this part 1 of the project we will design the basic layout of GYM COMING SOON template. You can use other image and can easily modify that to some other business.

Preview 10:24

In the continuation of the previous movie, we will give finishing touches to the projects. For sure you will be proud on your first project.

Preview 12:20

our next project is also very similar to the previous one but we will include video this time. It's not as easy as you thinks, it's not like just to replace video with image. A lot of extra codes comes in role with video.

Project - Sushi Restro coming soon with Video Part - 1

The video that we will use here is again free for commercial use. Here we will give the finishing touched to the Sushi restro template. 

Project - Sushi Restro coming soon with Video Part - 2
+ CSS - classes, ID's, parallax and project to edit template
9 lectures 01:37:00

when you don't apply any styling to the links, browser apply its own styling on the links. Default styling is no good. Also there is a fixed pattern to apply styling. Let's learn the process of styling.

Styling the links

Classes and ID are the basis of CSS styling. Classes and ID's allows you to target a specific element or group of elements so that you can assign them styling such as color and background colors etc.

Classes and ID in CSS

Later we will learn to have a short cut to have navigation bar but in this video we will learn to create navigation bar from scratch. We will take a few unordered list elements and style them to look like navigation bar

Designing a navigation bar from scratch

This might look a little off topic but it is actually going be heart of your development. Design is always an issue for developers and CANVA is a free service that solves this issue. We will also learn to choose color palettes to give our site a proper theme.

Color palettes and canva for design

Adding parallax is a demand of present market theme. In this video we will create a ground to implement parallax effect in our page. We will just create a few divs and in the CSS, we will give them some height.

Adding parallax part 1

After setting up the base ground we will download necessary files. Then we will learn to read the documentation to implement this feature. There are various methods to implement parallax but we will choose the easiest one, by adding data attributes.

Adding parallax part 2

Editing template is one of the major work for front end developer. In this movie we will learn to edit a non responsive template. We will convert this existing template to a fictional company Tacky Trucks. First Part of this process, is to edit the existing content.

Project - Learn to edit templates part 1

In the part 2 of editing templates, we will learn to edit the CSS of this project. Editing CSS can be a little tricky but again, everything is a process and we will learn it here.

Project - learnt to edit templates part 2

This is a simple self evaluation video. The assignment is simple, take template of your choice from the free resource mentioned. Then use the almost same strategy and change it to your favourite business theme.

Project - Challenge to edit a template
+ CSS - box sizing, gradients and TODO list project
6 lectures 56:08

Applying gradient is a great way to make background look super cool. Yes we can apply backgrounds using images too but images do take take to load while CSS gradients are faster to load. 

Gradients in CSS

Now we want to apply a CSS property. We want to target only those elements of check box input that are check marked. Further we want to apply text decoration on those selected elements.

Check through CSS

Box sizing is a major issue and a technique, although used rarely and for very specific developments only. We will create a box size example and later apply it in our todo list app

Box sizing in CSS

Time to build a todo app, in the first video here, we will create base structure of html.

Project - TODO list APP part 1

In this  part 2 of building todo list app, we will  align the CSS properties and make our app look good. Although the app is not yet finished and some tweaks can be done.

Project - Todo List APP part 2

In this video, we will give some final touches to the app. Although our app cannot take new inputs but still it's fun to do this TODO projects

Project - Todo List App part 3
+ Getting started with Bootstrap - Tour and creating landing page project
10 lectures 01:33:49

Bootstrap is a great framework to write fast code that are mobile friendly and comes with a ton of pre written CSS. You might think Bootstrap as a gigantic thing but under the hood, it's some pre written CSS and Javascript. 

Introduction to Bootstrap

File structure is an important process while doing web development and a lot of people just ignore it. It might be a core development or with some framework, file structure should always be similar to just what we taught in this course

Creating first bootstrap file structure

The very first thing that we need to understand about bootstrap is the overall structure and working mechanism. In the next few movies we will look at the structure and try to pin point the exact element that we might need.

Overview of bootstrap working

Grid system is the basic foundation of every website that you will create in bootstrap. Bootstrap divides entire website into 12 equal grids. Further it depends on you that if you want to use pair of 6 and 6 OR 9 and 3, but the whole point is that the sum of one row should always be 12.

Understanding the grid system

Bootstrap gives you al lot of inbuilt classes to be applied on text tags, buttons, input and many more. Grid is also a part of CSS section too. let's take a tour the CSS section, so that we can get the elements when we need them.

Tour to CSS part of the bootstrap

Another important section on the bootstrap where you will be spending a lot of time is components. You will find navbars, jumbotron, tables and other such elements in this section. Again we will not be writing code in this movie, just a tour.

Tour to Components part of bootstrap

The final tour section will be this movie. We will take a look on javascript section. Yes, we are not yet skilled with javascript but still we will learn to apply some of pre cooked code in our application.

Javascript components and layoutIt website builder

Moving towards the implementation of the bootstrap tour. We will design our first landing page page and learn to use the grid system given by bootstrap. In the first we will create the basic foundation of the page.

Project - responsive landing page part - 1

in the second part of previous video, we will polish our project to look good. This will be a final and small project that you can use for your own personal stuff too.

Project - responsive landing page part - 2

One more thing that was not planned but will be actually cool. We will  add a section below login button. And in that dropdown, we will put two buttons, one for fb login and another for twitter login.

Project - adding facebook and twitter logins
+ Project - Pokemon Corporate site, yahoo selling page and Admin Dashboard
11 lectures 02:16:35

An entire section dedicated to projects and we will be starting with a company template. We will just name it as fictitious pokemon site. This video will be setting up navigation bar, customising the fonts and adding some icons.

Project pokemon Company adding navigations

Next up in the project we will add a slider on the web page. Adding slider is not a big deal with bootstrap. With some pre cooked code and some editing to it, we can customise any image into slider.

Project pokemon - adding slider

Next up in the page we will add team section. It is very common now a days that team photos are added in the web page. With bootstrap we can add 3 section easily.

Project pokemon - adding team section

Next up we will add content section. One part of the content will be a nice image and other part will be content. Next up we will alternate that and it looks really good.

Project Pokemon - adding content section

Finally, we will be adding footer to the web page. It's going to be simple footer. Looks like everything is done at this point, so lets add up some cool animation effects in the web page.

Project Pokemon - footer and animations

Time to sell Yahoo, Ohh wait, it's already being sold. Keeping jokes aside, we will build a selling page. This usually comes with big main BUY NOW button.

Yahoo Selling page - navbars

Doing some tweaks and final editing to our yahoo selling page. It's not a big and polished page but the point is to learn one more type of structure bootstrap

Yahoo Selling page - complete

now in this project we will make an admin dashboard. First of all we need a navigation bar. We will take it from bootstrap and will modify it to our need. Also we will  add some cool icons to it.

Project AdminDashboard - adding navbars

Our admin dashboard will have 2 sections. Let's create left dashboard first. This dashboard on the left side will have some navigation and nothing else.

Project AdminDashboard - adding left dashboard

The right side of admin dashboard will have 4 images on full size. Also we will put a table below that so that data can be populated in them.

Project AdminDashboard - adding main content

So now our dashboard is all most complete, let's give it some of the finishing touches. Cleaning up and after shining of the project is always required.

Project AdminDashboard - complete
+ Grabbing the tools to learn and write Javascript
2 lectures 11:14

Ok, so things are going to get more interesting now. Moving to the javascript is really a big deal. First of all, Congrats for making till here. By far now should be proud that you can design web pages on your own

Important note before we move on to javascript

Most of the people out there can skip this movie. This is just about grabbing the tools. Most of you might already have those tools.

Getting the tools ready for javascript
  • No pre requirements to start this course
  • we will need a few FREE editors (covered in videos)
  • A simple browser, ohh wait, you already have that
  • Some developers addon on your browser (covered in videos)

Welcome to the Complete front end development Bootcamp. This is one of the most comprehensive bootcamp available online. So, if you are new to web development, thats great news because starting from scratch is always easy. And if you have tried some other courses before, you already know that web development is not easy. This is because of 2 reasons. Either the web development course might be missing projects, or might be focusing on too many things at a time. When you focus on everything, in a short duration of time, it is very tough be a great developer.

This course gives you a unique experience and focus only on front end web development. First we will get professional and free web development tools, then we will start with HTML. Once we cover this ground, we will take down our very first challenge. Further we will learn HTML 5 and start our first project. 

Moving further we will take CSS and CSS3. After that we will have a complete and dedicated section on projects. After that we will learn Bootstrap and optimise our sites for mobile view. After that we will learn Javascript and jQuery and will do some projects in that.

Structure of this is designed after research and you will never feel bore in this course. After completion of the course, you will be able to design a web page in the exact same design that is on your mind or you might have seen on some theme website. 

Creating a web template of your own or edit the one, you will be a full skill ninja to do the job. 

Our offline bootcamps are priced at 1000$ per student but with online education, you can get the exact same content in fractions of that.

Still not satisfied, have a look at the FREE project movie in the course.

Who this course is for:
  • Anyone who is interested in building career in web development
  • One who wants to learn the implementation of HTML, CSS, js and jquery
  • This course is not for you if you are already a FULL STACK DEVELOPER