“I'm not a great programmer; I'm just a good programmer with great habits.”
Welcome to Hack Your Future Belgium. There is a lot of code, links, and browser tabs in your near future!
It'll take a little while to learn how to keep this all organized in your head and on your computer. If you're having trouble finding something, take a look through the links in your class repository. If you still cant find it, ask your classmates on Slack and someone will help you out!
This module's main objective is to get you comfortable with the workflows of programming and of Hack Your Future BE. The finished project won't be complex or impressive to the casual observer, but in order for you to complete it you will need to have a basic overview of the entire development process. Including: ideation, local development, pushing and pulling to github, and hosting static web pages.
- Learning Objectives
- Suggested Study
- Sundays
- Homework
- Class Recordings
- study.hackyourfuture.be
- home.hackyourfuture.be
Your Computer:
- Organize your work in your file system using a new
HYF
directory
Markdown:
- Markdown Basics (enough for a pretty README)
- Source code vs. rendered output
- Using a code formatter, live preview, and spell-check to write clean MarkDown code
GitHub:
- Sending Pull Requests on GitHub
- Turning on GitHub Pages for live websites
- Using Project Boards to track projects
- Using Issues to start a conversation about a specific ... issue
Git:
- Using Git to add and commit changes locally on your computer
- Using Git to pull and push changes between your computer and GitHub
Visual Studio Code:
- Installing and enabling plugins
- Opening folders in the side bars
- Adding, deleting and modifying files in a project folder
- Using a linter & live preview
- study.hackyourfuture.be/git-and-github
- Creating a GitHub Pages Website
- learngitbranching
- Git & GitHub for Poets
- First Week on GitHub tutorial from lab.github.com
- Getting Started with GitHub
- RogerDudler Git-Guide
- Git & GitHub for Poets: Intro to the Command Line
- Git & GitHub for Poets: Cloning Repo & Push/Pull
- Creating a GitHub Repository
- Creating a local repo and push
- Creating a GitHub Pages site
- Uploading your project to GitHub
- GitKraken: initialize a new project , add remote & push
before class
- Review the HYF Be Precourse, come ready with any questions!
- Watch at least the first 3 videos of Git & GitHub for Poets. This is an outstanding video series that will help you understand why you need Git & GitHub, with no code!
- Familiarize yourself with HYF Individual Assignments.
- Markdown CheatSheet
- Group Repo Examples
- relative vs. absolute paths
during class
Get to know your group and your local programming environment by writing and a folder of Markdown files. By break time each of you should have created a new directory in your computer just for HackYourFuture, and one new folder inside it containing a short intro to each member of your group. It should look something like this, but hopefully a little nicer ;)
Writing code is still writing! Take the time to proof read and edit your code. Your colleagues and your future self will thank you. Practice using the VSC plugins you installed with the Precourse to write correct markdown:
- Correct your spelling with Code Spell Checker
- Format your code with Prettier
- Fix any linting errors
- Preview the rendered Markdown, does it look like you wanted?
Create a repository on your GitHub account and push your new markdown folder to GitHub, finally turn on GitHub Pages for a live preview:
You may use the Terminal or GitKraken for this, whatever you find easier.
after class
Before moving on, you will need to create an individual
issue for this module:
- [New Issue] in the issues tab of your class repo
- Use the individual template
- More details in the student guidebook
Here's a checklist you can paste into your issue to track your progress:
- [ ] [Profile README](https://github.com/your-user-name)
- [ ] [Home Page](https://your-user-name.github.io)
- [ ] `/hack-my-future` directory on your computer (for keeping your work organized)
Create a GitHub Profile README for your public profile:
Create a home page using markdown (or HTML/CSS if you're tempted ;) in the your-user-name.github.io
repository on your GitHub account. Later on you can turn this repository into an amazing portfolio web site, but for now stick with the basics :)
Writing The Documents
The writing process should look something like this:
- Create a new repository on your github account named
your-user-name.github.io
(with or without aREADME.md
) - Turn on GitHub Pages
- Clone the repository to your computer (using CLI or GitKraken)
- Open the repository in VSC
- Open or create the
README.md
file, turn on Markdown Preview - Begin writing. Play around with tables, lists, links, emphasis, ... and there's not really much more to Markdown!
Don't make this exercise too difficult! The main goal is to become familiar adding/committing, pushing/pulling, using VSC, and writing clean code.
If you want an extra challenge try adding some extra pages to your site and linking between them. In the repository this will show up as multiple files above the README, on GitHub Pages this will become a fully navigable web page!
Can you figure out how to make something like a header/navbar using only Markdown?
Emojis and images won't show up in VSC previews but will show up on GitHub when you push. If you want to get extra creative by including images or emoji's, you'll need to push your code to GitHub frequently to see how it looks when it's live in the repo.
Creating Your Live Home Page
Turn on GitHub Pages, that's all you need to do to create a live web page!
After turning on GitHub pages, add this link as your home page on your github user profile (if you don't already have a personal web site).
Looking for a little more flare? Set a theme for your home page. (this will only work if you wrote your page in Markdown, not HTML)
- Students: Here you can find recordings of this module from past classes. Enjoy!
- Coaches: When sending your PR's with links please ...
- Indicate which class you were teaching
- Which week it was (if the module is more than 1 week)
- Give your name
- and a helpful description
- Wrap-up Session: Review
Tamer, Tiago, Marie, Unmesh, Nawang