Skip to content

Latest commit

 

History

History
113 lines (98 loc) · 5.54 KB

README.md

File metadata and controls

113 lines (98 loc) · 5.54 KB

Winter 2017 Workshops - Illinois Safe Schools Alliance

This is a GitHub repository for a web development project by Uchicago Techteam, Winter 2017.

Goals

  • Learn how to use terminal and Github.
  • Learn HTML, CSS, and Chrome DevTools
  • Learn how to use the Squarespace platform
  • Create a new website for Illinois Safe Schools Alliance with cleaner design and added functionality.

What you will do

  • Go over basic HTML/CSS concepts
  • Practice HTML/CSS skills with exercises that will be uploaded here
  • Using Chrome DevTools would be helpful
  • Compile a list of pages/files we need to relocate to the new website (Week 1~2) and finalize layout/page structure
  • Once the list is complete, start adding pages/files using the Squarespace platform.
  • I may assign some additional readings that could help you understand web development better.

Useful Links

  • Current Website for Safe Schools
    • Alternative web designs our client loved: ICAH, BYP100
    • Previous website created by Techteam using Squarespace: Green Star Movement
    • NOTE: You must log in with administrator account to gain access to the list of available pages and files.
    • The list of pages and files can be found here.
  • Squarespace
    • This is a web development platform that allows simple, user-friendly interface for editing HTML/CSS
    • As per our client's request, we will be using the pre-built Sonora template in particular.
    • Squarespace User Guide
      • Later I will update a list of articles in this portal that might be helpful in some of our tasks.
  • HTML/CSS Tutorial
    • A few of these lessons may be given as assignments. (Don't stress out! We will also go over these during the workshops)
    • Some other resources (Feel free to learn for yourself)
  • Useful Websites (More to come)

Getting Started

  1. Install GitHub Desktop - Within the package, we will mostly use Git Shell so that you could contribute to this GitHub project.
  2. Create a GitHub account if you don't have one. - Once you create an account, verify your email address - Let me know what your account name is, and accept my invitation to this project.
  3. Install Chrome if you don't have it already. - We will be using Chrome DevTools to easily inspect HTML elements and its CSS styling.
  4. Install a text editor. - We will be using a text editor to edit HTML and CSS files. - Some options

GitHub Workflow

  1. Open Git Shell and navigate to a directory where you want the project files to be.
Useful Git Shell commands

# print current working directory
pwd
# check what files and folders are inside the current directory   
ls
# move to a child directory
cd <directory> 
# move upwards to a parent directory
cd ..
# create a new directory
mkdir <directory name>
  1. Clone this repository in your chosen location. 
git clone https://github.com/gwkim1/techteam-safeschools
  1. Create your own branch
# Check what the current branches are. (Initially there would only be master)
git branch
# Create your own branch
git branch <your_name>
# Move to your new branch (You will only be making changes within this branch and merge with master branch later)
git checkout <your_name>
  1. Create your own repository
mkdir <your_name>

  • You will be submitting the HTML/CSS exercises, so you should create a folder of your own when you submit.

    1. Update your clone so that it is up-to-date with my version
    git pull upstream master

  • This won't be needed when you first clone this repository, but would be essential for your later contributions as I will be constantly updating this repository with new resources.

    1. Create/Edit files in your clone repository using text editor.
    2. Add, Commit, and Push your change
    git add <filename to add>
git commit -m "message that describes what changes you have made"
git push

# When you first create your branch, you will need this command as well
git push --set-upstream origin <branch_name>
    1. Send a pull request.
    • Click on the branch button and click "new pull request" button for your own branch
    • Later I will check on your changes and merge them to the master branch.
    1. For every new changes, repeat Step 5 ~ 8.