DIY Webpage Remodeling

DIY Webpage Remodeling Image

“Creating a website is hard!”

You’ve probably said this to yourself after attempting to create one for yourself and found out that the instructions you were following weren’t thorough.

The DIY Webpage Remodeling Method will walk you through the process of modifying the five areas of a simple HTML and CSS template so you’ll be able to create and modify one for your own site.

By the time you get to the end of this post, you’ll learn how to code specific parts of a webpage and make changes to its content.

The Skeletal Framework of an HTML Document

Before I get into the DIY Webpage Remodeling Method you need to understand the required HTML tags that are used in every…single…webpage. These tags hold all the pieces of a webpage together and should be understood. They are the:

Document Tag – describes what kind of HTML file is being viewed

HTML Tag – holds all of the other HTML tags used within the document

Head Tag – contains tags that describe what the site is about

Title Tag – displays the name of the current page you are viewing

Body Tag – encloses all of the content that is seen on a webpage

The brief explanations above doesn’t provide a thorough look into these 5 important tags, so I’ve created an infographic explaining what each tag does and an in-depth look into what an HTML document looks like.

Tools Used for The DIY WebPage Remodeling Method

In order to get you going with this method, I’ve created some downloadable content so you can work along with me. Here is what you’ll need:

HTML Document – the document that represents your webpage

CSS Document – a stylesheet that will help you make your webpage visually attractive

Mini HTML & CSS Cheat Sheet – a PDF that contains some of the most commonly used commands for HTML & CSS and explains how they work

HTML Coding and CSS Coding – pages from my site that list articles explaining how to use the commands you’ll be adding to the HTML and CSS documents

And lastly, the files I have given you to make changes can be opened in three ways:

  1. Notepad (Win) – free on your computer
  2. TextEdit (Mac) – free on your computer
  3. HTML Editor – price varies

The third option may cost anywhere from $50 on up. The program that I use is called Adobe Dreamweaver. It’s a web development program that helps Web Designers, Web Developers, and non-techies build websites either by clicking on menu commands to add content, or typing in the code yourself.

This is the program that I used to build the DIY Webpage Remodeling Method, modify the stylesheet for my blog, and create every web development project I’ve worked on.

I just downloaded a FREE HTML & CSS Mini Cheat Sheet – Click to Tweet

The DIY Webpage Remodeling Method

When you view a webpage, you’re looking at 5 individual sections that, when put together, makes the entire page whole. Each piece has its own set of content but share similar HTML and CSS commands.

After explaining what comprises each section, you’ll be able to modify them using the documents you downloaded earlier, and add the changes I present below.

When you see a strikethrough of a line of code like this, strikethrough text, delete that section of code from the document. When you see text or code that’s in the color of green, add that content to the document.

Here is the before image:

HTML Document Before Modification

And here is the after picture:

DIY Webpage Remodeling After Photo

Ready to get started? Let’s go!

DIY Webpage Remodeling Method Part 1 – The Header Section

The Header is the first area we see when we visit a website and it usually contains the following information:

  • The Name Of The Site
  • A Tagline
  • The Navigation
  • An Opt-in Box
  • An Image

The items that are absolutely required are the name of the site and the navigation, so that is what we are going to change.

What we’ll be doing is centering the title of the document, change its color from black to white, and add a dark green background.

The navigation will still be centered but have a dark color of green, have a white background with a dark green border around it, and we’ll increase the font size from 16 pixels to 21 pixels.

Header and Navigation Before

Open up the HTML Document and under the <!– start of header section –> area, do the following:

Delete:

/*all we want is just the title of the document, so we delete this line.*/
<p>Piecing the parts of a webpage together.<br /> The Header</p>

Save your changes making sure it keeps the “.html” extension with no other added extension names. Make sure to do this every time you make changes to your document.

Open up the CSS Document and look for the section called /* the header section*/. Follow the steps below to make the changes.

Add/Modify:

#header {
/*this will delete the black border that surrounds the header section*/
border: 1px solid #000000;

margin: 0px 0px 10px 0px;

/*this will remove the white background color for this section*/
background-color: #ffffff;

/*this will add a 2 pixel space between the content and the rest of the information surrounding the content*/
padding: 2px;
}

/*we want to focus on the H1 tag and creating an ID name (IDentifier) with a pound sign in front with the H1 tag afterwards will let us do that*/
#header h1 {

/*make the color of the text white*/
color: #ffffff;

/*we’re setting the background color of the header to a dark green*/
background-color: #003300;

/*adds an all around 5 pixel space around the heading*/
padding: 5px;

/*will center the heading to the page*/
text-align: center;
}

