Post
Ask Question

Creating a Simple Blogging Website Using HTML, CSS3 and jQuery

Introduction

 
As the use of HTML5 and CSS3 continuous to sprung up, folks around the world are looking at them impressively to design their web pages with pixel-perfect standards. HTML5 is much more consideration for its semantic and cross-browser compatibility. It uses relevant tags for common elements such as navigation and footer for an added impact. On the other hand, CSS3 is a sophisticated language that comes packed with many features such as jQuery slider, responsive layout and more to make your design stand out.
 
This tutorial talks about creating a minimal blogging site using HTML5, CSS3, and jQuery. Following the tutorial, you'll be able to create a website that looks simple, implements modern tools and development techniques and makes use of HiFi CMS.
 
So, without much ado, let's start the process.
 
The Markup
 
Since our goal is just to create a minimal blogging website, look at the markup of our blog below. There isn't any significant difference in the listing page and there are no comments included in the page. The articles are stacked. You can also see how we have kept the non-semantic stuff at bay. Only a "div" container is used. The top-most bar and other embellishments will be loaded via JavaScript.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>Title</title>  
  6.         <!-- styles -->  
  7.     </head>  
  8.     <body>  
  9.         <div id="container">  
  10.             <header role="banner">  
  11.                 <h1>  
  12.                     <a href="/">joel sutherland</a>  
  13.                 </h1>  
  14.             </header>  
  15.             <nav>  
  16.                 <ul>  
  17.                     <!-- nav items -->  
  18.                 </ul>  
  19.             </nav>  
  20.             <div id="blog" class="hidden"><-- blog dropdown -->  
  21.             </div>  
  22.             <!-- blog -->  
  23.             <article>  
  24.                 <header>  
  25.                     <h1>  
  26.                         <a href="">Post Title</a>  
  27.                     </h1>  
  28.                     <div class="postmeta">  
  29.                         <time datetime="">December 31st, 1969</time>  
  30.                         <a href="y#comments" class="comments">0 Comments</a>  
  31.                     </div>  
  32.                 </header>  
  33.                 <!-- content -->  
  34.                 <aside class="comments" id="comments">  
  35.                     <!-- comments -->  
  36.                 </aside>  
  37.                 <!-- comments -->  
  38.             </article>  
  39.         </div>  
  40.         <!-- container -->  
  41.         <!-- scripts -->  
  42.     </body>  
  43. </html>  
Preparing the CSS Layout
 
Here, again the idea of minimalism will remain the same. So, to do this we need to sure not to use unnecessary images and also avoid repeating the code.
 
So, let's begin preparing our layout.
 
