How to master Front-End Development?

HTML + CSS + JavaScript- These three can be considered to be the Trinity when it comes to Front-End Development. However, practically, there are a few other important additions as well.

In case you don't clearly understand the difference between frontend and backend or what exactly a frontend developer does, I would recommend going through this- How do Websites work? before proceeding further.

HTML5

More or less you will need to learn the following things:-

  • Tags & Attributes
  • Layout
  • Lists
  • Tables
  • Links
  • Images
  • Forms (Very Important! Don't ignore it!)
  • Multimedia
Its syntax is super easy to grasp and there are ample resources available to learn it. If you are absolutely new to HTML, my recommendation would be, to begin with, a basic free course to get familiar with the fundamentals. For Example- Free CSS Tutorial - HTML5 and CSS3 Fundamentals.
The good thing is that you can jump right into the practical part. Just choose any simple structure you like to design with HTML. Whenever you feel stuck at any time feel free to Google your issue. Google search is an integral part of learning anything in today's time. Learning to Google your bug is one skill that will help almost anywhere and everywhere. HTML Tutorial on w3 Schools is another great resource.

You don't need to waste too much time trying to design something big (this can be postponed for later). Just design what you feel like designing. Try to incorporate everything you learned though.

I used to replicate the question papers of my school exams (Yes, I had a lot of free time). I was first introduced to HTML in 8th standard and that was the coolest thing in the computer world I had seen till then. Here's a snapshot- 

If you want to go into depth about a topic (let's say HTML Forms), you can easily find videos on youtube for them.

CSS3

More or less you will need to learn the following things:-

  • Inline, Internal and External Styles
  • Ids and classes
  • Selectors
  • Dimensions- height, width, margination, padding, etc.
  • Box Model
  • FlexBox (Super Useful!)
Again, if you are a complete beginner to CSS, you can first take up a basic course. For example- HTML and CSS for Beginners - Build a Website & Launch ONLINE. If you are already somewhat familiar but not much. Let's say you know about external styles, ids, classes, margins, borders, padding, etc. but you don't know much about the selectors (Trust me there are a lot of them!) then I would suggest going through this cool game first- CSS Diner.
The concept of FlexBox is super useful! This is one stuff you definitely don't want to miss learning while learning CSS3. Here is another cool game for this- Flexbox Froggy. This game contains 24 levels. Try to complete all the levels with understanding what's happening.


As you have noticed by now, usually an HTML course also teaches a little bit of CSS and vice versa because of their close interdependencies. I feel the above things to be more than sufficient to get going with HTML and CSS but in case you like to learn in an organized way and don't like to switch here and there while learning, you may also take up some paid courses. Maybe this one- Build Responsive Real World Websites with HTML5 and CSS3. Courses like this can help to learn a lot many other things as well which are relevant to real-world websites.

As long as the look is concerned, with HTML and CSS, you can replicate almost any of the web pages in the world (it will be a lot tedious though).

Before moving to the JavaScript part, it would be a good idea to learn Bootstrap- a powerful CSS3 Framework. If you don't know what a framework is or why Bootstrap is needed you may give it a read- What is Bootstrap? Why use it?

Bootstrap4

More or less you will need to learn the following things:-

You can go for the following free courses:-

Note:- Most of the time, one big difference that sets apart a free course and a paid course is- Good Projects! These projects not only beautify the Resume but also helps in quickly learning the concepts. So, if you are going for a free course, make sure that you do complete a few projects on your own. Always remember, 1 good project is worth maybe 100+ videos!

However, I still believe if you have a basic working knowledge of Bootstrap, the best place to learn it more is through its official documentation.

One good way can be to choose a UI to design and challenge yourself to style it only using the Bootstrap classes and not use a single line of CSS (or minimal CSS) on yourself. This way you will automatically be pushing your limits to refer to its documentation and do a Google search.

With HTML, CSS and Bootstrap now done, you have all the tools to make a webpage look good as well as responsive (What is a Responsive Web page?).

But, right now all we have is sort of a read-only screen. What if we want to do something when the user clicks a button or submits a form, etc. Here's when Javascript crawls in!

JavaScript

A lot of things (not everything though) will be similar to other programming languages and if you know any of the other languages like Python, Java, C/C++, etc, these things will be a piece of cake.

  • Basic Syntax
  • Console
  • Variables, Data Types, Operators, Expressions, and Statements
  • Control Flow
  • Conditional Statements, Loops, and Functions
  • ES6 Syntax
  • Objects and Arrays
  • DOM (Document Object Model) Manipulation (Super Important!)
  • Events
  • Asynchronous Programming - Promises, Callbacks, etc. (Super Important!)
You can follow this free course-  Javascript Essentials. I prefer learning through courses and videos, however, if you like reading books, you can also give this a try- Eloquent JavaScript. If you want an exhaustive course you can also go for The Complete JavaScript Course 2021: From Zero to Expert!

Learning JavaScript opens up a lot of doors to some very useful technologies instantly. Some examples are- Angular, React, Node.js. With Google now releasing Tensorflow.js, who knows JavaScript may get a greater share of its role in the Machine Learning field in the future - a field which is heavily dominated by Python right now. Here's a video on this- Machine Learning magic for your web application with TensorFlow.js (Chrome Dev Summit 2019).

Note:- MDN Web Docs is another amazing documentation especially for HTML, CSS, and JavaScript.

Anyway, after learning JavaScript let's take one more step towards becoming a Front-End Developer. As the website to be designed gets more and more complex, it's smart to switch towards efficient and powerful frameworks which makes the life of a Front-End developer easier.

Some of the popular ones are Angular, React, Vue.js. Let's pick up Angular.

Angular

A TypeScript based web application framework. It's very useful for building complex Single Page Applications (we will talk more about this later). If you know JavaScript, it's hardly an issue to learn TypeScript. It's almost the same thing. Angular on the other hand can be somewhat overwhelming for beginners considering the wide range of things it can do. It's a universe in itself but learning it is totally worth it. We will talk about Angular in great detail later on. Following are two great online resources to learn Angular:-

A Big Project!

Remember when I said in the HTML section that designing something big can be postponed for later. That "later" is now. Choose something to design. It can be a website already existing or something you wish to develop. There are a lot of ideas for projects out there. Use everything you learned and see all the tech working together perfectly complementing each other!

Comments

Post a Comment

Popular posts from this blog

What are Bootstrap breakpoints?

Image
  As I mentioned in the previous post  What is a Responsive Web page?  , breakpoints play a very important role in making a webpage responsive. So, let's now try to understand breakpoints and see them in action. X-Small: Portrait phones (less than 576 px) Small: Landscape phones (576 px and up) Medium: Tablets (768 px and up) Large: Desktops (992 px and up) Extra Large: Large Desktops (1200 px and up) Extra Extra Large: Larger Desktops (1400 px and up) By default, these are the categories into which all screen sizes are classified. Bootstrap provides different classes for these categories- sm , md , lg , xl , and xxl . These are called responsive classes. Let's say we use lg with some other Bootstrap class "A" what it would mean is that particular class "A" will get applied for all the screen sizes >= 992px. Also, suppose we want to apply the "A" class for the 'Large' category but a different class "B" for the 'Extra Large&
Read more

What is Bootstrap Grid System?

Image
 I don't want to go through every single detail of what Bootstrap Grid System can do because there is a lot and as I mentioned in the last part of  What is Bootstrap? Why use it?  the best way to know a tech in detail is to go through their documentation again and again. However, I do want to share some fundamentals to get a working knowledge of the Grid System. Bootstrap Grid System assumes 12 equal divisions of any screen. So, whatever device you have been using be it a mobile phone, tablet, laptop, or desktop. The total screen width has been split into 12 equal parts. Now, out of these 12 divisions, any number of divisions ranging from 1-12 can be applied to different HTML elements. The higher the number, the more width that particular element takes on the screen. Let's write this simple piece of code:- < div   class = "row mt-4 text-center" >      < div   class = "col-12 border bg-info py-4" >         12/12 or 100% of total width available &l
Read more

What is Bootstrap? Why use it?

Image
  Prerequisites- Basic HTML and CSS   Long story short- Bootstrap is a CSS framework. What's a framework? Now, this is something that most of us usually not have a clear understanding about. We often misunderstand 'language' with a 'framework'. However, there's a difference. Let's try to understand it through an example. Let's try to design a very simple login page with HTML and CSS. < form >      < div >          < label   for = "emailField" >             Email address </ label >          < input   type = "email"   id = "emailField" >      </ div >      < div >          < label   for = "passwordField" >             Password </ label >          < input   type = "password"   id = "passwordField" >      </ div >      < div >          < button   type = "submit" >             Login </ button >      </ d
Read more