/*we are focusing on the link as it is visible to the page and after it has been clicked or visited*/
#header a:link, #header a:visited {

/*we want to make the color of the links to be a dark green*/
color: #003300;

/*when we view the links, we want them to not have an underline*/
text-decoration: none;

/*the we are increasing the size of the links to 21 pixels*/
font-size: 21px;
}

/*we are focusing on the link when the mouse is hovering over it and when the link is being clicked*/
#header a:hover, #header a:active {

/*we want to make the color of the links to be a dark green*/
color: #003300;

/*the link will have an underline appear*/
text-decoration: underline;

/*the we are increasing the size of the links to 21 pixels*/
font-size: 21px;
}

Go further down the document, look for /* the main navigation */ and follow the steps below to make the changes.

Add/Modify:

#mainNav {
text-align: center;
background-color: #ffffff;

/*we are removing the 1 pixel black border around the navigation*/
 border: 1px solid #000000;

/*now we are adding a dark green 1 pixel border around the navigation*/
border: 1px solid #003300;

/*we want to remove the current settings for the margin and add new numbers*/
margin: 0px 0px 20px 0px;

/*we are adding a 5 pixel cushion to the top of the content and 30 pixels to the bottom of the content*/
margin: 5px 0px 30px 0px;
}

#mainNav ul {
list-style-type: none;

/*we are adding a 1 pixel space to the Unordered List*/
padding: 1px;

/*we are now adding 2 pixels to the top and bottom of the unordered list and zero pixels to the left and right*/
margin: 2px 0px;
}

Save your changes making sure it keeps the “.css” extension with no other added extension names. Similar to the HTML Document, make sure to do this every time you make changes to your document.

Make sure your main nav is easily seen on your blog for your visitors. – Click to Tweet

DIY Webpage Remodeling Method Part 2 – The Content Section

The Content Section is where you’ll structure the information your audience will read, similar to what you’re reading at the moment.

The title of the article will be white and have a green background color. To keep the copy (or text) from bumping up against the edges of the white background, we will add a padding of 5 pixels for the top, right, bottom, and left of the area.

Content Section Before Image

The textual information and tags I have provided in the code below, comes from my article HTML Tags Part 1 – The Structural Elements, where you’ll receive further information on how to organize the content in your posts. Open up the HTML Document and follow the instructions:

Change:
<h2>The Content Area</h2>

To:
<h2>Snippet from HTML Tags – Part 1 Article</h2>

Go back into the CSS Document, look for /* the content section */, and follow the instructions below:

Add/Modify:

#content {
float: left;
width: 600px;
margin: 0px 10px 20px 0px;

/*we will be creating a new set of numbers for the padding command*/
padding: 0px 5px;

/*we are adding an all around 5 pixel space around the content for our article*/
padding: 5px;
background-color: #ffffff;

/*we want to remove the black 1 pixel border around the content area*/
border: 1px solid #000000;
}

/*we are targeting the H2 tag – second largest heading in a document*/
h2 {

/*we want to keep the heading in its current position instead of pushing it up, down, left, or right*/
margin: 0px;

/*instead of having a blank background, we are adding a light green color background to the heading*/
background-color: #4eba6f;

/*we are adding 5 pixel space to the top, 2 pixel space to the bottom, and 5 pixel space to the left of the H2 tag*/
padding: 5px 0px 2px 5px;

/*we are making the color of the text white*/
color: #ffffff;
}

The information between the paragraph tags (<p>):
Copy and paste any content you like within this area or you can leave it as is if you don’t have anything to place there at the moment. Just remember to include your text between the opening paragraph tag (<p>) and the closing paragraph tag (</p>).

Content Section After Image

Using the opening and closing strong tag, <strong> and </strong>, go into the HTML document and add then around the text that you see in the image above to make them bold.

Bold and italicized text emphases content your audience wants to read. – Click to Tweet

DIY Webpage Remodeling Method Part 3 – The Sidebar Section

Having a Sidebar Section for your website makes it easier for your audience to locate specific information that you want them to see on every page of your site. The information can be anything you choose, but usually it contains:

  • Short Bio
  • Additional Links for the Site
  • Social Media Images
  • Advertisements

This is just a short list of items that can go here. You can put whatever information you deem fit for your sidebar. For our example, we’ll add the first two items in our sidebar.

For our example, we’ll add two headers and two paragraphs. The headers will have white copy with a black background and the paragraphs will have a gray thin border, white background, and a 5 pixel border.

Sidebar Section Before Image

Look for <!– start of sideBar section –> within the HTML Document, and do the following below:

Change:


<h3>The Sidebar</h3>

To:

