Skip to main content

Getting started with Front-end web development

Welcome to the lesson on Front-end web development. This is a self-paced lesson which focuses on setting up an essential web development environment, understanding the basics of files, and getting to know what HTML, CSS & JS are. Please make sure that you are completing the entire lesson.

Learning goals​

After this lesson, you will know:

  • How web works?
  • What is front-end development?
  • How to set up a working environment for front-end web development?

Did you know?​

The fact that we could create this course and you could learn it online is not all easy. We all owe it to one person, Sir Tim Berners Lee, the brain behind the World Wide Web (www). He also created HTML and HTTP along with the first web page editor, the browser.

All these technologies helped him create the first website ever.

So you see, that's how technology evolved.

And today, every website has two parts to it - Front End and Back End. You can probably visualise them this way,

Understanding & working on both FrontEnd & BackEnd together is a little overwhelming. So, let's first focus on Front-End.

Front-end development involves building web pages and user interfaces for web applications.

A Front-end developer implements the structure, design, behaviour, and animation of everything you see on the screen when you open web applications or mobile apps.

Frontend development stands firmly on three pillars: HTML for markup, CSS for styling and JavaScript for logic and interactions.

HTML, CSS & JS

Source: Giphy

Creating beautiful web pages with HTML, CSS, and JavaScript would precisely compose the front-end of your web applications.

Let's do a quick experiment with King Julien, the king of Madagascar.

First comes the sketch.

Source: drawingtutorials101.com

The sketch gives a structure to King Julien. Without which, King Julien doesn't exist.

So, HTML is the sketch that gives your web page a structure. It consists of tags or elements that describe the content on the page.

Next, Tadaa (That's a quick remake session, isn't it?)

Here, the skin, hair, colour, and other external belongings define how King Julien looks. Most characters have a similar-looking skeleton, but all look unique because of these specific and individual factors.

In this case, CSS (Cascading Style Sheets) is used to style your page and give it that unique touch to your elements. In simple English: CSS is what gives a beautiful look to your entire page.

Colored image

Source: Giphy

So if you want to give life to King Julien or, for that matter, any web page, you need to think of Java Script.

By now, you would have got a good understanding of the Front-end. It is very crucial to understand the What and How of Web development.

Well, for now. Let's summarise.

In this lesson, we discussed Front End, HTML, CSS, and JavaScript and how each is used to build a beautiful & interactive web page.

What is web development?

This is what Wikipedia says “Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.”

Let's watch a short video to understand what Web development is?

How does the web work?​

Here is a video which helps you understand how the web works.

By now, you would have better clarity on what a web is and how it works. Let's take our first step in Front-end web development.

The first step is to set up all the required environments to work with during the course. This way, there are no distractions in between.

Environment setup​

Here is a video on getting started with web development.

Here are the concepts covered in this video:

  • Installing VS code
  • Installing Google chrome
  • Working with VS code
  • Get to know what is HTML
  • Understanding the basics of files

Environment setup reference​

Installing VS Code​

VS Code includes excellent tooling for web technologies such as JSX/React, HTML, CSS, SCSS, Less, and JSON. Throughout the course, we'll be using the VS code extensively. It is not just an editor, the features supported by VS Code reduce the tasks of any developer significantly. Along with VS code, we will be installing a few additional extensions too.

System requirements for the VS Code:

Visual Studio Code is a small download (< 100 MB) with a disk footprint of 200 MB. VS Code is lightweight and should easily run on today's hardware.

How to install VS Code?

  • Now VS code would have detected your OS.
  • Download and install VS Code for your system (follow the instructions for installation)

After installing VS Code editor, you need to install some essential plugins to make the platform a better place to code. So, install these as well:

Now you’re all set with your environment.

Install/Update chrome​

Click here to download the installation file

  • If prompted, click Run or Save.
  • If you have chosen Save, double-click the downloaded file to begin the installation.
  • Now, start Chrome:

🚨 Note: If you've earlier used a different browser, like Internet Explorer or Safari or Edge, you can import your settings into Chrome.

If Chrome is already installed, make sure you have the latest version. To check this on your computer, open Chrome and follow the below steps.

  • At the top right, click More (three dots option).
  • Click update Google Chrome.

Important: If you don't see this button, you're on the latest version.

  • Click relaunch.

Summary

In this lesson, we have learned that:

  • Working of web
  • What is front-end development
  • Setting up a working environment for front-end web development

Useful resources for you

Now that you’re done with this lesson, here are some useful post-class reading links for you.

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

https://www.freecodecamp.org/news/beginners-roadmap-web-development/

Front-end