The Complete front end web developer Bootcamp - 14 projects

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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.

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. 

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.

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.

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

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.

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.

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.

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.

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.

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.

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. 

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.

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

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

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.

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

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. 

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.