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.
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.
<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.
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, 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.
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.
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.
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.
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.
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.
We have provided some code to use as a template for a basic react website here.