Skip to content

Latest commit

 

History

History
87 lines (58 loc) · 4.9 KB

MAKEME.md

File metadata and controls

87 lines (58 loc) · 4.9 KB
Raw

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

Tip: Use GIT and GitHub along the way, so that you can practice it!

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:

  • Create a completely new repository on your GitHub for your website, you can name it WEBSITENAME-copy
  • Create an index.html to make your HTML
  • Design-wise it should be similar so the fonts, icons, text, etc. should look the same as the original
  • Only rebuild the homepage (which should include a navigation bar, footer, the landing section and at least 2 other sections. A section is one part of the website that contains information and that needs to adjust based on the screen size. A list of company logo's or a single button is not considered a section!)
  • Write your CSS in an external stylesheet
  • You are allowed to use a CSS framework if you have experience in it, 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)
  • Deploy your website using Github Pages! It is very similar to what you did in week 1, have a look at the guide if you forgot how to do it.

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 (the URL of the remote favorite-cmd-commands repository)
  2. A link to your repository of your copied website
  3. A link to your deployed copied website

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