Simple website design and code-Part 1

We are going to design and code simple website. Part 1 will be GIMP design of home page, Part 2 Slicing GIMP design (home page) and Part 3 will be code.

Step 1 - What you need

GIMP
A code editor (Notepad++, Sublime Text 2 or 3, or any other)
Basic understanding of how HTML works, basic syntax and tags
Basic understanding of CSS, also you should understand how selectors work and be familiar with basic properties.
A browser Chrome, Firefox ...

Step 2 - What we are making

We will make a very simple home page, with four basic elements: header, content, sidebar and footer.

Tip: when you make some changes to the document, press CTRL+S to save document.
Step 3 - Let's start

Open up new GIMP document (CTRL+N), for example, 1100px by 1200px.

Save file, for example, first-website.xcf.

We are going to drag in vertical guides at the 100, 400, 700 and 1000px.
Choose you backround color, mine is #bbd3df. Press CTRL+S to save changes.

Step 4 - Header

Create new layer (Shift+CTRL+N), rename it to header and click OK.

Select rectangle tool (R) and draw a big, blue box at the top of the document, mine is 170px high.

Select Bucket Fill Tool (Shift+B), click on foregorund color and pick the color #22b5ea. Fill the rectangle.

From top menu, click Select -> None (Shift+CTRL+A) to deselect.

Draw a small (in height), dark blue bar at the very top of the page. Create new layer (Shift+CTRL+N), rename it to top bar and click OK.

Select rectangle tool (R) and draw about 40px high rectangle.

Select Bucket Fill Tool (Shift+B), click on foreground color and pick the color #134659. Fill the rectangle.

From top menu, click Select -> None (Shift+CTRL+A) to deselect. Press CTRL+S to save changes.

Step 5 - Navigation bar

Select header layer and choose Move Tool (M). Move header rectangle down, below top bar.

Now we are going to add another bar to the bottom of the blue one.
Select top bar layer. Create new layer (Shift+CTRL+N), rename it to nav bar and click OK.

Select rectangle tool (R) and draw rectangle about 45px high. While still selected pick colors for gradient. Select foreground color #2782a4 and select background color #7bc8e5.

Select Blend Tool (L),

Mode: Normal, Opacity 100%,

Gradient: FG to BG (RGB), Offset: 0.0, Shape: Linear,

Repeat: None, Dithering: chek box, Adaptive supersampling: leave blank.
So with Blend Tool selected, press CTRL and click from bottom of rectangle to top.

From top menu, click Select -> None (Shift+CTRL+A) to deselect. Press CTRL+S to save changes.

Step 6 - Footer

Draw a dark blue box at the bottom of the page.Select top bar layer. Create new layer (Shift+CTRL+N), rename it to footer and click OK.

Select rectangle tool (R) and draw rectangle about 65px high. Select Bucket Fill Tool (Shift+B) and pick the color is #3086a6. Fill the rectangle.

From top menu, click Select -> None (Shift+CTRL+A) to deselect. Press CTRL+S to save changes.

Step 7 - Logo

For the logo, we are going to draw a rectangle.Select footer layer. Create new layer (Shift+CTRL+N), rename it to logo and click OK.

Select rectangle tool (R) and draw rectangle about 65px high.

Select Bucket Fill Tool (Shift+B) and pick the color is #197ea4. Fill the rectangle.

From top menu, click Select -> None (Shift+CTRL+A) to deselect. Press CTRL+S to save changes.
Select logo layer. Select Text Tool (A).

Over rectangle that we just created, draw rectangle for our text. From Toolbox, under Color: pick white color - #ffffff.

Click in rectangle and GIMP Text Editor will pop up. Type in text, LOGO.

For Text, choose Font you want, I chose Sans Bold, Size: 32px. Click close button.

Click Move Tool (M), click on text LOGO and align text with top, left, bottom and right arrows. Press CTRL+S to save changes.

Step 8 - Tagline - In a few words, explain what this website is about.

Select logo layer. Select Text Tool (A) and in line of logo, draw rectangle for our tagline. From Toolbox, under Color: pick white color - #ffffff, or the color you like. Click in rectangle and GIMP Text Editor will pop up. Type in your tagline - "Here add tagline". For Text, choose Font you want, I chose Sans Bold, Size: 22px. Click close button.

