First Part

For this project we had 2 parts the first part was an introductory exercise where we were divided in teams and we had to research an up and coming css technique. I was put in the container queries group. So i decided to build a layout that scaled very nicely.

Site link:

https://codepen.io/Kitch41/pen/KKEOXgO?editors=1100

Second Part

For the second part of CSS we had to choose a theme to follow. There were 4 different themes that were pre made and you could also come to the teachers if you had a different idea.

1. Control Panel
2. Fireworks
3. Rubik’s Cube ( Requires you to complete a math test)
4. Fold a paper plane

This project was different from other projects since the only javascript that was allowed was this:

const ranges = document.querySelectorAll('[type="range"]');

const updateRange = range => {
	// the name of the custom property is the name of the input
	const rangeName = range.name;
	// the value of the custom property is the value of the input
	const rangeValue = range.value;
	// a custom property is set on the HTML element
	document.documentElement.style.setProperty("--"+rangeName, rangeValue);
}

ranges.forEach(range => {
	// the custom property is set initially after loading the document
	updateRange(range);
	
	// the custom property is updated when the input is changed
	range.oninput = () => {
		updateRange(range)
	};
});

This made you completely rethink how you would build your website.

I decided to choose the control panel combined with the fireworks. and i made something pretty awesome. I liked it so much i actually continued with it by adding javascript later on for another class i had to redo.

Github:

https://github.com/Kitch41/CSSttr

Site link:

Css to the rescue

My Opinion

My opinion on this class was overall pretty good. I liked the theme’s we got to choose from and i liked that we could choose our own way of building something within that theme. The help we got and the new things we learned were also very good. I liked the helping speakers a lot aswell since they helped me understand a lot more about css.