How to Start Front-end Web Development

April 03, 2021
3 min read
Saroj Kumar

Hey Guys! I am starting a new Series on Fundamentals of Web Development from scratch and here is the first post that describes everything you need to know about Front-end Web Development.

Languages to Learn:

You need to learn Languages that are used to create a page/document that can be displayed in a browser.

  1. HTML (Hyper Text Markup Language)
  2. CSS (Cascading Style Sheet)
  3. JavaScript (ES6 and above)

Basic requirements to Get Started:

Below mentioned items are the starting point of your Great Journey! Get a hands on to these.

  1. A Code Editor (Any of your choice)
    • Atom
    • Visual Studio Code
    • Sublime Text
    • Brackets
  2. Understanding of CLI (Command-line Interface) to fasten your workflow.
  3. Browsers and DevTools

Sites to Learn Web Development

There are around thousands of sites and resources from where you can learn Web Development.
Some of them are listed below

  1. freecodecamp.org
  2. teamtreehouse.com
  3. coursera.org
  4. developer.google.com/web
  5. lynda.com
  6. udemy.com
  7. theodinproject.com
  8. pluralsight.com
  9. edx.org

Reference Sites to Learn More:

While working with Web Development, if you are stuck at some point, these sites will help you a lot to move forward towards your dream.

  1. stackoverflow.com
  2. w3schools.com
  3. developer.mozilla.org
  4. css-tricks.com
  5. geeksforgeeks.org
  6. tutorialspoint.com

What to Learn after that:

Version Control System (git, GitHub)

You must have knowledge about version control systems like git which will fasten your work and let you work on your project the way you like.

There are a number of sites/services that provide git solution, like

  1. GitHub
  2. Bitbucket
  3. GitLab
  4. Beanstalk
  5. SourceForge
  6. Apache Allura
  7. Cloud Source by Google
  8. AWS CodeCommit
  9. GitKraken

npm (Node Package Manager)

Node Package Manager is very common around every project you are going to face in life. So, be a good friends with npm. There are tons of packages available in npm that make our projects easier to work with.

Read More

Libraries and Frameworks

As we are talking about npm, lets take a moment to dive in. Libraries and Frameworks are the pre-built files and tools that can be used in our project to reduce the workload.

What is the difference between Libraries and Frameworks ? Thats for another topic!

Deploying your Static Site:

After you finish building your site/project, obviously You want to show them to your friends and to the World.

Here are some of the sites that help deploying your static site real quick, and let you show your Creativity.

That's all for the first post. In the upcoming posts, we will explore more on Web Languages.

If you like the post, feel free to share it.

Thank You