Skip to content

Latest commit

 

History

History
92 lines (61 loc) · 4.59 KB

File metadata and controls

92 lines (61 loc) · 4.59 KB

Homework HTML/CSS/GIT Week 3

Todo list

  1. Practice the concepts
  2. GIT exercise: animals repository
  3. CSS framework challenges
  4. Code along
  5. PROJECT: Responsive website

1. Practice the concepts

We'll start the week off with some more GIT practice! Go through the following:

  1. Learn Git Version Control (Scenario 1 - 4)
  2. How to Use GIT and GitHub

2. GIT exercises

Before you start any of the exercises, make sure to create a folder on your desktop that will hold all of your exercise files. Go inside the hyf-html-exercises folder. Inside, create a week3 folder and will hold this week's exercise files inside.

animals repository

Tip: make use of the CLI to practice your GIT skills. This not only teaches you how GIT works, but also how to work like a real software developer!

In this homework you'll be working with GIT and GitHub. Follow the steps to learn how to create a remote repository and work with it from your local machine:

  1. Create a repository on GitHub, called animals
  2. Clone the repository to your local machine, using the SSH URL
  3. Locally, create a file called "zoo.txt". Include 3 animals found in a zoo
  4. Add and commit the file to the local repository. Make sure the commit message is meaningful (ex. "created txt file with animal names")
  5. Push your commit to the remote repository, verify that it has worked on GitHub
  6. Go back to your local repository and create a branch called new-feature

Tip: in software, a "feature" is a technical term that points to any functionality that a user can derive benefit from. For example, Facebook has many features: the ability to make a profile, like a post, place comments, etc.

  1. Inside the new branch, create a file called "pets.txt". Include 3 animals that could be a pet
  2. Also, add 2 more animals to the "zoo.txt" file
  3. Add and commit the file to the local repository. Again, make sure the commit message is meaningful
  4. Push your commit to the remote repository, verify that it has worked on GitHub
  5. On GitHub, find out how to merge branch new-feature into master
  6. Merge the branches
  7. Switch back to branch master
  8. Pull the changes from your remote repository to your local repository, verify that everything worked

3. Framework tutorial: MaterializeCSS

In order to speed up development it's wise to know how to use a CSS framework. In this week's homework you're going to get familiar with MaterializeCSS, a CSS framework based on Material Design - a design language created by Google. Follow the playlist and code along!

4. Code along

In this code along you'll continue practicing your skill using MaterializeCSS. In the following video you'll learn how to build a responsive website, called TravelVille:

Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio!

5. PROJECT: Responsive website

Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio!

In this project you're going to rebuild the homepage of an existing responsive website. Choose one of the following:

You don't have to build everything, but include the following requirements:

  • Only rebuild the homepage (which should include a navigation bar, footer, the landing section and at least 2 other sections)
  • Write your CSS in an external stylesheet
  • You are allowed to use a CSS framework
  • Make use of flexbox
  • Download the assets (images, other forms of media) through the original webpage, or use your own!
  • Use media queries for both tablet and mobile (This might be same for the website you're making)
  • Make use of GIT and GitHub to keep track of your work. The name of the repository should web WEBSITENAME-clone

Deadline Tuesday 23.59 CET

SUBMIT YOUR HOMEWORK!

After you've finished your todo list it's time to show us what you got! The homework to be submitted this week is the following:

  1. GIT exercise: animals repository
  2. Responsive website

Go through the guide to learn how to submit your homework.