CS DIY 101

CS DIY 101

Wally

Description

A simple blog framework following Flask's official tutorial

Pre-Reading

These are optional reading, you can skip them if you already know these topics. Alternatively, you can skip them and come back to it when you encountered them in the project.

HTML

Python

Git

  • Simple Git Tutorial: https://www.liaoxuefeng.com/wiki/896043488029600
  • Official Git Book (good if you want to dive a little deeper): https://git-scm.com/book/en/v2
  • 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.

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/

Blog Framework Project

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 above), 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 https://github.com/selfteaching/How-To-Ask-Questions-The-Smart-Way/blob/master/How-To-Ask-Questions-The-Smart-Way.md first.

Additional Exercises

These are not list by order, you can pick whichever interests you. The goal is to allow you improve your skill by expanding the existing codebase. Remember, keep your project in Git versions so it's easy to revert changes if you messed up.

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

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

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 page

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

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

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

Further Reading

These could be considered next steps if you are interested in expanding the project further:

HTML & CSS

Bootstrap

JavaScript

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org