Are you looking to become a more effective developer by improving your fundamental math skills without reaching for NASA-level calculations? Look no further!

At Scrimba, we’re are really excited to announce our new course ‘Practical Math for Front-End Developers’, which offers exactly that. In the course we build 3 projects:

1. A Shopping Cart, where we generate a list of products, calculate the total price of the products and apply a tax rate.
2. A Weekly Schedule, where we introduce the Date object, perform layout manipulation and learn about the reduce function.
3. A Monthly Expense Sheet, which brings together everything we’ve learned and gives us a few handy tips and tricks.

This course is brought to you by Ryan Gonyon, who has his own Twitch and YouTube channels.

With 5 years of Web Dev experience, a B.S. in Computer Science, and experience tutoring K-12 and University-level math, Ryan is the perfect tutor for this course. Head over to Scrimba to see what he has in store!

App Layout and CSS calc() Introduction

Click the image to access the course.

In this screencast, Ryan shows us how to build the outer shell of our applications by correctly sizing the <header>, <footer> and <main> tags with CSS variables and the calc() function.

We use overflow-y: auto; to ensure that the contents of the <main> tag do not extend over the footer.

* {
	--headerFontSize: 2rem;
	--headerPadding: 0.5rem;
	--footerFontSize: 1rem;
	--footerPadding: 1rem;
}

header {
	font-size: var(--headerFontSize);
	padding: var(--headerPadding);
}

main {
	font-size: 1.5rem;
	height: calc(
		100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(
				--footerFontSize
			) - (2 * var(--footerPadding))
	);
	overflow-y: auto;
}

footer {
	font-size: var(--footerFontSize);
	padding: var(--footerPadding);
}

#learn math #developers #course #front #machine learning