Giters

bermarte / working-with-code

Push, Pull, Request, Fork, Edit, Commit, Preview, Lint, what are all these words!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Working with Code

“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.

Contents

Learning Objectives

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

TOP

Suggested Study

TOP

Week 1

Prep work

before class

Lesson Plan

during class

Before Break

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?

After Break

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.

TOP

Homework

after class

Before moving on, you will need to create an individual issue for this module:

Here's a checklist you can paste into your individual 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)

GitHub Profile README

Create a GitHub Profile README for your public profile:

Personal Home Page

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:

  1. Create a new repository on your github account named your-user-name.github.io (with or without a README.md)
  2. Turn on GitHub Pages
  3. Clone the repository to your computer (using CLI or GitKraken)
  4. Open the repository in VSC
  5. Open or create the README.md file, turn on Markdown Preview
  6. 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)

TOP

Class Recordings

  • 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

Class 9 & 10

Class 11 & 12

Tamer, Tiago, Unmesh, Nawang

TOP

About

Push, Pull, Request, Fork, Edit, Commit, Preview, Lint, what are all these words!

License:Other