Web Development

What is web development?

Web development is a key skill for many software engineers. Have you ever wondered what actually goes into making a site like Google or GitHub? Web developers are the ones responsible for linking the logic of the website (back-end) to how it’s presented to users like us (front-end). There are a lot of key components to web development, so for this guide, I’m hoping to introduce you to some key concepts and helpful resources to make your first website.

The biggest distinction in web development is front-end vs. back-end. Front-end refers to the creation of the actual webpage, as well as the JavaScript that it uses to make calls to the back-end. Back-end is what receives requests from the front-end, and provides data, information, or whatever else it might ask for. The libraries and languages used for each one can be very different, so I’ve placed separate tutorials for each of them in this folder. Happy web developing!

Front-end Development

The distinction between front-end and back-end is crucial. Front-end code refers to what creates the webpage that users see, and the primary languages used in front-end development are HTML, CSS, and Javascript (JS). HTML, or HyperText Markup Language, is what defines the content on a webpage, while CSS, or Cascading Style Sheets, is what helps format it to make it look nice. Using just these two, you can make some really cool looking sites, but they won't actually be able to interact with running code unless you make use of JavaScript. While there are plenty of frameworks and tools to make front-end development easier, knowing these three is vital to becoming a good web developer. I've linked some helpful tutorials for each of these 3 below. I recommend starting with HTML, and then moving on to CSS and JavaScript when you feel comfortable.

• HTML 1, HTML 2, HTML 3
• CSS 1, CSS 2, CSS 3
• JS 1, JS 2

One important thing to remember, which may seem rather trivial, is to ensure you have the correct file types for each type of file. HTML files should use the .html extension, and CSS/JS files should use .css and .js respectively. Without these, your website will not know which files to look in for which information, and stuff won't work properly.

Linking HTML, CSS, and JavaScript

The best way to use these three languages is to have them in their own files, and link them through the header of your HTML file. Each HTML file should have a tag somewhere towards the top, and inside this tag, you'll want to link your CSS and JavaScript like this:

<link rel="stylesheet" type="text/css" href="[NAME OF CSS FILE HERE]"/>
            <script src="[NAME OF JS FILE HERE]">
            

If you need your files linked in a specific order, make sure to get the order right so they can find the correct information. Also, the most common names for files are index.html, style.css, and app.js, which you may find all over the tutorials.

CSS Warning

One of the most common bugs beginners face in front-end development cycles is updating CSS but it not showing up on the HTML page you have pulled up, even if you refresh. This is usually because your web browser went ahead and stored your old CSS file so it wouldn't have to access it all over again from the file system, and is therefore not seeing any changes you recently made. If you want to force your browser to pull the new CSS file, you'll need to delete its cache/memory by doing a hard refresh, which is Ctrl + f5, at least on Windows.

Back-end Development

Back-end development, as I mentioned earlier, is the process of coding an information base for the front-end. It's main purpose is to respond to the front-end whenever it receives a request, while also running any data calculations or logic. Most websites have a back-end that is split into two sections; a middleware section and a database section. Databases have their own folder in this guide, so I will go into middleware here.

Popular Libraries

There are plenty of popular ways to create HTML backends, so much so that your favorite language probably has a method for doing so. Old sites rely on PHP, while newer ones rely on more robust languages like Java and Python. I've attached links here for all of my favorite back-end libraries, but keep in mind there are plenty more than this.

• PHP
• Flask (Python)
• Spring Boot (Java, somewhat complicated)

As usual, it never hurts to know more than one of these, but I think it's wisest to pick one and stick with it until you get really good at it. Flask is a perfect middle-ground for beginners: it is lightweight and easy to use, but has the same structure as many back-ends across the tech industry.

Basic Flask Structure

I've placed a hello world Flask file in this folder, and there are a couple key things to note. The following line is what defines the url to go to.

@app.route('/hello')
            

This line basically says: "When someone types in "localhost:5000/hello" in to their browser, you will return the following code." The rest of the code defines what to return. While it's a simple String for now, it can be any sort of data structure in a JSON format, and you'll find more information on this in the Flask tutorials.

Running your Flask app

Once you've got the hello world file saved, running your app is relatively easy. Find the file in your command prompt or terminal. If you need help doing this, check out the getting-started-terminal folder in this guide. Once you're there, you need to set the environment variable FLASK_APP to be the name of your python file. For example, if you called your file hello.py, you need to write either set FLASK_APP=hello.py into the windows terminal or export FLASK_APP=hello.py in a Linux terminal. Finally, just type the command flask run, and you should be able to see the following output:

 * Serving Flask app "application.py"
            * Environment: production
              WARNING: This is a development server. Do not use it in a production deployment.
              Use a production WSGI server instead.
            * Debug mode: off
            * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
            

If you see this, congratulations! You've successfully run your Flask app. All you need to do to see it is go to http://127.0.0.1:5000/hello or whatever URL you were given in a browser like Chrome, and you should be able to see your returned message.

How can I get started

We have provided some code to use as a template for a basic react website here.