weblium

SUBSCRIBE TO OUR NEWSLETTER

Other Design News

9 Best Multipurpose WordPress Themes (2021 updated)

Flexibility, potent website building tools, great customer support, and impressive sales figures are to be expected in top-tier multipurpose WordPress themes. You may or may not choose to invest in a multipurpose WordPress theme for a single website-building project. You’ll save lots of time and money by investing in one when you’re designing websites for […]

Read More at 9 Best Multipurpose WordPress Themes (2021 updated)

learn to code like a professional website designer part 3

learn to code like a professional website designer part 3 image Article by: Jonathan Service | Picture courtesy of: pexa.com | pixalbay | Posted on: Tue Mar 09 2021


Learn to code like a professional website designer part 3

So in part 1 of this course Learn to code like a professional website designer we looked at the possible coding programs you could use to develop or design your site and we settled on BlueFish, in part 2 of Learn to code like a professional website designer part 2 we had a look at the basics of website design and we played with some code. We now have the basics of a website although not very pretty it displays the basic information.

Now let's look at taking this further and apply some style to this site. so far our site looks like this:

Screen shot of the result of our previous code imagePicture above: Completed code so far

As you can see it is very basic now back in the early days we would have used tables to align and add more content, while this was fine for that time there was not a lot of control over the design, we are going to use DIV's which we will add to our index.html file.

Code - HTML

Highlight code then CTRL + C to copy 

<!-- this is a comment -->
<HTML>
<meta type="keywords" content="this is where you add keywords for search engines separated by commas like: website, my website, my first website">
<meta type="description" content="Use this to describe your website">
<!-- lets now add the <Head section> this is where you add your stylesheet and scripts -->
<head>
<!-- lets call the stylesheet from another folder in the default folder to style our website -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- now lets add a taskbar title -->
<title>This is my first website</title>

</head>
<body>
<!-- this is the first part of my website visible to the user-->

<h1>This is my first website</h1>

<p>This is my content, this is just very basic for now later we will add some style using the stylesheet</p>

<p>This is the bottom footer</p>

</body>
</html>






 

 

 

We are going to add a new layout to this file as below using DIV's

Code - HTML

Highlight code then CTRL + C to copy 

<!-- this is a comment -->
<HTML>
<meta type="keywords" content="this is where you add keywords for search engines separated by commas like: website, my website, my first website">
<meta type="description" content="Use this to describe your website">
<!-- lets now add the <Head section> this is where you add your stylesheet and scripts -->
<head>
<!-- lets call the stylesheet from another folder in the default folder to style our website -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- now lets add a taskbar title -->
<title>This is my first website</title>

</head>
<body>
<!-- this is the first part of my website visible to the user-->

<div class="header">
<h1>This is my first website</h1>

</div>

<div class="content">
<p>This is my content, this is just very basic for now later we will add some style using the stylesheet</p>

</div>

<div class="footer">
<p>This is the bottom footer</p>

</div>

</body>
</html>

Code - CSS

Highlight code then CTRL + C to copy 

.header{ margin:0 auto; background:black; color:white; float:left; min-height:200px;width:100%; } .footer{ margin:0 auto; background:black; color:white;min-height:200px;width:100%;  } .content{ margin:0 auto; background:black; color:white;min-height:400px;width:100%; }

We add the above to our stylesheet below what we have added already

The result:

screenshot of the result of our css and html code update

As you can see still not very good to look at but we can amend this

Look out for part 4 coming soon!