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

Lesson 1 - Preparations and configuration

Welcome to the introductory lesson of the creating a modern portfolio course. We are going to introduce the most appropriate languages you will need for effective development and design of modern websites. If you don't know the HTML and CSS basics, read the Make your first website, step by step! series first.

Motivation

To start out with the right motivation, let's look at the final image of the website we're going to create from scratch in this course:

Modern and professional web portoflio - Modern and Professional Web Portfolio

Editor/IDE

The basis of successful website development is a good editor or IDE. The better editor/IDE you will have, the faster and more quality code you'll write, thanks to features like hinting, syntax highlighting or error notification. Personally I like to use Sublime Text 3 text editor, but if you prefer something more robust like IDE, I recommend you PHPStorm; it is paid however.

Sublime Text - Modern and Professional Web Portfolio

Sublime Text 3 text editor

Appropriate languages

To choose a good language is yet another very important part when developing a website. Languages that are widely supported and efficient to work with. I think we should use languages HTML5 and CSS3 for sure, which are a widespread standard in the web development area. We're going to use these languages for the layout and styling of our website. We'd also like to add some effects to the site, some animations; in that case let's use Javascript and its jQuery library for that.

To save trouble with CSS, which could have hundreds, sometimes thousands of lines of code, we're going to use a CSS preprocessor. We'll talk about the preprocessors briefly in the next lesson. In this series, we're going to use the Sass language. We can find more information about it in its documentation at http://sass-lang.com/.

Sass is a language that makes writing styles easier. It provides us variables, if-statements, loops, mixins, mathematical operations and more useful functions such as darkening colors by X percent. Sass has two syntax types - we'll use SCSS syntax (Sassy CSS) which is more similar to the CSS syntax and is easier to read for those, who have never worked with preprocessors.

Webdesign

Every website is based on some kind of graphic design, being drawn by an experienced designer is the best-case scenario, of course. The design could be created using two different basic approaches: creating the design while coding - which is surely the worst mistake you can ever make - or using a design drawn by a designer - 'image', in other words.

Let's create an 'image' - as a designer would do. We can use any graphics editor we want - Photoshop, Inkscape, Gimp, etc. - or the simpler method, using a pen and paper. We can draw the picture as a full design, or just the layout which would be a wireframe or sketch.

In this tutorial, we're going to create the graphic design as a wireframe which we're going to introduce in the following lessons.

Analysis

Once we have the wireframe, we have to analyze and think about the importance of individual elements in the design. The important parts will be drawn first, the less important ones later - e.g. we draw the menu itself first, its items later.

The next thing to do is to code the website first and write the JavaScipt effects additionally. That relates to the fact that the website has to be fully functional and controllable without Javascript as well - excluding special web pages, where Javascript plays the main role.

Installing Ruby

Since Sass has to be compiled to CSS and its compiler is written in RUBY, we have to download and install RUBY first.

Windows

The installer for Windows can be found at http://rubyinstaller.org/downloads/. We have to make sure to check the "add ruby executables to your path" button, which will create a system variable for us.

Installing Ruby Sass compiler on Windows - Modern and Professional Web Portfolio

Installing Ruby on Windows

Linux

If you use Linux, you can use the terminal to install Ruby using a command:

for Debian or Ubuntu:

sudo apt-get install ruby

or for CentOS or Fedora:

sudo yum install ruby

Mac

Everything should be installed in the system already on Mac.

Installing Sass

Let's install the Sass compiler now.

Windows

Open the CMD console and run:

get install sass

Linux and Mac

Open the terminal and execute:

sudo gem install sass

Everything should be ready for compiling Sass to CSS now.

Sass in Sublime Text

Sublime Text can call the compiler with predefined arguments. That means we don't have to work with the compiler directly.

First install the Package Controll package, we'll use it to download a plugin for Sass syntax highlighting.

Open the command list (CTRL + SHIFT + P) and find the Package Control: Install Package option. If you wait for a second a new table will show up; type "Sass" in it. Several options will appear and probably the first one will be "Sass" itself, let's download it. Highlighting should be set automatically, if not, set it manually in the command list, typing "Set syntax: Sass".

There is also a compiler plugin which I don't recommend, let's create our own compiler setup, using the code I have prepared.

{

    "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

Download the code, name it SASS.sublime-build and insert it into the folder %AppData%\Roa­ming\Sublime Text 3\Packages\User.

After pressing CTRL + B**, or Menu->Tools->Build, our file will be compiled.

The resulting CSS file will be created in the css/ folder of its parent folder, we managed to do this by using:

${file_path}/../css/${file_base_name}.css

If you would like to change the destination folder, you can do so modifying the command above.

There is a possibility of some errors to occur; if it's related to UTF-8, you probably have your file in a folder which is named using accent characters. Get rid off them and everything should work.

Sass in PHPstorm

It's easier to use Sass in PHPstorm. In the project folder, create a Sass file; an option enabling to add a watcher should appear. Confirm and press Menu->File->Settings, find the File Watchers item. If we have no watcher added, click the plus button and add one for SASS(SCSS). IDE automatically fills in the information and compilation works right away when saving the file. Make sure to check "Track only root files" button.

PHPstorm will also automatically highlight the syntax and hint smartly not only the basic Sass functions but also our own ones.

To change the target directory - in our case to the css/ directory- modify the value of "Output paths to refresh" in the watcher settings and the argument (the part after the colon) to

$ProjectFileDir$/css/$FileNameWithoutExtension$.css
Configuring the SASS preprocessor in PhpStorm - Modern and Professional Web Portfolio

Changing the target folder in PHPstorm

That's all for this lesson, in the next lesson, Introduction to the Sass CSS preprocessor, we're going to introduce the Sass basics to work effectively in it and show some differences compared to CSS.


 

All articles in this section
Modern and Professional Web Portfolio
Skip article
(not recommended)
Introduction to the Sass CSS preprocessor
Article has been written for you by Honza Bittner
Avatar
User rating:
1 votes
Everything is possible.
Activities