Click Move Tool (M), click on text "Here add tagline" and align text with top, left, bottom and right arrows. Press CTRL+S to save changes.

Step 9 - Navigation links

Write the navigation links and space them about evenly.
a) Select Here add tagline layer. Select Text Tool (A). Over nav bar that we created earlier, draw rectangle for our navigation links. From Toolbox, under Color: pick color - #134659.

If GIMP Text Editor is not open, click in rectangle and it will pop up. Type in text, Home. For Text, choose Font you want, I chose Sans Bold, Size: 25px. Click close button.

b) Click Move Tool (M), click on text Home and align text with top, left, bottom and right arrows.

Select Home layer, right click on it and from drop down menu choose Duplicate Layer

or select Home layer and click Duplicate icon (left from anchor) at the bottom of panel Layers.

Select Home#1 layer, double click on text. rename it to About and press Enter.

Select About layer, choose Move Tool (M), click on Home text and press Shift and right arrow few times, to move it to the right.
Select Text Tool (A), click on Home text twice and GIMP Text Editor will pop up. Instead of Home type in About.

Hover over in between two little squares on right side, click and move to right, to adjust width of About text. Click close button, to close GIMP Text Editor.

Repeat step 9b to create links Projects and Contact.

Step 10 - Main content - first part

a) Go to Lorem Ipsum website and click Generate Lorem Ipsum button.

b) Main content text will be width of the first 2/3 of the page. We will have h2 for title, h3 for summary and p for paragraph text.

c) Select Contact layer. Select Text Tool (A) and draw rectangle for our h2 title, from first guide to third guide. From Toolbox, under Color: pick color - #157598.

If GIMP Text Editor is not open, click in rectangle with text (one or twice) and it will pop up. Go to Lorem Ipsum website, copy some text and paste it in GIMP Text Editor.

For Text, choose Font you want, I chose Sans Bold, Size: 32px. Click close button.

d) Select Lorem Ipsum Dolor Sit layer, click Duplicate icon (left from anchor), double click the new layer and rename it to h3 summary.

Second option to rename layer is select the layer you want to rename, right click and from drop down menu choose Edit Layer Attributes.

Layer Attributes window will pop up. Rename layer and click OK.

e) Select h3 summary layer. Select Move Tool (M), click on Lorem Ipsum Dolor Sit text, press Shift and down arrow twice.

Select Text Tool (T) and click on second Lorem Ipsum Dolor Sit twice (GIMP Text Editor will pop up). Go to Lorem Ipsum website, copy some text for our summary and instead of Lorem Ipsum Dolor Sit text, paste.

From Toolbox, under Color: pick color - #2789ae, For Font choose the one you want, I chose Sans Bold, for Size: 22px. Hover over dashed bottom line and when solid line appears under, click and pull down to adjust visibility of h3 summary text.

f) Select h3 summary layer, click Duplicate icon (left from anchor), double click the new layer and rename it to paragraph1.

g) Select paragraph1 layer. Select Move Tool (M), click on last box of text, press Shift and down arrow 4 times.

Select Text Tool (T) and click on last text box twice (GIMP Text Editor will pop up). Go to Lorem Ipsum website, copy some text for our first paragraph and instead of text that's in there, paste.

From Toolbox, under Color: pick color - #595858.

For Font choose the one you want, I chose Arial, for Size: 16px.

Repeat steps 10f and 10g to create paragraph2 text. Move text down pressing Shift and down arrow 3 times.

Step 10 - Main content - second part - Latest News

a) Select h3 summary layer and click Duplicate layer (left from anchor). Double click new layer and rename it to Latest News, press Enter.

Select Latest News layer, click and drag above paragraph2 layer. Click on Move Tool (M), click on second text (Etiam posuere...), press Shift and down arrow few times (11 times) to move text below paragraph2.

b) Click on Text Tool (T), click on last text box twice (GIMP Text Editor will pop up). Select all text and type in Latest News.

From Toolbox choose Font: Sans Bold, for Size: leave 22px and for Color pick #157598 (same as h2 - Lorem Ipsum Dolor Sit title).