<h3>Subscribe</h3>

Add/Modify:

<p>If you’re interested in learning more about design and coding, please subscribe to my blog: <a href=”http://denisejones.me”>DeniseJones.me</a></p>

<h3>Mission</h3>

<p>The purpose for creating this template is to showcase how to adjust and modify both the design and content of your webpage using HTML and CSS.</p>

Within the CSS Document, look for the /* the sidebar section */, and do the following:

Add/Modify:

#sideBar {
width: 326px;

/*we are going to add new numbers to the margin command*/
margin: 0px 0px 20px 620px;

/*to align the sideBar section to the Content, we are pushing it down -5 pixels, adding 20 pixels to the bottom, and pushing the entire section over to the far right by adding 620 pixels to the left*/
margin: -5px 0px 20px 620px;

/*we are getting rid of the padding all together*/
padding: 0px 5px;

/*we are removing the white color background for the sideBar*/
background-color: #ffffff;

/*we are removing the solid black line around the sideBar*/
border: 1px solid #000000;
}

/*we want every H3, 3rd largest heading, within the sideBar section to have specific characteristics*/
#sideBar h3 {

/*the background color will be black*/
background-color: #000000;

/*the color of the text will be white*/
color: #ffffff;

/*we are adding an all around space of 5 pixels to the heading*/
padding: 5px;

/*we want to put a 6 pixel distance from the top of the heading*/
margin: 6px 0px 0px 0px;
}

/*we want to now focus on every paragraph that will appear in this section*/
#sideBar p {

/*the background color is now white*/
background-color: #ffffff;

/*we are adding a 2 pixel solid black border around the paragraphs*/
border: 2px solid #cccccc;

/*we are adding an all around 5 pixel space for the contents within the paragraph*/
padding: 5px;

/*we want to add some distance between the paragraphs so we are adding 11 pixels from the top and 20 pixels from the bottom*/
margin: 11px 0px 20px 0px;
}

Sidebar Section After Image

Easily divided content in your sidebar makes your audience find additional info. – Click to Tweet

DIY Webpage Remodeling Method Part 4 – The Footer Section

The Footer of a site can hold as much or as little information as you please. The usual content includes:

  • The Copyright Information
  • The Main Navigation
  • Social Media Links

As you continue your web creation skills, you’ll be able to add graphics and social media plugins to make your footer more entertaining to your visitors. Since we are keeping things simple, we’ll add the copyright information and just center it.

Footer Section Before Image

Go into the HTML Document, look for <!– start of footer section –>, and follow the instructions below:

Delete:


<h3>The Footer</h3>

Add/Modify:

<p id=”footer”>Copyright DIY Webpage Remodeling Method. All Rights Reserved 2012</p>

Open up the CSS Document, look for /*the footer section*/ and follow the next set of instructions below:

Add/Modify:

#footer {
clear: both;
background-color: #ffffff;

/*we want to get rid of the 1 pixel black solid border around the footer section*/
border: 1px solid #000000;

margin: 0px 0px 20px 0px;

/*we are removing the padding here to add it to another section*/
padding: 0px 5px;

/*we want the content for the footer to be centered to the page*/
text-align: center;
}

/*we want to focus on the paragraph within the footer area*/
#footer p {

/*we are adding an all around 5 pixel space to the paragraph*/
padding: 5px;
}

Footer Section After Image

DIY Webpage Remodeling Method Part 5 – The Background Section

The final section of a site is The Background and the two things you can add are the:

  • Background Color
  • Background Image

Adding a solid color is the most simplest thing you can do for your site and that’s what we’ll do with the code below.

The code for this belongs within the external stylesheet or CSS Document we’ve been using throughout this post.

Open up the CSS Document and look for /*the body section*/ section of the document.

Add/Modify:

body {
width: 960px;
margin: 0px auto;

/*we are adding a light teal color to the background*/
background-color: #c9e7d6;
}

DIY Webpage Remodeling After

Your Homework

Now that we’ve gone through the entire DIY Webpage Remodeling Method, I want you to take some time to work on completing your webpage. Test out some of the other content I discussed above but did not include in the walkthrough.

After completing your website, leave a comment below and/or post your questions on my Facebook page. You can also email me and let me know what your experience was like using The DIY Webpage Remodeling Method above.

Liked This Article?

Share this article with your friends by clicking the links below.

This entry was posted in CSS Tutorial, HTML Tutorial, Web Design. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

did you enjoy this article image

If you did, submit your first name and email address below to get the latest posts on coding, designing, and other web related information. PLUS, get my FREE EBOOK entitled
“10 Steps Towards Creating a Website”...INSTANTLY!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>