Web development — lecture 1 — introduction

#css #html #frontend #javascript

About this series

In 2019, I started doing a course as volunteer lecturer. Course is on web development using ReactJS and here, I will be publishing all content that it will be used during course. Other materials I made for this course can be found at this website.

Why web

In this course I will be covering web development with focus on ReactJS library. Today, when saying web development, we are thinking about web pages, however, same technologies that are used in it can be used in many other areas. We can use JavaScript to make mobile applications, data analysis and AI, robotics even to program satellites. Those are all interesting fields, and reason why we are going to focus on web is because it is easiest to start.

Course overview

First what we will cover is technologies used and what is each used for. Those are HTML, CSS and JavaScript. If you haven’t heard of them, don’t worry, we will cover each, and after initial introduction we will go through each in more detail. With more complex projects, using only those technologies might be too complex. That is why we will look at ReactJS which we will use as an extra layer on top to help us build more complex and larger solutions.

Initially, to speed whole process up, we will use web site called CodeSandbox. Here we will be able to create projects in browser and try them out. No need for installation or any other setup.

Technologies

HTML

First technology we are going to mention is html. HTML is markup language. What it means is that when you build your website, HTML gives structure. Think of it as a Lego blocks. You can have many blocks and arrange them in many ways. There are different types of blocks, but they all end up giving structure.

CSS

Having just structure is usually not enough. Your web site needs to look pretty. If we come back to previous Lego example, imagine having only red blocks. Those can be nice, but having all in same color would be a bit boring. This is where CSS comes in. It enables us to define background colors, positions, sizes and many other things.

JavaScript

Now that we have structure and styling, we want our page to do something. Think of Facebook, Instagram, Spotify, YouTube etc. Those pages don’t just stand there and look pretty. You interact with them. You can send message, play video, like pictures, look for something and many more and that is where we use JavaScript. JavaScript helps us to create work our systems will do.