HTML5 CSS3 Project Every Beginner Should Conquer

Learn to design and build beautiful websites for it to reap money for the rest of your life.  This is the time where company’s website and digital identity speaks more than the CEO or its Marketing Manager for that matter. A website should be delivering the exact information and in the simplest way possible. It’s easy to mess things around while designing one, but as a beginner try not to. It’s perfectly okay for you to stumble a few times but learn not to repeat the reason you’ve already stumbled for.

This is the very basic form of HTML for the earliest beginners

The value a company or a business adds to the life of a customer should be reflected in its identity, and if the company has hired you to build their websites, you should be loyal and responsible not the screw your client’s image. There are different tools and techniques to build a website that pleases your client. Choose wisely, that should be your call.

Today, we are discussing HTML5 and CSS3 which are the frontend’s backbone of any website.

Let’s start with a basic design of a block on a website.

HTML5 CSS3 for Beginners

In the image above, you can see the first section, the Title, below that is another section where the information about the writer and the date of publication is mentioned, below that is an image and the last one is a full block of paragraphs.

So there is an Article Title,  Author Information & Date, an Image and the Main Content that is the paragraphs.

That is all that the browser needs to know and yes we have to tell them. This is a bit tricky because we need to tell the browser that this has to be the layout on every screen size and on any device the website is opened.

The Title 
Author Infos and Dates
<The Image>
The Paragraphs

So remember, this should be the layout. By now we know how it should look in the browser and how we should arrange the block. Time to look for the codes? let’s dive in..

If you give the text to a browser, it will not understand, it needs more. So let’s define each element for it to understand and display as we intend it to.

For the Title

 <h1> This is the title of an article </h1>

For Author Infos and Dates

 <p> Author Infos and Dates </p>

For Image

 <img src="html5tuts/images/bluesky.jpg">  

For Main Content (Paragraph)

 <p> [Paragraph Content Goes Here] </p>  

So, those are the four important blocks that you can play around with.

Did you notice the difference in the thickness of the fonts in the second block? The name of the writer and the category are slightly bold, aren’t they? For those formatting you need to use the <strong></strong> tags. These tags are to make the letters bold and can be used within the <p></p> tags.

Since the <strong> tags work inside the <p> tags, they are termed as the child element.

So far what we’ve done is only basic HTML. But you should be aware that the codes and tags get evolved by the time and we are currently at the stage where the fifth version of HTML is being used by websites all over the world.

Likewise, let’s progress through our learning process…

<!DOCTYPE>

It’s a declaration that should be made before starting the <html> tag in a webpage, that means there should be nothing before this tag on a webpage. This declaration is an instruction to the browser being used about the version of HTML the page is written in.

The HTML5 doctype should be as below

 <!DOCTYPE html >

Our Project now looks like this

<!DOCTYPE html>
<html>
<h1> This is the title of an article </h1>
<p> Written By <strong> John Doe </strong> under <strong>Category</strong> Date: 2017-12-20 </p>
<img src="html5tuts/images/bluesky.jpg"> 
<p> [Paragraph Content Goes Here] </p> 
</html> 

Besides the <!DOCTYPE> declaration tag, all other tags should be closed.

You must make sure that everything you want the browser to display has to come inside the <html> </html> tag. Let’s get into the details of the HTML tags.

The <html> tag can come with an attribute that tells the browser to add features to it. For example, <html lang=”En”> tells the browser that our website is in the English language. There are other attributes as well in HTML tags that give more information and rightfully modifies the way a tag block works. Every HTML tags have its own kind of attributes that add features to the element.

Some Examples of tags with attributes are:

<div id="first_block">
<div class="main_text">
<input type="text" placeholder="Enter Text Here...">
<button type="button">Click Me!</button>

The best thing you have to do to understand these codes is trying them in a text editor. Try out Sublime, most developers use it. 

Remember every tag has to be nested unlike some Open Tags like <img>, <embed>, <input>, <meta> etc which does not require the closing tag the way tags like <p> requires </p> and <body> requires </body> .

