Skip to content

Latest commit

 

History

History
82 lines (53 loc) · 4.12 KB

MAKEME.md

File metadata and controls

82 lines (53 loc) · 4.12 KB
Raw

Homework HTML/CSS Week 1

Todo list

  1. Prep exercises
  2. Command Line Interface
  3. CSS Challenges
  4. Code along
  5. PROJECT: Digital Resume

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 week1. 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. Command Line Interface challenge

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

Using the CLI, create a plain text file (.txt) that contains the commands necessary to answer the following questions:

  1. How do I create a hidden file or folder? How do I display it in the CLI?
  2. How do I create multiple nested directories, like /c/Users/myusername/these/folders/are/just/for/fun?
  3. Write more than one command that will create a file that looks like the following (you are not allowed to use the newline character (\n)):
first message
second message

3. CSS Challenges

In order to improve you need to practice a lot! In the following challenges you'll work with CSS, starting from the absolute basics to building a page:

4. Code along

A big part of learning web development is through learning by example. In the following video you'll learn how to build a simple website, using basic HTML & CSS:

5. PROJECT: Digital Resume

Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.

In the following assignment you'll make your own Digital Resume. Here are the requirements that need to be fulfilled:

  • It needs to be one webpage
  • Your project folder should contain two files: a .html and a .css file
  • Include the following pieces of information:
    • Some personal information (Note: the page will be public on the whole internet for our review, so as a privacy-conscious individual, feel free to use fake information here)
    • A picture of you (or a fake one, https://thispersondoesnotexist.com/ provides AI generated faces)
    • A few lines about who you are
    • Education (list at least 1 education institute)
    • Work experience (list at least 1 workplace)

When writing the HTML include the following:

  • Different types of headings, like <h1> and <h2>
  • An unordered list (<ul>). Use this to list out your educational background
  • Another unordered list (<ul>).
  • An <img> tag (for your picture)
  • Some <p> tags

When writing the CSS include the following:

  • Some CSS properties, like: margin, padding, color, etc.
  • You are NOT allowed to use CSS frameworks (like Bootstrap, MaterializeCSS, etc.)
  • Bonus: look into using flexbox or grid

SUBMIT YOUR HOMEWORK!

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

  1. The CLI challenge
  2. A link to your deployed Digital Resume! Remember your CLI knowledge to figure out the URL to it (a webserver is just a computer and so the directories are part of the URL!)

Upload both in a repository to GitHub and then upload the link to it on the Trello board: "Feedback Assignments". Go through the guide to learn how to do this.

Deadline Tuesday 23.59 CET