Get up to 80 % extra points for free! More info:

Solved tasks for the Sass CSS preprocessor introduction

Alright, we should already understand the basic ideas of the SASS preprocessor from the previous lesson, Introduction to the Sass CSS preprocessor. Let's try out our knowledge on practical exercises.

Each exercise contains a picture and a guide under it, in other words, information that can help you to write the styles. You can, of course, download both of the exercises finished using the link at the end.

Exercise 1

Let's create a simple web business card. You don't have implement switching between tabs, create only the HTML part and its styles.

A business card SASS exercise - Modern and Professional Web Portfolio

A simple web business card

We have to create the HTML code first, containing div.profile. Inside, there will be <ul> holding its items, each of the size of 1/6. The name in the center will be of the size 2/6. Later, you can come back and create a grid using loops. The div.profile element will also contain div.content inside. And in it, there will be a paragraph with some text.

The only thing left is to style the example using the following variables:

$background-color: #fff;
$text-color: #333;
$text-color-hidden: #aaa;
$border-color: #ccc;
$profile-width: 600px;
$gutter: 25px;
$border-width: 1px;

Exercise 2

In the next exercise, we'll create an invitation to a community meeting.

A simple meeting registration form - Modern and Professional Web Portfolio

A simple community event registration

This time we have to create an invitation to an event. First, we'll create div.content where everything will be placed. Inside, we'll have an image, an <h1> heading, a few paragraphs with the event description, an <h2> heading, and a sign-up form. he form will consist of a table in which the name and a confirmation of arrival will be entered. It will also include a submit button.

Style the invitation using nested selectors, variables, extensions, etc. You can use the following variables:

$text-color: #333;
$gutter: 20px;
$padding: 10px;
$content-width: 900px;
$item-width: 600px;
$h1-size: 40px;
$h2-size: 25px;
$line-height: 20px;
$table-background-color: #F6F6F6;
$table-text-color: $text-color;
$table-border: #C9CBCD;

In the "next lesson", Data types in Sass, we'll talk about Sass data types.


Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.


By downloading the following file, you agree to the license terms

Downloaded 14x (16.18 kB)
Application includes source codes in language HTML and CSS


In order to absolve this article, please pass all exercises above by submitting them.

Previous article
Introduction to the Sass CSS preprocessor
All articles in this section
Modern and Professional Web Portfolio
Skip article
(not recommended)
Data types in Sass
Article has been written for you by Honza Bittner
User rating:
No one has rated this quite yet, be the first one!
Everything is possible.