Exploring Templates #
During the track lessons you will be creating the web app for the ISF Riddler. You should remember the Riddle database from the Networking Unit!
๐ You will be primarily focused on learning the Django template language uses and Bootstrap.
[0] Starter Code #
๐ Github Repo: github.com/Making-with-Code/lab_riddler_frontend
๐ป Install requirementspoetry install
poetry shell
[1] Model #
๐
You can find the Riddle
model in riddle_app/models.py
. It can be helpful to know the architecture of the model so you know what are you are able to display in the frontend.
๐ป
Firstly, let’s migrate
our Riddle
model into the database. Then, run the server.
python manage.py migrate
python manage.py runserver `
๐ป Visit 127.0.0.1:8000/ to view the app! As you are in the backend track, the website looks pretty boring…
[2] Explore Templates #
๐ป
Open up the files with: code .
๐
Explore the templates
the: riddle_app/templates
directory
๐ป
Open the different html
files and follow the instructions in the comments. The comments are denoted with a <!-- ๐ป -->
You will need to reference the Django template language documentation to made the necessary additions.
<!-- ๐ป Add the Difficulty for the specific riddle -->
To display the
difficulty
field in the full label, you will need to referenceget_FOO_display()
documentation
[2] Customize CSS #
Bootstrap is a massive CSS
framework library. It’s easy to get lost in it. It’s up to you whether you’d like to incorporate it.
๐ Start by taking a look at what’s available:
๐ป Customize the look of your site
- add
classes
andids
to thehtml
andcss
- use variables in the
css
to more easily change color themes
๐ญ Some ideas:
- display each riddle in
riddle_list.html
in a card - add custom styling to the
form in
riddle_guess.html
- incorporate a mobile friendly nav bar
[4] Deliverables #
โกโจ
๐ป Push your work to Github:
git status
git add -A
git status
git commit -m "your message goes here"
- be sure to customize this message, do not copy and paste this line
git push