Boxer Dogs Responsive HTML Website Tutorial

The Boxer Dogs website is a basic 2 column responsive website that uses CSS media queries to transform the website into a one column, mobile friendly design once the screen size is under 740px wide.

At the top of the website we’ll add a logo followed by a basic navigation menu underneath that floats to the left and changes it’s color when hovered over by your mouse.

Boxer Dogs Responsive Website

Before you get started by watching the tutorial video below, take note that the social media section appears first in the HTML.  Normally you write the HTML in the order by which it will display left to right on a website but with a mobile, responsive website you style the HTML that you want to appear first at the mobile width. In our case the column appearing on the right will be coded first and we’ll get it on the right of the website using a CSS style! See how with the video and enjoy!