Skip to content

Latest commit

 

History

History
84 lines (48 loc) · 6.19 KB

MAKEME.md

File metadata and controls

84 lines (48 loc) · 6.19 KB
Raw

Homework HTML/CSS/GIT Week 3

Todo list

  1. Prep exercises
  2. Practice the concepts
  3. Code along
  4. Optional: Practice using frameworks
  5. Optional: Side project ideas
  6. Final notes

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 week3. 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. Practice the concepts

We'll start the week off with some more GIT practice! Go through the following:

  1. Learn Git branching
  2. How to Use GIT and GitHub
  3. Git katas (Do 1-4 of the Basic Git Katas and have a quick look at the Katas that solve standard problems section so you know what to do when you encounter those situations. The rest is more advanced, but bookmark this page and go through them later on when you start getting more comfortable with Git basics)

3. Code along

In this code along you'll continue practicing your skill by building a fully responsive website:

Tip: Use GIT and GitHub along the way to practice!

4. Optional: Practice using frameworks

Some people love using frameworks, others like being in full control of the CSS. This is a personal thing and also differs per company so there is no one way that the world works here. If you have time and are interested, then have a look at the following tutorials for the different frameworks:

Bootstrap

Bootstrap is probably the most used CSS framework if a framework is being used. Have a look at the following links to know how to use it:

Materialize

In this section you're going to get familiar with MaterializeCSS, a CSS framework based on Material Design - a design language created by Google.

5. Optional: Side project ideas

A part of the HackYourFuture curriculum is to work on as many side projects as you can throughout the time you have. This is a nice way to add extra knowledge to your arsenal and show in your CV that you are motivated to learn new technologies. There are plenty of people available to help you out in the #get-help channel on Slack so definitely make use of that! Have a look at the hyf_projects repo for more details.

5.1 CSS preprocessor

In the wild you may also encounter the following terms: Less, SCSS, Sass. These are CSS preprocessors that give you some extra functionality when working with CSS. You can, for example, create certain blocks of css code (mixins) that you can then use in multiple places allowing you to make sure that if you change the css in that mixin it is changed everywhere automatically. The preprocessor will convert your code to actual CSS files and the browser will be none the wiser.

For more information, have a look at:

You can try to recreate your project from week 2 using one of these CSS preprocessors but you may need to add a couple more pages from the original website. The strength of the preprocessors comes when you have a lot of closely related css.

5.2 Parallax effect

You may have seen some beautiful websites that look more like art than a website. The techniques used in these websites are broadly called the Parallax effect and it works by making the website respond to mouse movements or scrolling. Imagine how a cool website like that would look on your CV.

Try to copy one of the examples! Note that you will need to have a little bit of JavaScript knowledge to do this so if you don't have any previous programming experience you may want to wait until you have done some of the JavaScript weeks.

6. Final notes

In this module and especially this last week we have bombarded you with a lot of different ways to create your styles. In the rest of the curriculum we will leave it up to you to decide what way you like to work. Per project that you do, think about how you want to manage your css. You can either:

  • Write the CSS yourself. This will allow you to have full control over the styles enabling you to make any changes you want, but will probably take some more time initially to make sure everything works.
  • Use a CSS framework. If you had time to go through the frameworks, you may decide that you want to use the speed that they offer and don't mind the loss of some customizability.
  • Use a CSS preprocessor. If you had the time to try these out and like that they solve a couple of problems you have writing the CSS yourself then use these. They require a little setting up though that could complicate things, so make sure you understand how that works.

You will always have to write some css yourself, but make sure to always choose only one way of working per project, otherwise you are going to create a mess! If you are up for the challenge, then feel free to try different ways per project. It's always good to try different things!

SUBMIT YOUR HOMEWORK!

There is no homework this week, spend your time working on the parts you found difficult or copying another website like you did last week!