poojitha-chandra / my-first-website

Responsive real world website:computer: using HTML5 and CSS3

KillerWebsite

Hello there!Thought of sharing the code of my first website built!

I included the HTML code of my entire website in the index.html file.

Now I included style.css to control the layout of my webpage,normalize.css that makes browsers render all elements more consistently and inline with more standards and grid.css to set up fluid grid in the basic HTML file.

Then,in order to include various icons in my website I downloaded files such as ionicons.eot, ionicons.min.css, ionicons.svg, ionicons.woff from here.

In queries.css file media queries to trigger different breakpoints are included.

Now there are however some things we can do inorder to make some of the parts of our website work great in older web browsers.So, I used three Javascripts scripts to enable some of the new functionalities in older browsers.The first one there is respond.js which enables the browser to understand and execute CSS media queries which we need for responsive web design.The secnd script I used is HTML5shiv.js that enables us to use and style HTML5 elements in older browsers.The last one is selectivizr.js that allows us to use CSS3 pseudo classes.I used these scripts from here!These scripts are included at the bottom of index.html file.

To make sticky navigation work I used a simple jQuery plugin called jquery.waypoints.min.js taken from here.

In script.js I included some jQuery code for smooth scrolling effect which is taken from here.

Finally,I created a favicon for my website from here!

I excluded the images used in my website to mention in the repository!