Programming with HTML5 and CSS3 technologies have dramatically improved the landscape in web development. These technologies have certainly presented better ways to develop intriguing websites with unique interfaces.
HTML5 and CSS3 offer incredible functionalities that certainly empowered developers to generate worthwhile websites while encompassing ongoing web trends. Whether you want to integrate an exclusive graphic design in the interface or any other enticing media element like animation, these markup languages allow you to accomplish the task with a flair. Moreover, all the major browsers also support them and ensure a seamless execution of websites developed with these languages. This is not it.
This guide will reveal a step by step process for building a responsive blog by using HTML5 and CSS3. The tutorial has been written while assuming that its readers possess basic knowledge about both the technologies.
1. Create a basic HTML file
The HTML5 embraces simple and easily understandable doctype. Moreover, it also eradicates the usage of self-closing tags, and introduced several new elements, including menu, video and audio, to name a few. It eventually saves a lot of web development time and efforts.
2. Working on various sections of Page
In the above mentioned code snippet, I have included five HTML tags that can help you define your web page. The entire page is wrapped via a div tag, and the wrapper ID will wrap on the complete website.
Broadly, there are three different sections on a page, including header, content div and the footer. They have been defined in the code by their respective tags. The ‘nav’ tag has been also used to define the navigation elements. Through the section tag, the content section and sidebar are defined. In order to make them float, CSS style needs to be considered.
3. Styling via CSS3
To enhance the basic layout created via the HTML in step 1 and create a refined look and feel, CSS3 can be used for styling in a required way. Here I have worked on CSS to create pretty effects.
The clearfix styles can ensure a standard-compliant blog. The aforementioned code includes #left-sidebar and #right elements that represent the respective side of the section to the page. The div#content container consists the clearfix class. This will help float the web content in an optimal way while cleaning up the additional space.
We provide Best HTML5/CSS3 and Responsive training in Bopal, Ahmedabad.
Source:
Author: Jack Calder
Website: codementor.io
