C/C++ week
Save up to 80 % on our C and C++ e-learning courses. Only this week!
Get up to 50 % extra points for free! More info

Modern and Professional Web Portfolio

The course which describes designing a professional web portfolio step by step, using modern web technologies.

Preparations and configuration

Lesson 1

Preparations and configuration

The article contains basic information for professional web development. It will introduce you the appropriate languages and help you set your editor/IDE.
Written by Honza Bittner
Free Show description
Introduction to the Sass CSS preprocessor

Lesson 2

Introduction to the Sass CSS preprocessor

The tutorial will introduce you to the Sass CSS preprocessor. We'll introduce its advantages over classic CSS and learn basic features of this language.
Written by Honza Bittner
Free Show description
Solved tasks for the Sass CSS preprocessor introduction

Exercise

Solved tasks for the Sass CSS preprocessor introduction

In these exercises, we'll test our understanding of Sass, to which we provided basic information previously.
Written by Honza Bittner
FreeUnrated Show description
Data types in Sass

Lesson 3

Data types in Sass

We'll try different data types in the Sass CSS preprocessor. E.g. numbers, strings, colors, booleans, lists, or maps.
Written by Honza Bittner
Free Show description
Loops and @media in Sass

Lesson 4

Loops and @media in Sass

Explanations and practical examples of loops in the Sass preprocessor and usage of @media nesting.
Written by Honza Bittner
Free Show description
CSS reset and the HTML5 layout

Lesson 5

CSS reset and the HTML5 layout

In this tutorial, we'll show how to create a CSS reset, the HTML 5 layout, and how to support HTML 5 elements in older browsers.
Written by Honza Bittner
PRO Show description
Design and rules

Lesson 6

Design and rules

In this tutorial, we'll learn to create wireframes for modern web presentations. We'll talk about important webdesign rules for quality CSS outputs.
Written by Honza Bittner
PROUnrated Show description
Body and the header

Lesson 7

Body and the header

In this tutorial, we'll prepare the files for our modern web portfolio and we'll code its header in SASS and HTML 5.
Written by Honza Bittner
PROUnrated Show description
Content styling

Lesson 8

Content styling

In this tutorial, we'll code and style the content of our web portfolio in HTML5 and SASS. We'll professionally style paragraphs, texts, links and buttons.
Written by Honza Bittner
PROUnrated Show description
The menu

Lesson 9

The menu

In this tutorial, we'll learn how to code and style the sidebar menu of a modern website. We continue developing a professional web portfolio from scratch.
Written by Honza Bittner
PROUnrated Show description
Continuing with the menu

Lesson 10

Continuing with the menu

In this tutorial, we'll finish the JavaScript navigation menu for our modern web portfolio, we'll code toggling, circles, and social boxes.
Written by Honza Bittner
PROUnrated Show description
Finishing

Lesson 11

Finishing

In this lesson, we'll finally finish the whole website! We'll play with JavaScript and add animations, which will be fun! :)
Written by Honza Bittner
PROUnrated Show description


 

Activities (6)