1
As a first step I thought what kind of website I want to make. I defined for myself which information I want to put in it and according to that I thought about website structure. Then I made a rough sketch.
2
Next step was preparing design. As I planned to use only vector graphic I made my design prototype in Illustrator.
3
Then I started preparing my code. At the beginning I did not thought about visual appearance and did not try to make it look as on my design project. At first I prepared code and divided it into separate blocks so it would be easy to work with it. I started with the main page of website. For every element I made a separate div and gave it class name, so I could style it directly in css.
4
For the block of topics I made separate container, which contained separate div for each block and inside it two separate divs for title: topic and week number. The last div was meant for footer.
5
Next step was making css file to give the website desirable look. To make your css file work you have to connect it with html by putting link in the head of html file.
6
In css file in body I set up font for the whole page, then styled navigation buttons and applied hover effect on it.
7
As the central part on webpage consist from the logo, my name and my profession I set style for it.
8
Next part is for the blocks of topics. At first I made a style for .project container so all black blocks are placed in colums with 3 in a row. All properties of blocks itself was set in .project. Also in .topic and .week you can see style for text title of each block. For transition of color when mouse points the block settings where made in .project and .project: hover.
9
For every page of site I created a separate html file with linked css file. As I used the same navigation on every page some parts of code was copied and applied to other pages.
10
On the page "About me" I placed photo and text next to each other. For that I used function float as seen on the photo.
11
If you want to add video from YouTube you have to go to "Share" (on the Youtube page) and then select "Embed"
Then you will see window with the special code which you have to add to your html file. In this code you can set desirable width and height. More styles you can apply in css file.
