Skip to content

Latest commit

 

History

History
74 lines (42 loc) · 3.95 KB

MAKEME.md

File metadata and controls

74 lines (42 loc) · 3.95 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

The first exercise is to create a local repository using GIT and link it to a remote GitHub repository. Go through the following instructions:

The next exercise is a short interactive course, that will take you through the basics of GIT usage:

The final exercise is a mini-course of Git and GitHub. Go through it and try to code along:

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.