Modern and professional web portfolio

HTML and CSS Modern and professional web portfolio

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.
FreeWritten by Honza Bittner
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.
FreeWritten by Honza Bittner
Exercises for the Sass CSS preprocessor introduction

Exercises for the Sass CSS preprocessor introduction

In these exercises, we'll test our understanding of Sass, to which we provided basic information previously.
FreeUnratedWritten by Honza Bittner
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.
FreeWritten by Honza Bittner
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.
FreeWritten by Honza Bittner
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.
PremiumWritten by Honza Bittner
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.
PremiumUnratedWritten by Honza Bittner
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.
PremiumUnratedWritten by Honza Bittner
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.
PremiumUnratedWritten by Honza Bittner
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.
PremiumUnratedWritten by Honza Bittner
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.
PremiumUnratedWritten by Honza Bittner
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! :)
PremiumUnratedWritten by Honza Bittner


 

Activities (3)