Site Background
  1. html   
  2. {   
  3.     background: #d0cec9;   
  4.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedcd9', endColorstr='#f7f7f6');   
  5.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dedcd9),      
  6.     color-stop(0.1, #f7f7f6), color-stop(1.0, #f7f7f6));   
  7.     background: -moz-linear-gradient(top, #dedcd9 0px, #f7f7f6 400px, #f7f7f6 100%);   
  8. }   
  9. body   
  10. {   
  11.     background: url(../images/noise.png);   
  12. }  
The preceding code shows how we have layered only a 24-bit image accompanied by a gradient, box-shadows, and RGBA for our background. Gradient-stops are great to get a desirable background design. It is also helpful to avoid unnecessary divs wrappers.
 
Drop-down and Blockquotes
 
Using RGBA, we are able to keep our texture and gradients up and running.
  1. blockquote
  2.  {   
  3.    margin: 0 0 22px 0;   
  4.    background: rgba(0,0,0,.05);   
  5.    border-left: 4px solid rgba(0,0,0,.1);   
  6.    padding: 22px;   
  7.    
  8.  }  
Top-shadow and Bars
  1. #shadow  
  2. {  
  3.     position: fixed;  
  4.     top: -10px;  
  5.     left: 0;  
  6.     width: 100 % ;  
  7.     height: 10px;  
  8.     box - shadow: 0px 0px 7px rgba(0, 0, 0, .2); - moz - box - shadow: 0px 0px 7px rgba(0, 0, 0, .4); - webkit - box - shadow: 0px 0px 7px rgba(0, 0, 0, .2);  
  9.     z - index: 2;  
  10. }  
  11. #bars  
  12. {  
  13.     width: 100 % ;  
  14.     height: 42px;  
  15.     margin - top: -20px;  
  16. }  
  17. #bars div   
  18. {  
  19.     position: relative;  
  20.     float: left;  
  21.     width: 54px;  
  22.     height: 100 % ;  
  23.     margin - right: 55px;  
  24.     box - shadow: 0px 2px 5px rgba(0, 0, 0, .35); - moz - box - shadow: 0px 2px 5px rgba(0, 0, 0, .35); - webkit - box - shadow: 0px 2px 5px rgba(0, 0, 0, .35);  
  25. }  
  26. #bars div.n  
  27. {  
  28.     background: #2e78bc; }   
  29. # bars div.m  
  30. {  
  31.     background: #a3be48;      
  32.       
  33. }  
  34.     #bars div.c   
  35.     {  
  36.         background: #9a9a9a; margin: 0;   
  37.           
  38.     }  
The preceding code shows the use of a div generated by JavaScript located on the top of the browser viewport. We have also applied a box-shadow to create shadow effects at the top of the page. Also, notice the use of bars that are created using JavaScript markups and CSS.
 
The CSS: Type
 
It's quite pleasurable to write cascading stylesheets, especially when you are aware of the ins and outs of vertical grids. In the code below, I have used 22px of the grid and applied an accurate styling format to make sure our design fits well. Initially, the process might seem daunting to you, but as soon as you get the hang of it, you'll be amazed to see how easy it was.
 
One of the best techniques used to create a grid is to simply pick up a background image and then use it for your grid. However, when selecting an image one needs to ensure that it is 1px wider and taller than your grid. Also, except for the bottom pixel, the rest of the image can be left transparent. You can use a style guide page to preview what you have done so far. For my design, I have applied a grid on everything, ranging from the drop-down, to the comment section and syntax highlighter.
 
Now, let's create the design.
 
The Voodoo Approach
  1. html, body  
  2. {  
  3.     text - rendering: optimizeLegibility;  
  4.     text - shadow: 0px 0px 1px rgba(255, 255, 255, .1); - webkit - 
  5. }  
Look at the code above, the first line will help in improving kerning in Firefox, whereas the second one will enable you to embed a non-visible text-shadow so that effective anti-aliasing can be done across a number of browsers. The last line will help you maintain the web page compatibility with the older versions of WebKit.
 
The technique is good, but you can never be assured of its longevity. The lines aren't good enough to support IE and it's also hard to predict their incompatibility with other browsers, especially when it comes to updating them.
 
Font-face
 
Using this technique, one can easily integrate and use the font of their choice in any location. The technique is good since you are playing around real browsing text. It is also compatible with a range of browsers, including IE6.
 
For those who wish to use their own fonts, ensure that they have the licensing permits for it. If you don't do it, you might run the risk of providing your fonts file publicly available. Next, you can proceed to use the Font Squirrel @font-face generator. The main idea of this tool is to take the font file as input and output the same with different formats that are needed by CSS to display the font on your website. It makes more sense if you check the "expert" box here and then do the rest of the task.
 
Once you are done getting your @font-face CSS, you can proceed to use the font you want.
  1. h1, h2, h3, h4,h5, h6  
  2. {  
  3.     font - family: 'BergamoProRegular',  
  4.     georgia,  
  5.     serif;  
  6.     line - height: 22px;  
  7.     margin - bottom: 22px;  
  8. }  
This strategical use of CSS will make your grid work exactly as you want. It helps you accomplish a perfect balance in your design including the line-height and margin-bottom.
  1. h1, h1 a   
  2. {  
  3.     font - size: 33px;  
  4.     color: #333230;   
  5. line-height: 44px;   
  6. }  
That's all you need to do to make the correct use of CSS.
 
The jQuery and HiFi
 
JavaScript is used quite frequently on the website and when talking about JavaScript it is hard to ignore jQuery. We will use jQuery to create various elements for our website.
 
Bars and Shadow
 
To begin with, markup should be added that I would need for the shadow and bars at the top. Also, it's worth noting that I have completely disregarded the use of padding while adding bars. The reason being, it will help you to prevent any kind of haphazard page jumping during CSS loading and executing JavaScript.
  1. var bars = '<div id="bars"><div class="n"></div><div class="n"></div><div class="m"></div><div class="m"></div><div class="m"></div><div class="c"></div></div>' $('#container').prepend(bars).css({paddingTop: 0}); $('body').prepend('<div id="shadow" />')  
Dropdown
 
I have used a very simple custom binding for creating a dropdown for my blog.
  1. $('#blog').bind('toggle', function()   
  2. {  
  3.     var $blog = $(this);  
  4.     if ($blog.is(':visible')) $blog.trigger('hide');  
  5.     else $blog.trigger('show')  
  6. })  
  7.     .bind('show', function()  
  8.     {  
  9.     $(this).slideDown('show');  
  10. })  
  11.     .bind('hide', function()   
  12.     {  
  13.     $(this).slideUp('hide');  
  14. });  
  15. $('#blogbutton').removeAttr('href').  
  16. click(function()   
  17. {  
  18.     $('#blog').trigger('toggle');  
  19. });  
Ajax Search Via HiFi API
 
This section of the tutorial will be helpful for those who run their website on HiFi CMS. It's a nice platform with an amazing JSON based API and many exciting features to ensure pleasurable user experience. Here is my HiFi query:
  1. {'type': 'page', 'content': {'like': searchphrase }}  
Using the code above, you'll be able to fetch all the pages that contain the search phrase. HiFi also boasts a JavaScript library that is compatible with jQuery and makes it easier to be implemented on the website. Look at the code below to understand better about how searching and the related results should be displayed.
  1. var searchphrase = $('#searchbox').val(); hifi({'type': 'page', 'content': {'like': searchphrase }}).each(function(page){ $('ul#results').append('<li>' + page.title + '</li>'); });  
The preceding code will help you use the API to search for the posts. It's really cool and fun to play with.
 

Conclusion

 
And that's all! Hopefully, you enjoyed reading the tutorial and learned ways to use HTML5, CSS3, and jQuery to create a truly modern and simple blogging website.
 
 
Author Biography
 
 
Jack Calder is a renowned web developer in Markupcloud Ltd, a leading psd to html service company. Jack also shares specific knowledge of any technological topic on the web.


Similar Articles