The proper nesting and formatting of tags can be checked online on http://validator.w3.org. This tool helps you validate your formatting and nesting is correct.

For example:

 <img src="html5tuts/images/bluesky.jpg">

will return an error if you check it online and the error would be the missing of alt in the <img> tag. The alt attribute tells the browser to display the provided text if the image cannot be loaded by the browser. Furthermore, the search engine also searches images based on the value of the alt attribute. So never forget to mention the alt attribute in the <img> tag.

For more attributes tutorial Go to www.w3schools.com>HTML Attributes

Moving ahead with other necessary tags.

<head>

You must be aware that the content of the <head> tag is not displayed in the page itself, but is very important for SEO because it tells what the page is about, what other scripts are used(if any), styles etc.

<!DOCTYPE html> 
<html lang="en"> 
<head></head>
<h1> This is the title of an article </h1> 
<p> Written By <strong> John Doe </strong> under <strong>Category</strong> Date: 2017-12-20 </p> 
<img src="html5tuts/images/bluesky.jpg"> 
<p> [Paragraph Content Goes Here] </p> 
</html>

Normally what goes into the <head> tag is the meta information about the page like the title, the meta information and css styles. The tags that are allowed inside the <head> tag are, <title>, <style>, <base>, <link>, <meta>, <script>, <noscript>.

Few Examples:

<head>
  <title>About Us</title>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   h1 {color:red;}
   p {color:blue;}
  </style>
  <base href="https://www.w3stuffs.com/images/" target="_blank">
</head>

One thing you should know here is about <base>. It defines the base URL for all the links used on the page. If your page needs to display a lot of images, you don’t need to type in all the long URLs for every image, just put the base URL in the <base> tag and use the image name wherever you want to display.

For examples all the images you are trying to display in a page is kept in https://www.w3stuffs.com/images/, keep  the base URL as an attribute of the <base> tag like

<base href="https://www.w3stuffs.com/images/" target="_blank">

and call your image with the <img> tag like this everytime you have to display an image.

<img src="bluesky.jpg" width="200" height="70">

Another important tag that goes inside <head> is <title>. This tag defines the title of the document. In the above example, the text inside the <title> tag i.e About Us tells the browser that the page describes the company or an organization based on what the website is about. The text written inside the <title> tag is displayed on the tab of the browser when the page is opened.

Another more important use of the <title> tag is that the text written inside the tag is displayed in the google search engine. 

<body>

The <body> tag starts right after the closing of the <head> which is </head>…

<!DOCTYPE html> 
<html lang="en"> 
<head></head> 
<body>
<h1> This is the title of an article </h1> 
<p> Written By <strong> John Doe </strong> under <strong>Category</strong> Date: 2017-12-20 </p> 
<p><img src="html5tuts/images/bluesky.jpg"> <p>
<p> [Paragraph Content Goes Here] </p> 
</body>
</html>

…and ends right before the closing of the <html> tag which is </html> as in the example above. This tag actually takes in all the content you intend to display in a webpage.

Tips: A <meta> tag for language:

<meta charset="utf-8">

This specifies the character encoding for the HTML document. What happens if you don’t use this line is that whenever you want to use characters from some other languages like Spanish or Chinese those text will be rendered as some crazy characters because the browser has not been told about the character encoding.

So the final Project Code becomes:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <title> About Us</title> 
 <meta charset="UTF-8"> 
 <style> 
    body{max-width:960px;} 
    h1 {color:blue;} 
    p {color:black;} 
    #left{float:left;} 
    #right{float:right;} 
 </style>  
</head> 
<body> 
 <h1> This is the title of an article </h1> 
 <p> <span id="left"> Written By <strong> John Doe </strong> under <strong> Category</strong> </span> <span id="right"> Date: 2017-12-20</span> </p>
 <p> <img src="sample.jpg" alt="bluesky" width="960"> 
 <p> Paragraph 1 </p> 
 <p> Paragraph 2 </p> 
</body> 
</html>

Stay Tuned for more of CSS and CSS3 Tutorials.

  • Leave a Reply