Exercises for the Sass CSS preprocessor introduction

HTML and CSS Modern and professional web portfolio Exercises 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

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

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.


 

Download

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

 

 

Article has been written for you by Honza Bittner
Avatar
Do you like this article?
No one has rated this quite yet, be the first one!
Everything is possible.
Activities (3)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!