Hover over the rectangles on the right side, click and drag left to adjust. Hover over the rectangles on the bottom, click and drag up to adjust.

c) Select Latest News layer, and click Duplicate layer (left from anchor). Double click new layer and rename it to news1, press Enter.

Click on Move Tool (M), click on Latest News text, press Shift and down arrow 2 times, to move text below Latest News.
Select Text Tool (T), click twice on second Latest News text, copy some Lorem ipsum text, and instead of Latest News paste.
From Toolbox choose Font: Sans Bold, for Size: 18px and for Color pick #373737.

Hover over in between two little squares on right side, click and move right to third guide, to adjust width of text. Click close button, to close GIMP Text Editor.

d) Select paragraph2 layer. Click Duplicate layer (left from anchor), rename new layer to date1, press Enter,

then click and drag above news1 layer.

Select Move Tool (M), click on first paragraph above Latest News, press Shift and down arrow 7 times, to place it below news title.

Click Text Tool (T), click twice on text below news title (GIMP Text Editor will pop up). Select all text and type in date, March 17, 2016.

From Toolboc change Font to 14px. Hover over the rectangles on the right side, click and drag left to adjust. Hover over the rectangles on the bottom, click and drag up to adjust.

e) Select paragraph2 layer. Click Duplicate layer (left from anchor), rename new layer to news text 1, press Enter, then click and drag above date1 layer.

Select Move Tool (M), click on first paragraph above Latest News, press Shift and down arrow 8 times, to place it below date. Then press down arrow few times more.

Click Text Tool (T), click twice on text below news title (GIMP Text Editor will pop up). After text paste some more Lorem ipsum text. Hover over the rectangles on the bottom, click and drag down to adjust the visibility of text.

f) Select news1 layer, duplicate it, rename to news2, click and drag above news text 1 layer.

Select date1 layer, duplicate it, rename to date2, click and drag above news2 layer.

Select news text 1 layer, duplicate it, rename to news text 2, click and drag above date2 layer.

g) Select news2 layer, click on Move Tool (M). click on first news title (Donec sodales...), press Shift and down arrow 9 times, to place below news text 1.

Click Text Tool (T), click twice on last text box (GIMP Text Editor will pop up). Copy some Lorem ipsum text and paste instead of the text inside editor. Click close button, to close GIMP Text Editor.

Select date2 layer, click on Move Tool (M). click on first date, press Shift and down arrow 9 times, to place below news2 title. Click Text Tool (T), click twice on last text box (GIMP Text Editor will pop up). Change the date. Click close button, to close GIMP Text Editor.

Select news text 2 layer,

click on Move Tool (M). click on first date, press Shift and down arrow 9 times, to place below date 2. Click close button, to close GIMP Text Editor.

h) Select news text 1 layer, Select Text Tool (A), draw rectangle in third column. Click in it and type in Read more.

From Toolbox choose Font: Sans Bold, for Size: 16px and for Color pick #0F6C8D.

Hover over the rectangles on the right side, click and drag left to adjust. Hover over the rectangles on the bottom, click and drag up to adjust. Click close button, to close GIMP Text Editor. Click Move Tool (M) click on text Read more and drag in the last line of news text 1.

i) Select Read more layer, duplicate, rename it to Read more 2, click and drag above news text 2 layer.

Select Move Tool (M), click on Read more text, press Shift and down arrow 9 times, to place in the last line of news text 2.

Step 11 - Sidebar - Subscribe

Draw rectangle in third column for sidebar region.
a) Select Read more 2 layer. Create new layer (Shift+CTRL+N), rename it to sidebar and click OK.

Select rectangle tool (R) and draw a rectangle for sidebar, mine is 300px wide and 610px high.

Select Bucket Fill Tool (Shift+B) and pick the color is #98c6d7.

Fill the rectangle. From top menu, click Select -> None (Shift+CTRL+A) to deselect.

We are going to create 3 sections in sidebar: subscribe, new blog posts and latest projects with button hire us.

b) Select Latest News layer.

Duplicate it (left from anchor), rename it to Subscribe.

Click on layer and drag up above sidebar layer.

