HTML and CSS Tutorial Create Your own Complete Website

-

Comments

Post a Comment

Popular posts from this blog

CSS Techniques – Absolute Horizontal And Vertical Centering In CSS

-
Image
We’ve all seen  margin: 0 auto;  for horizontal centering, but  margin: auto; has refused to work for vertical centering…  until now!   But actually (spoiler alert!). I’m not the pioneer of this method, and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a  particular article . There,  Simon  linked to this  jsFiddle  that blew every other method out of the water (the same method was also mentioned by  Priit  in the comments). Researching further, I had to use very specific keywords to find  some   other   sources  for this method.  ADVANTAGES: Cross-browser (including IE8-10) No special markup, minimal styles Responsive with percentages and min-/max- Use one class to center any content Centered regardless of padding (without  box-sizing !) Blocks can easi...
Read more

The latest trend in user interface: Flat Design

-
Image
Flat User Interface Design is a design language currently used in the creation of various graphical user interfaces. The  flat design  refers to a style of interface design which removes any stylistic design choices that gives the three dimensional effect and hence is focused upon the minimal use of simple elements,  flat colors and typography . The designers might refer this since it allows them to make the interface designs more streamlined and efficient. Designing Language Is Responsive It is easier to convey information while looking for visual appearance and approach. This designing language makes it is easy to create an interface which is responsive to various browsers in various devices. With lesser design elements, a  website will load faster and can be resized  easily and still have a sharp appearance in high definition screens. This designing language represents smaller data footprints which have a significant effect on the performance. ...
Read more

Creating a Puzzle game using jQuery

-
Image
Today we are making a simple puzzle game called “Doraemon Puzzle”. The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image of kid’s favorite cartoon “Doraemon” for square-sliding game.  I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line basis will help you understand how to use jQuery in your own projects.  Concept about creating a Game as a jQuery Plugin  A jQuery plugin is a perfect way to create image slideshows, custom user interface controls and of course browser-based games. We won’t just write JavaScript code here, we will create a jQuery plugin. A plugin is nothing more than our own custom jQuery method. You know how we have jQuery’s methods .css() and...
Read more