media-floppy.png Download files for this lesson

We will now create a webdesign. We will convert the webdesign to HTML and CSS files. All of our code should be within the <body> and </body>.


The header should include a logo, navigation, search and login. We will start by defining <header> and </header>.

<!-- Header -->
<!-- //Header -->


First we need to create a logo. The best program to do this in is Adobe Photosop. Head over to and download a trial version of the software to create your logo.

Open Photoshop and click File->New.
Name: logo
Width: 180
Heigt: 140

Figure: New photoshop image

Select the colors on the bottom left.

Figure: Colors in Photoshop.

When you click the color you will get the Color picker. Select a grey color and a pink color. The color codes are # 9f9f9f and # bd003e.

Figure: Colors in Photoshop.

Add the logo text to the photoshop image. I added the text Animaltalk.

Figure: Add text to the image.

We will add a custom shape to the logo. Click the Custom shape tool.

Figure: Custom shape tool.

Select the shout out shape.

Figure: Shapes

Zoom in to enarge the image.

Figure: Zoom in in Photoshop.

Add a shout out shape.

Figure: Adding shout out in photoshop using the shape.

Move the layers in photoshop making the Text on top, then Shape 1, then Background.

Figure: Layers in Photoshop.

Select the Rounded Rectangle Tool.

Figure: Rounded Rectangle Tool.

Select the white color (color code # ffffff).

Figure: Selecting color white.

Add the shape over the letter "n" in the image.

Figure: Adding rounded rectangle over the n.

Figure: Result zoomed in.

Figure: Result actual size.

You can download my photoshop file logo.psd and logo.png.

Logo HTML code

The logo will be inside the header, on the left side. To enable this we will create a <div> with the id "header_left".
Inside this we create a link to index.php with <a> tag. We will create a image to our logo.png file with the <img> tag.

<!-- Header -->
        <div id=\"header_left\">
            <a href=\"index.php\"><img src=\"_webdesign/images/logo.png\" alt=\"logo.png\" /></a>
<!-- //Header -->

Logo CSS code

We wanted the logo to be at our top left. We also want to add some padding so that it doesnt get sticked in the corner. Padding is the same as air.

We will create a section for header and a sub section for #header_left.

* File: _webdesign/master.css
* Version 01.42 22.04.2017
* Copyright (c) 2008-2017 S. Ditlefsen
* License: GNU Public License

/*- Body ---------------------------------------------------------------------------- */
body {
    font: normal 15px Tahoma, Arial, Helvetica, sans-serif;

/*- Header --------------------------------------------------------------------------- */
	padding: 10px;

	/*- Header left -------------------------------------------------------------- */
		float: left;

Status check

You should now be able to se your website with a logo and the text.
Please check my files and compare it to your files.

go-previous.png Webdesign

start-here.png Index

go-next.png Main navigation

Add comment






No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.