Select Move Tool (M), click on Latest News text (on left side), press Shift and right arrow 24 times to place it in sidebar rectangle.

Press Shift and up arrow 11 times to move up.

Select Subscribe layer, then select Text Tool (T) and click twice on second Latest News text, in third column (GIMP Text Editor will pop up). Instead of Latest News type in Subscribe.

From Toolbox change Font to Sans

and Size to 24px, leave Color same #157598.

Click close button, to close GIMP Text Editor.

c) Now we will create links. Select Subscribe layer. Duplicate it (left from anchor), rename it to Subscribe via RSS.

Select Move Tool (M), click on Subscribe text press Shift and down arrow 2 times, to move down.

Select Subscribe via RSS layer, then select Text Tool (T) and click twice on second Subscribe text (GIMP Text Editor will pop up). After Subscribe add via RSS.

From Toolbox change Size to 16px and Color to #393838.

Click close button, to close GIMP Text Editor. Repeat step 11c to create Follow Us on Twitter and Follow Us on Facebook links, you just duplicate Subscribe via RSS layer, twice.

d) Select Subscribe via RSS layer, click in the empty square next to eye and chain will appear. Click on empty square above this layer and on the layer above that. So at the end you'll have chains in Subscribe via RSS, Follow Us on Tw and Follow Us on Fb layers.

With Subscribe via RSS selected, click Move Tool (M), click on Subscribe via RSS text, press Shift and right arrow 2 times.

e) Time to find icons. Go to icon finder website and download RSS, twitter and facebook icons that you like, size 32px, or you can download from here:

RSS icon - https://www.iconfinder.com/icons/341106/rss_icon#size=32
Twitter icon - https://www.iconfinder.com/icons/341111/twitter_icon#size=32
Facebook icon - https://www.iconfinder.com/icons/341099/facebook_icon#size=32

Create new folder and name it, for example, first website.

Inside create one more folder and name it images.

Copy icon images that you just downloaded and paste in this folder. Rename icons to rss_icon, twitter_icon, facebook_icon.

f) Adding icons. Click on chains of all three layers - Subscribe via RSS, Follow Us on Tw and Follow Us on Fb, to remove them.

Select Subscribe via RSS layer, from top menu select File -> Open As Layers or press CTRL+Alt+O to insert image as layer.

Open Image window will pop up. Find rss_icon and click Open.

Select rss_icon.png layer, select Move Tool (M) and click on rss icon and drag on the left side of Subscribe vis RSS text.

From left side draw guide to touch letter S of Subscribe. Click on rss icon and press arrows to move it to the guide.

Select Follow Us on Tw layer, press CTRL+Alt+O, find twitter_icon and click Open. Select twitter_icon.png layer, select Move Tool (M) and click on twitter icon and drag on the left side of Follow Us on Twitter text. Click on twitter icon and press arrows to move it to the guide.

Select Follow Us on Fb layer, press CTRL+Alt+O, find facebook_icon and click Open. Select facebook_icon.png layer, select Move Tool (M) and click on facebook icon and drag on the left side of Follow Us on Facebook text. Click on facebook icon and press arrows to move it to the guide.

g) Move twitter and facebook icons with their texts to make space between the lines. Select Folllow Us on Fb layer, click in empty square next to eye. Then click on empty square above this layer.

Click on Follow Us on Facebook text and press Shift and arrow down twice. Click on both chains to remove them.

Select Folllow Us on Tw layer, click in empty square next to eye. Then click on empty square above this layer.

Click on Follow Us on Twitter text and press Shift and arrow down once.

Click on both chains to remove them.

Adjust icons and texts with arrows.

Step 11 - Sidebar - New Blog Posts

a) Select Subscribe layer. Duplicate it (left from anchor), rename it to New Blog Posts.

Click on layer and drag up above facebook_icon.png layer. Select Move Tool (M), click on Subscribe text press Shift and down arrow 7 times to place under facebook icon and text. Select New Blog Posts layer, then select Text Tool (T) and click twice on second Subscribe text (GIMP Text Editor will pop up). Instead of Subscribe type in New Blog Posts.

Click close button, to close GIMP Text Editor.

b) Select Follow Us on Fb layer. Duplicate it (left from anchor), rename it to link text 1.

