CS DIY 101 (Your First Coding Project)

Background

(This post used to live in telgraph, but now that I’m setting up my own blog, I decided to move it here.)

A lot of CS students or self-taught learners asked me about how to write a project or something practical, so here’s one I give to students I’m mentoring.

This is follow-along using Flask (a Python Web Framework)’s official tutorial adding extra resouces for pre-requisites and extra steps if you want to develop further.

I’m letting you read the actual Flask official tutorial instead of creating another complete tutorial for two reasons:

There’s no reason to re-invent the wheel. There’s plenty of tutorial online, and no need for yet another one.
the goal of this post is to help you finish the tutorial, and you can swap the actual tutorial part for anything similar instead of having to stick to the same one. e.g.:
- Django’s official tutorial is another good one if you want to try Django instead of Flask
- Ruby On Rail’s Guide is yet another one if you prefer Ruby instead of Python.

Who is This Post for

Mostly if you are someone with a little bit of programming experience (you know if/else, loop, plus some OOP), you should be able to follow along.

However, if you are brand new to programming, and want to learn to write something practical immediately, it might be doable with all the pre-reading and bunch of trial and error with some challenge.

Notes:

While following the Tutorial, do not copy-paste the code, instead type everything yourself. This will help you notice every detail. (The only exception I’ll make is the CSS files, it’s not necessary to understand this project).
When running into problems, try to read the error (if there is), re-read the Tutorial, compare your code with the sample, look at the reference docs (linked below), Google search. Troubleshoot at least an hour before asking someone else (that includes AI tools). This way you can develop your troubleshooting skills.
If you do need to ask questions, read How To Ask Questions The Smart Way first.

Pre-Readings

Feel free to skip any of these if you already know them

HTML

HTML Tutorial: https://www.w3schools.com/html/default.asp
HTML Form: https://www.w3schools.com/html/html_forms.asp

Python

Official Python tutorial: https://docs.python.org/3/tutorial/index.html, this is most compact and efficient if you already know some programming
(Alternative) Introducing Python, 2nd ed (Part 1.): https://www.oreilly.com/library/view/introducing-python-2nd/9781492051374/, this is more gradual but more friendly to beginners
(Alternative) Learn Python the Hard Way: https://learnpythonthehardway.org/. I personally like this book because it ask you to write actual Python files instead of using the Python REPL. This shows you how a Python program file gets run. Especially I’ve seen some people having trouble running a .py file despite finishing a Python tutorial.

Git

I recommend putting your project in a Git repo all the time, commit after each chapter, and you can try rollback/forward along with the record. And once you’re done, you can put everything on GitHub along with added README and additional features you’d add in the future.
Simple Git tutorial: https://www.w3schools.com/git/default.asp?remote=github
(Alternative) Official Git Book (good if you want to dive a little deeper): https://git-scm.com/book/en/v2

SQL (SQLite)

Knowing SQL is optional for this project, you can borrow the SQL queries from the tutorial at first. But this is needed if you want to add some additional features (see Addition Exercise)
https://www.sqlitetutorial.net/

The Actual Project

Environment Setup: https://flask.palletsprojects.com/en/2.3.x/installation/
Tutorial: https://flask.palletsprojects.com/en/2.3.x/tutorial/

Reference Resources

Flask main page: https://flask.palletsprojects.com/en/2.3.x/
Flask reference documentation, when you run into API you don’t understand: https://flask.palletsprojects.com/en/2.3.x/api/
Jinja2 HTML template reference: https://jinja.palletsprojects.com/en/3.1.x/templates/

Additional Exercises

Once you are done with the project itself, it’s time to improve your skill and expand your project with more features.

These are some ideas, feel free to pick and choose, since there’s no order in them. Remember to keep using Git version control so you can easily revert in case you made some mistake.

NOTE: remember to update your tests whenever you made changes to the framework.

Upload your project to GitHub and add a README.md file

Create an account at Github.com if don’t have one yet (this is probably one of the most important thing in your programming career).
Write a README.md file using Markdown under project root and push to GitHub, see a tutorial and cheatsheet
Example of a good README.md to mimick.
Your README.md project name, description, build/install instruction with prerequisite, and potentially screenshot and how to contribute.
This should be your habit for every project you build in the future
Type: polishing
Level: easy

Refactor the Create and Update page into one

Since Create and Update post page are very similar, try to combine them into one single page.
Type: refactoring
Level: medium

Add a Like button and Like count

Any modern social media has a Like or an equivalent. Try add one.
Notice: you will need to add an extra <form> in your HTML
Type: new feature
Level: medium

Add a user profile page

Add a page to display user info (we only have username for now) and their blogs only
Type: new feature
Level: medium

Change main page to excerpt and add a new page for the full blog

Display only a truncated preview in the index page
And add a new page to view the full blog
Type: new feature
Level: hard

Change your blog’s style with CSS

Read CSS tutorial if you haven’t learned CSS before: https://www.w3schools.com/css/default.asp
Give your blog some new style (color, layout, etc.).
Don’t spend too much time on this one, unless you really like CSS.
Type: expanding
Level: easy

Deploy your project to a production server

Using a public VPS (e.g. https://www.vultr.com/products/cloud-compute/, https://www.vultr.com/products/cloud-compute/). It’s not free, but having a private server is very useful throughout your programming career.
You can also use cloud providers such as AWS/Azure/GCP if you have student discount or trial period. Notice they can be very expensive.
You can use waitress from the tutorial: https://flask.palletsprojects.com/en/3.0.x/tutorial/deploy/.
But to deploy as a production website it needs to run as port 80, you would need nginx/Appache httpd to create a proxy server: https://flask.palletsprojects.com/en/3.0.x/deploying/. This step could be optional.
Type: expanding
Level: hard if you don’t much Linux server experience, otherwise this would be an easy one.

Build a new website! Now that you know how to use Flask

What else could you make? A shopping website? An image sharing (think Instagram)? An online messaging?
You can use the quickstart to remind you if you forgot anything: https://flask.palletsprojects.com/en/2.3.x/quickstart/
Use the API: https://flask.palletsprojects.com/en/2.3.x/api/ and the rest of the Flask documentation to guide you to use and learn new things: https://flask.palletsprojects.com/en/2.3.x/
Type: exploring
Level: easy-hard depending what you want to build :)