I know there are lots of libraries and frameworks and different technologies that are updated daily. And it's really difficult to choose which one we should select or work on it or how to get started.

So in this blog, we will be covering some topics that can help you to get started with your front-end development journey.

Introduction

Just imagine for a second that you are building a supercar with all the parts that you can see from a chassis to an engine and others kinda act like a front-end, and their internal connection like what happens if we press the brake, how does it works internally can also assume as back-end.

With the help of Front-end Development users can build an interactive and creative UI of the website with various Front-end Technologies. It gives you the power to turn your idea into reality.

In this era of the internet were daily new technologies, new inventions and Startups are growing. Thus all MNCs and startups or organizations also require some kind of platform or website so that other users can know more about them.

So if you are thinking to get into the tech field. So first get started with learning some front-end technologies.

Now we will deep dive more into technologies and how they work.

Technologies and fundamentals

Nowadays technologies are evolving daily. If we talk about technologies the most popular are React, NextJs and Angular frameworks. But as a beginner, we should first learn the basic technologies like HTML, CSS and javascript to get started with our first website.

The best way of practice is by building Projects, so build projects alongside.

Basic Learning

HTML

So let's start with basic technologies like HTML.

HTML is Hypertext Markup Language, so it is used to create a structure for your website. It will show the plain text type website unless you add some CSS to it.

Whichever websites you see on the different platforms all are codded in HTML and other technologies.

So HTML acts as a base for building the website.

Resources for learning HTML

Programming with Mosh

Free Code Camp

CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML in other words you can say that CSS is used to make a website more attractive with the help of all different effects, animation and others. Remember it's not a programming language.

The best way to get familiar with CSS is to build a project. Projects play a crucial part. Now you are ready to build your first website.

Here is a link to my first website

Resources for Learning CSS

Web Dev Simplified

FreeCodeCamp

Javascript

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.

With the help of javascript, you can almost control everything for example what happens when you press a link, and how it works internally the code of this is written in javascript. It provides functionality and responsiveness to the website.

As I said javascript is a vast area to cover, so you don't need to know everything to become perfect. There are a few fundamentals like data types, OOPs, and conditional loops. Then start building your projects.

Resources for learning Javascript

Tech With Tim

Web Dev Simplified

Namaste Javascript

So if you're reading this blog until now, then

Here the roadmap links these in structured ways and also well-explained

WeMakeDevsRoadmap

Roadmaps. sh

So let's move on to the next phase which is frameworks

Moving towards Frameworks and libraries

A framework is a set of tools and modules that can be reused for various projects. With the help of a framework, we can easily build a complex website. One of the popular frameworks in demand is React but there are other frameworks as well like Angular and Vue.

So after building some projects and getting familiar with javascript, you can get started with the frameworks like react and angular.

React

Here are a few things you should know about react. React is not a framework it's a javascript library.

Second, it is used for building interactive UI and websites efficiently and significantly with the help of less code.

So you must be wondering, what do you mean by less code?? For example, everything we build in react is component-based so that later on if we want to implement the same button with the same style but with a different name. we can reuse that previous component in this way we don't need to write the code again.

Resource about react

React Official Docs

Scrimba

Web Dev Simplified

In javascript there are also so many libraries and packages, that can help you to build a website the less code as well. Watch this video

Moving on to CSS Frameworks

When I was a beginner, writing CSS was hectic for me especially when it come to responsiveness. Cause when will get started with CSS positioning, this two-term will give a lot of problems (absolute, relative).

So instead of writing this long code in a separate file the frameworks like Bootstrap and Tailwind CSS are introduced.

In TailwindCSS all the properties are mentioned in the form of pre-defined classes you just need to select a class suitable to your website and responsiveness also becomes easy.

But In the case of bootstrap, you can have a ready component and you just need to add that property into your code that's it. But the disadvantage here is that you can quickly identify whether the website is built in bootstrap or not

Here is the list of CSS Frameworks

To know more about front-end resources and roadmap. I'm sharing this amazing blog with you. Do checkout

Getting started with Front-end Development

The Tiny Little Fact!!!

-> Build project alongside.

-> Take risks and turn your ideas into reality.

-> Don't get stuck in tutorial Hell, it only gives you a sense of false hope.

-> Always try building something on your own from scratch.

-> Don't procastinate, schedule your time properly.