Click on layer and drag up above New Blog Posts layer.

Select Move Tool (M), click on Follow Us on Fb text press Shift and down arrow 3 times to place under New Blog Posts text. Press Shift and left arrow twice. Adjust with right arrow to touch the guide.

Select link text 1 layer, then select Text Tool (T) and click twice on second Follow Us on Facebook text (GIMP Text Editor will pop up). Instead of Follow Us on Facebook type in some Lorem ipsum text. From Toolbox change Size to 14px.

Click close button, to close GIMP Text Editor. Hover over in between two little squares on right side, click and move to right, to adjust width of text.

c) Select link text 1 layer. Duplicate it (left from anchor), rename it to link text 2.

Select Move Tool (M), click on Lorem ipsum... text press Shift and down arrow once to place under lorem ipsum... text.

Select link text 2 layer, then select Text Tool (T) and click twice on second Lorem ipsum... text (GIMP Text Editor will pop up). Copy some other Lorem ipsum text and paste in text editor.

Click close button, to close GIMP Text Editor. Repeat Step 11c - Sidebar - New Blog Posts to create two more links.

Step 11 - Sidebar - Projects

a) Select New Blog Posts layer. Duplicate it (left from anchor), rename it to Projects 3c (which means Projects in third column, since we already have Projects layer from navigation bar).

Click on layer and drag up above link text 4 layer.

Select Move Tool (M), click on second New Blog Posts text press Shift and down arrow 6 times to place under Interdum et... text. Select Projects 3c layer, then select Text Tool (T) and click twice on second New Blog Posts text (GIMP Text Editor will pop up). Instead of New Blog Posts text type in Projects.

Click close button, to close GIMP Text Editor.

b) Select link text 1 layer. Duplicate it (left from anchor), rename it to projects text 1.

Click on layer and drag up above Projects 3c layer.

Select Move Tool (M), click on Lorem ipsum dolor sit amet text press Shift and down arrow 6 times to place under Projects text. Select projects text 1 layer, then select Text Tool (T) and click twice on second Lorem ipsum dolor sit amet text (GIMP Text Editor will pop up). Copy some Lorem ipsum text and paste in text editor.

Click close button, to close GIMP Text Editor.

c) Select projects text 1 layer. Duplicate it (left from anchor), rename it to projects text 2.

Select Move Tool (M), click on Duis accumsan... text press Shift and down arrow once to place under lorem ipsum... text.

Select projects text 2 layer, then select Text Tool (T) and click twice on second Duis accumsan... text (GIMP Text Editor will pop up). Copy some other Lorem ipsum text and paste in text editor.

Click close button, to close GIMP Text Editor. Repeat Step 11c - Sidebar - Projects to create two more projects links.

Step 11 - Sidebar - Button

a) Select Bucket Fill Tool (Shift+B), click on foreground color (change foregorund color window will pop up).

Click on eyedropper tool, in the line of HTML notation. Then click on logo rectangle to copy the color (#197ea4) and click OK.

b) Select projects text 4 layer. Create new layer (Shift+CTRL+N), rename it to button and click OK.

Select rectangle tool (R) and draw rectangle under Phasellus sit text, mine is 150px wide and 50px high.

Select Bucket Fill Tool (Shift+B) and fill the rectangle.

From top menu, click Select -> None (Shift+CTRL+A) to deselect.
Select button layer, select Text Tool (T) and draw rectangle over the layer we just created (GIMP text Editor will pop up).

From Toolbox change text Color to #CDEEF7 and click OK.

Type Hire Us.

From Toolbox change font Size to 24px.

Click close button, to close GIMP Text Editor.
Select Move Tool (M), click on Hire Us text and with arrows align text in middle of button.

Step 12 - Footer

Add copyright text to the footer.

Select Hire Us layer, select Text Tool (T) and draw rectangle over the footer box, from left side to the right side (GIMP text Editor will pop up).

From Toolbox change font Color to white - #ffffff and font Size to 14px.

Click close button, to close GIMP Text Editor.
Hover over in between two little squares on right side, click and move to right, to the end of our document (1100px), then hover over in between two little squares on left side, click and move to left, to the start of our document (0px).