Skip to content

Home

Jump to bottom
Nam Wook Kim edited this page Feb 20, 2018 · 6 revisions

Coding Lab 2 Instruction

Preparation

  • Install Git
  • Install VSCode
  • Install VSCode LiveServer Plugin

Github + Hosting

1. Fork the coding lab 2 repository to your Github account

Click "Fork" on the rightmost side.

2. Go to the forked repository in your Github account and click Settings

3. Scroll down to find Github Pages, and set the source to "master branch" and click "Save".

4. Check if you can access to the website online, hosted from the forked repository.

You should be able to access the website using this url: [username].github.io/coding-lab2. Just replace the 'username' to your username. The website should look like this:

Coding

1. Copy the url of the forked repository.

2. Open VSCode and Click "View > Command Palette" (Shortcut: Cmd + Shift + P on Mac).

3. Type Git Clone and enter.

3. Paste the repository url.

4. Type a local repository folder to save the remote repository code

5. Open the local repository folder

You can now work on the coding activity parts! The description of each todo item is written in the index.html.

TODO 1: Apply a different background color to the navigation bar.

Hint: http://next.materializecss.com/color.html

Before:

After:

TODO 2: Make the button look smoothy and shiny!

Hint: http://next.materializecss.com/buttons.html

Before:

After:

TODO 3: Make the list better and collapsible.

Hint: http://next.materializecss.com/collapsible.html

Before:

After:

TODO 4: Add a carousel component below.

Hint: Find a carousel component on your own: http://next.materializecss.com/

This is the carousel component from Materialize:

TODO 5: Make the team UI component responsive!

That is, show two cards per row on a medium screen and one card per row on a small screen. Hint: Modify class names: http://next.materializecss.com/grid.html

On a medium screen:

On a small screen:

TODO 6: Add a new section and experiment with various UI components

There is no instruction for this. Please feel free to explore on your own!

Update the Remote Repository

1. Commit your changes directly in VSCode

Click the third icon on the sidebar. This allows you to graphically run Git commands. Click "+" icon to state your changes, write commit messages in the input box, and click "Check" icon to commit the changes.

2. Push your changes to the remote repository

Now check your website online again!

Clone this wiki locally