You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Build A Travel Agency Theme With Materialize CSS](https://www.youtube.com/watch?v=MaP3vO-vEsg)
51
51
52
-
### 5. Optional: CSS preprocessors
52
+
### 5. Optional: Side project ideas
53
53
54
-
In the wild you may also encounter the following terms: Less, SCSS, Sass. These are CSS preprocessors that give you some extra functionality that the preprocessor will then convert to the actual CSS file. 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.
54
+
> 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. This is also a great time to learn new things as there are plenty of mentors available to help you out in the `#projects` channel on Slack! You will not get this amount of time and support once you start working. Have a look at the [hyf_projects repo](https://github.com/HackYourFuture/hyf_projects/blob/main/README.md#project-2-a-try-out-application) for more details.
55
+
56
+
#### 5.1 CSS preprocessor
57
+
58
+
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.
55
59
56
60
For more information, have a look at:
57
61
58
62
-[Sass vs SCSS vs Less: tutorial](https://marksheet.io/sass-scss-less.html)
59
63
64
+
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.
65
+
66
+
#### 5.2 Parallax effect
67
+
68
+
You may have seen some [beautiful websites](https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html) 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.
69
+
70
+
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.
71
+
60
72
### 6. Final notes
61
73
62
74
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:
@@ -67,8 +79,6 @@ In this module and especially this last week we have bombarded you with a lot of
67
79
68
80
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!
69
81
70
-
_Deadline Tuesday 23.59 CET_
71
-
72
82
## SUBMIT YOUR HOMEWORK!
73
83
74
84
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!
0 commit comments