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.
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.
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.
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.
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.
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
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
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.
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.
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.
Get your exercise files here. Exercise files are great way to compare code and solve errors
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.
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.
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.
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
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.
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.
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.
We at Igneus have trained students from IIT's, NIT's and reputed companies. Students from all over the globe have trusted our High quality and affordable trainings from 10+ countries and have opted for our Certification programs.
IGNEUS stands for the Revolutionary and a quality enhanced change that we’ve tried to come up with in the modern world of Internet education. We’ve come up bearing in mind the maximum emphasis on the quality dealing with every new technology which has made us distinguished from the throng at internet. And this revolution of choice will keep continuing. Today IGNEUS Technologies has proudly lifting up the tag of being the world's most trusted provider of myriad of services and training programs aiding constantly in every corner of the globe along with web security aspects, and open source technology.
IGNEUS Technologies Pvt. Ltd is a dream shared and brought up by two computer geniuses to make the society upgraded and aware of the cyber crimes that curb the innocence of environment, thus starting a revolution in favor of cyber security.
Igneus stands for the Revolutionary and a quality enhanced change in every aspect of its touch to internet. Quality dealing with every new technology makes us different from the crowd of internet. The revolution of choice continues. Today Igneus Technologies is the world's most trusted provider of mentioned services and training along with web security aspects, and open source technology.