Skip to content

MAKEME.md

Latest commit

 

History

History
79 lines (50 loc) · 4.21 KB

MAKEME.md

File metadata and controls

79 lines (50 loc) · 4.21 KB

Homework HTML/CSS/GIT Week 2

Create a directory "week2" inside your HYF-Module-HTMLCSSGIT directory on GitHub. There should already be a "week1" folder that contains your homework from the last week.

Todo list

  1. GIT exercises
  2. Responsive design challenges
  3. Code along
  4. PROJECT: Responsive website

1. GIT exercises

Git branching homework:

  • Ask your teacher to create a repository on her/his Github account https://github.com/<TEACHER_NAME>/hyfclass.git for this homework.

  • Clone the repository (Google how to clone a repository).

  • Send the teacher your Github user name so that (s)he will give you write access to the repository.

  • You will receive an email notification when (s)he adds you as a collaborator.

  • Accept the invitation for collaboration.

  • Create a file YOUR_NAME-commands.txt.

  • Add bash commands that you like. Add description for commands.

  • Then git add, commit and push the file.

  • Add more files if you want to and practice with git log and git pull.

  • You should observe that you can see changes from your fellow students.

  • Do not merge the changes to master branch.

  • Do not make any changes to master branch.

2. Responsive design challenges

Making websites that are responsive to a variety of device sizes (in other words, that still "look good" on any device), has become the standard way of building. You have to learn how to do this to. It's not as intimating as it might seem; you're not going to build a separete page for literally every device size out there.

Instead, you'll be applying certain CSS rules only to certain device sizes: the average desktop (1024px and more), the average tablet (between 600px and 1024px) and the average mobile device (600px and below).

In the following two mini-courses you'll get some practice in doing this:

3. Code along

In the following video you'll be rebuilding a responsive HTML5 website. Put your focus on how the structure of the page is built: First HTML to provide structure & content, and then the CSS. Look at the HTML tags used and the names given to classes.

4. PROJECT: Drones website

In this project you'll be building on an existing project. It's your job to make it responsive and look organised on various devices.

Start off by downloading the HTML and images in the following folder.

You are going to write the CSS for this page, it is not allowed to change the HTML.

The page contains two grids: the first one should work using floats, the second using flexbox. Be careful not to mix the two!

Other than that you should use media queries. Here are the requirements for each device size:

  • On mobile phones (smaller than 600px): a two column grid, with the exception that the first item spans the full width
  • On tablets (between 600px and 1024px): a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns)
  • On desktops (1024px and up): a four column grid, with the exception that the first item spans two columns. - There should be some margin between the grid items

Make the page look beautiful by adding some more CSS! Include CSS rules for:

  • hover states for buttons
  • A distinct font-family, found from Google Fonts. Include using the font-face rule
  • animation using transition

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

SUBMIT YOUR HOMEWORK!

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

  1. GIT exercise #1 (the URL of the remote git_practice repository)
  2. The Drones website

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