Skip to content

Latest commit

 

History

History
85 lines (55 loc) · 4.54 KB

File metadata and controls

85 lines (55 loc) · 4.54 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. Prep exercises
  2. GIT exercises
  3. Responsive design challenges
  4. Code along
  5. PROJECT: Responsive website
  6. Optional: Flexbox games

1. Prep exercises

Prep exercises are exercises that you should work on before the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your mentor. Have a solution ready by Sunday as you may be asked to show what you did.

Inside your HTML-CSS fork, go to the folder week2. Inside of that folder, navigate to /prep-exercises. For each exercise, you will find a separate folder. The README explains what needs to be done. There will also be some questions at the bottom to think about. Go through them before the session on Sunday as it will be covered then.

2. GIT exercise

  1. Create a repository on Github called favorite-cmd-commands, make sure to check the checkmark about including a README file
  2. Clone that repository (Google how to clone a repository).
  3. Edit the README.md markdown file.
  4. Add bash commands that you like (at least 3) and style them as headers.
  5. Provide a short description (20 characters~) for each.
  6. Then git add, git commit and git push the file to your GitHub repository.

3. 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 websites. You have to learn how to do this too. It's not as intimating as it might seem; you're not going to build a separate 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 mini-course you'll get some practice in doing this:

4. 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.

5. PROJECT: Responsive website

Before you start this exercises, make sure to create a folder inside the hyf-html-exercises folder. Create a week2 folder and put this exercise files inside.

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, but you do not have to. It is up to you!
  • 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

6. Optional: Flexbox games

If you like learning in a fun way there are quite a few games on the internet that teach you the way flexbox works:

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 responsive website

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