Lingulo.com - A resource for web developers


12.06.2013

How to build a HTML5 website from scratch – Part 2

GD Star Rating
loading...

In this second part of my tutorial we will be building the CSS and JavaScript code and do the necessary steps for responsive webdesign to create this beautiful HTML5 responsive website. Be sure to have worked through the first part of the tutorial where we have built the basic HTML structure and included all necessary scripts.
Lingulo HTML5 CSS3 Tutorial

We have already included our CSS Reset in the last part of the tutorial. The Reset will take care of any differences in the default styling of HTML elements by simply resetting all the CSS values. That way we can start creating the styling from scratch but we need to have in mind that e.g. paragraphs will no longer have a browser predefined padding so we have to manually define every value.

Creating the styling – Defining the global rules

When creating the stylesheet it is important to always use comments for the different sections of the CSS file. The first section is the global or general section where we will put all stylings which are used on your whole website and mostly remain unchanged. The first element we are gonna style is the body element. As you can see on our website preview there is an orange stripe on top of the page. This stripe is created by a 5px thick top border defined in our body element rule. Let´s also define our website background color and our general font family and font color.

body
{border-top: 5px solid #e56038;
background: #ebe8de;
font-family: 'Open Sans', sans-serif;
color: #333333;
}

Next element we want to style is our input fields. As we would like the input fields to look the same on any further page of our website we will put the input styling into our global section of the CSS file. In our website example we only have two different kinds of input fields: a text input field and a submit button. Due to that reason we will create a general input rule which will cover the styling for all the different kinds of input fields and a second rule only for our submit button.

If you look at the CSS code for our input fields you will probably note that we are using CSS3 features without defining prefixes for the different browsers (-webkit, -moz etc.). As already mentioned in the last part of this tutorial we use a script called Prefix Free which automatically rewrites the CSS rule depending on the browser used by the visitor. That way we can use CSS3 properties by simply adding the general rule (e.g. just box-shadow instead of -moz-box-shadow, -webkit-box-shadow and box-shadow).

input
{font-family: 'Open Sans', sans-serif;
font-size:16px;
padding: 7px;
outline: 0;
border:0;
width:250px;
background: #EBE8DE;
border-radius:5px;
}

input[type=submit]
{width:auto;
padding: 5px 18px;
line-height:25px;
text-shadow:none;
cursor:pointer;
box-shadow: none;
background: #333333;
color: #fff;
}

Next let´s add rules for our paragraphs and anchors. As we have removed all styling by using the reset.css we now need to define our margin (or padding) and line-height manually for the paragraphs. The anchors should inherit their font color from the parent element and change it by fading it from one color to another. To do so we use the CSS3 feature transition (for further information on transitions please read my blog post). Since we have removed all predefined CSS styling we also need to define our strong elements. In our case they should just be displayed in bold.

p
{margin: 5px 0;
line-height: 25px;
}

a
{text-decoration: none;
color: inherit;
transition: color .5s ease;
}

strong
{font-weight: bold;}

We have three rules left in our general section of the CSS file. The first one is the rule for our figcaption element. As mentioned in the previous part of the tutorial a figcaption is useful in conjunction with the figure element to mark up images or diagrams. In our website the figure element is used for our four little images. To emphasize the heading of our caption a bit more and to add the line between caption title and caption text we will now add a CSS rule for our strong element inside the figcaption.

figcaption
{line-height: 25px;
font-size:14px;
width:200px;
}

figcaption strong
{border-bottom: 1px solid #D6D0C1;
padding-bottom:10px;
margin: 10px 0;
display:block;
}


Creating the styling – Defining the section rules

Now that we have finished creating the general CSS rules let´s start defining the rules for our different sections of the website from top to bottom. To make our website responsive we will set the width property to auto and define a max-width of e.g. 900px for each section on our website. What this does is leaving the sections at 900px width when the browser window is wider than 900px. However when the browser width gets smaller than 900px the width of our sections will adapt to the browser´s width.

As we would like the sections to be horizontally centered we will set the margin-right and margin-left property to auto (see an example here). Centering elements like that is however not supported in Internet Explorer 5. As a solution you could set the body element´s text-align property to center. I personally won´t even bother as IE 5 is almost not used anymore at all.

Let´s start now creating the rules for our different sections of our website. The first section to style is our header. On a real website with several pages you might have multiple header elements so you would need to give the main header a class or an ID to create specific rules only for that element. In our case though since we only use one header element on our entire website we will just add a rule for all header elements and a rule for all paragraphs and h1 headings inside a header.

header
{
position:relative;
width:auto;
max-width:900px;
margin: 0 auto 20px auto;
}


header h1
{margin: 35px 0 0 0;
font-size: 55px;
color: #e56038;
font-family: 'Baumans', cursive;
}


header p
{font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #4A463B;
margin-left:132px;
}

For our main navigation we used the new HTML5 nav element. Since we have added the CSS property position: relative to the header element we can now use position: absolute to position the navigation at the right bottom corner of our header.

For our unordered list which contains all the navigation links as list items we will remove the default list style (the little dot next to each list item). Our list items should not be positioned one below the other but next to eachother. To do so we will make each list item float and add a padding to create a space between each of them. For the anchors within our list items we will define a font type and color and set text-transform to uppercase to make all letters uppercase. Also add a transition of 0.25 seconds and define a color in the hover state. This way the links will fade from one color to another when hovering them.

nav ul
{list-style:none;}


nav ul li
{display:block;
float:left;
padding:3px 15px;
}


nav ul li a
{font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
transition: all .25s ease;
}


nav ul li a:hover
{color: #E56038;}

The next section to style is our slider-image section (don´t forget to write the section as a new comment into your CSS file to make it more clear). Just like in the example file of the Slides script we set the container width to auto to make the slider images resize depending on the browser´s width. The div “slides” needs to be hidden with CSS as it will be made visible by the Slides script. Also add a border to the div with the class “slidesjs-container” to prevent the slideshow from flashing on load. Our slider content is positioned absolutely within our slider container and gets a z-index higher than the one from our container to make it overlay the slider images. As we want to show only slider_content1 at the beginning when loading the site we will set display to none for all slider content boxes except of slider_content1.

#slider_content1, #slider_content2, #slider_content3
{line-height: 25px;
font-family: 'Open Sans', sans-serif;
width:350px;
position:absolute;
top:15%;
left:15%;
display:none;
z-index:11;
}

#slider_content1
{display:block;}

.container
{width:auto;
margin: 0 auto;
position:relative;
}

Now that we have styled the wrapper for our slider content let´s add a styling to the headings and paragraphs inside our slider_content1, slider_content2 and slider_content3. To create the effect of two rounded borders simply add 0 to the borders you don´t want to be rounded into our border-radius property. The order for the values inside that property are top-left, top-right, bottom-right, bottom-left.

For our property display we choose inline-block which displays our headings inline but will preserve the capability to style them just like block elements (setting width and height, margin, padding and so on). The advantage over just using block instead in our case is that the dark background of the heading will be as wide as the heading text itself and not as the surrounding element.

For the paragraphs we will define the same padding as for the heading to make it look in a line and set a bottom margin to create a space between the paragraph and the “Read more” button. You can also set a small border-radius to make the borders of the paragraphs a bit round.

#slider_content1 h3, #slider_content2 h3, #slider_content3 h3
{color:#EBE8DE;
font-size:25px;
font-weight:bold;
margin-bottom:10px;
background-color:#333333;
padding:10px 15px;
border-radius: 15px 0 15px 0;
display:inline-block;
}


#slider_content1 p, #slider_content2 p, #slider_content3 p
{margin:0 0 30px 0;
color:#4a463b;
background-color:#EBE8DE;
padding:10px 15px;
border-radius: 5px;
}

Now that we have finished the CSS part of our slideshow let´s move on to the next section, our orange “spacer”. We set the width to auto to make it fill the whole width of the surrounding element (which is our body element).

To position the question text which is wrapped inside a paragraph we can´t just define a fixed procentual value for our left property. If we did so the question would move to different positions depending on the browser´s width and would not stay fixed at a certain position. The solution is to set the paragraph´s position to absolute and the left property to 50% which positions the paragraph in the middle of our spacer. Then add a negative margin-left to move it a bit more to the left side. This way the paragraph will always stay at the same position regardless of the browser´s width. To position our search form we do the same thing. Note that we don´t need to style our form elements as we have already added a general styling in the global/general part of our CSS file.

#spacer
{width:auto;
height:70px;
background-color:#e56038;
position:relative;
font-family: 'Open Sans', sans-serif;
color:#fff;
font-size:18px;
}

#spacer p
{margin-top:22px;
width:auto;
position:absolute;
left:50%;
margin-left:-450px;
}

#spacer .search
{margin-top:15px;
width:auto;
position:absolute;
right:50%;
margin-right:-480px;
}

Our next section consists of three articles each with an image, a heading and a paragraph. Again we need to set the width of our “boxcontent” to auto to make the width respond to the browser´s width and set a max-width to limit the maximum width. To make the section centered we again use an auto margin to the left and to the right. To create a little space to the top and bottom we set a padding. As we want the articles to be positioned next to each other let´s make them float, set a fixed width and create a little space between them by setting a margin-right. Inside the articles we let the icon image float to the left in order for the text to be placed directly next to the icon and not below it. By floating the icon the heading will now be placed next to the icon image but the text which is placed in a paragraph will only stay next to the image as long as the image is still there. As soon as the text exceeds the height of the image it will continue at the left border of our article below the icon. To fix this we need to define a margin-left for the paragraph to make it vertically in a line with the heading.

#boxcontent
{width:auto;
max-width:900px;
margin:0 auto;
padding:70px 0 45px 0;
}

#boxcontent article
{float:left;
width:250px;
margin-right:45px;
font-size:14px;
}

#boxcontent article h3
{font-family: 'Open Sans', sans-serif;
font-size:20px;
margin-bottom:10px;
margin-left:75px;
}

#boxcontent article img
{float:left;}

#boxcontent article p
{line-height:25px;
font-family: 'Open Sans', sans-serif;
margin-left:75px;
}

For the next two sections we will combine two rules in order not to have to write it two times. For both the section “four_columns” as well as the section “text_columns” we set the font, the line height, the width etc. as well as define the styling of the h2 and h3 headings.

#four_columns, #text_columns
{line-height:25px;
font-family: 'Open Sans', sans-serif;
width:auto;
max-width:900px;
margin:0 auto;
}

#four_columns h2, #text_columns h3
{font-size:20px;
border-bottom: 1px solid #D6D0C1;
padding: 20px 0;
margin-bottom: 20px;
}

Just like in the last section we also let the articles within “four_columns” float to position them next to each other. To create the effect when hovering the thumbnail images we will first set display to block for the anchors inside our articles. We want them to be displayed as block elements as they should adapt its own size to the size of the elements inside of it and fill the whole height and width of our thumbnail image. Also set the position to relative in order to be able to position the span element “thumb_screen” absolutely inside of it. This span element will be displayed on top of our image and shows the little zoom icon and a dark background on mouse-hover. We need to position it absolutely in order to make it lay on top of the image. With a relative position the span element would be displayed above the image. To create the half transparent background we will set the background color to black and add the zoom icon as background image (vertically and horizontally centered). Then we set the opacity to 0 to hide the span element by default. To let the span element fade from invisible to visible we will add the CSS3 feature transition (more about it in my other blog post) for the property opacity. In the hover-state of the span element we set the opacity to 0.5 to make it 50% transparent on mouse-hover.

#four_columns .img-item
{float:left;
margin-right:25px;
}

#four_columns .img-item a
{position:relative;
display:block;
}

.thumb-screen
{display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:113px;
background: #000 url(img/zoom.png) center center no-repeat;
z-index:99;
opacity: 0;
transition: opacity .5s ease;
}

.thumb-screen:hover
{opacity:0.5;}

The next section consists of two columns, one article and one section which should float next to each other. Each of the two columns should have half the width of the website width of 900px. To move the second column a bit more down to be vertically centered with the first column we define a margin. The section “column2″ contains two articles which should each have a relative position in order to be able to absolutely position the rocket and clock icons.

#text_columns article.column1, #text_columns .column2
{margin: 70px 0;
font-size:14px;
float:left;
width:450px;
}

#text_columns .column2
{margin: 120px 0;}

.row
{position:relative;
margin: 40px 0 0 50px;
float:right;
width:350px;
}

As a little gimmick we will now create the CSS animation which starts when hovering the rocket and clock icon. Whether or not this is a useful feature depends on your site and what you would like to achieve with the animation. Note that CSS animations will not be supported by every browser and might in some cases lead to unexpected behavior (for example might the rocket in some browsers disappear on mouse-hover).

When hovering the rocket we want it to fly to the top right and fade out. So let´s set the opacity to 0 on mouse-hover and define a transition for the opacity. We want it to fade out within 0.4 seconds after a delay of 0.2 seconds. To do so add the delay as last value into our transition property. Now that the rocket will fade out on mouse-hover let´s add the path animation. In order not to have to set all the keyframes manually we will use the tool Stylie to create a path from the bottom left corner to the right top corner. Simply copy the CSS code inside the class “stylie” generated by the tool into our rocket:hover rule. Then create a new section “keyframes” at the end of your CSS file where you add the keyframe rule (the part starting with “@keyframes stylie-transform-keyframes”). You might need to adapt the translateX or translateY property to match the starting point of your rocket with the rocket icon (if you don´t change the values manually your rocket might start not exactly from where the rocket image was before hovering it). Just play around with the values to make it look somehow realistic. Also be sure to set the value for animation-iteration-count to 1 so that the animation will occur only once on mouse-hover and the rocket doesn´t fly infinetely.

For the clock icon we want the animation to look just like a ringing alarm clock. To achieve this we will again use Stylie to create a horizontal path and then set the animation-duration to about 100ms. Also set the animation-iteration-count to infinite to make the animation repeat endlessly. Please note that we need to change the name of our keyframe rule as the name “stylie-transform-keyframes” has already been used for our rocket keyframes.

.rocket:hover
{opacity:0;
transition: opacity 0.4s ease 0.2s;
animation-name: stylie-transform-keyframes;
animation-duration: 700ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
transform-origin: 0 0;
}

.clock:hover
{animation-name: stylie-transform2-keyframes;
animation-duration: 100ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}


/* KEYFRAMES */

@keyframes stylie-transform-keyframes
{0%
{transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);
animation-timing-function: cubic-bezier(.25,.25,.75,.75);
}
100%
{transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes
{0%
{transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);
animation-timing-function: cubic-bezier(.25,.25,.75,.75);
}
100%
{transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}

We have reached the footer of our website. As we want it to fill the whole width of the body element and have a fixed height we set the width to auto and define a height value. Also be sure to add position:relative again in order to be able to position the copyright section at the bottom of our footer.

Inside our footer we have another section with a class “wrapper” which should have an auto width and a max-width of 900px just like the other sections in our website. This will make sure that the footer content will change its width depending on the browser´s width.

The three columns inside the footer should be next to each other so we will float them and set a different font color in order for the text to be visible on the dark background. The column in the middle (second column) consists of several list items with a little arrow icon. Each of the list items has a padding and a border-bottom. To move the list items a bit down and create a symmetric look we use margin-bottom. For the arrow icon we set a background image and position it left and 6px from the top. As we have defined a padding the text will not overlap the icon.

footer
{position:relative;
clear:both;
width:auto;
height:350px;
background:#333333;
}

footer .wrapper
{line-height:25px;
margin: 0 auto;
padding-top:30px;
width:auto;
max-width:900px;
font-size:14px;
}

footer .wrapper .column
{font-family: 'Open Sans', sans-serif;
color:#ababab;
float:left;
width:280px;
margin-right:20px;
}

footer .wrapper .column.midlist ul li
{width:auto;
padding:0 0 10px 25px;
margin-bottom:10px;
border-bottom: 1px solid #444444;
background:url(img/arrowright2.png) left 6px no-repeat;
}

footer .wrapper .column.midlist ul li a:hover
{color:#fff;}

In the right column we will set display to block for the span elements inside the list items. We want the text inside our span element to be displayed as block element in order to create a margin between the little image and our text. We float our image in order to position it next to the text. Since our span element containing the text is displayed as a block element we need to define a margin-left starting from the left border of our ul element to create a space between the image and the text. For our images we will define a border and a transition for our border which will make sure the border color fades from one color to another on mouse-hover.

For our h4 headings inside the footer we set a font color which looks good on the dark background and define a bottom border just like we did for the previous headings.

footer .wrapper .column.rightlist ul li
{width:auto;
margin-bottom:15px;
}

footer .wrapper .column.rightlist ul li a span
{margin-left:95px;
display:block;
}

footer .wrapper .column.rightlist ul li a img
{transition: border .25s ease;
float:left;
border:3px solid #444444;
}

footer .wrapper .column.rightlist ul li a img:hover
{border-color: #5e5e5e;}

footer .wrapper .column h4
{font-size: 16px;
color: #fff;
border-bottom: 1px solid #444444;
padding: 0 0 10px 0;
margin-bottom: 10px;
}



Now that we have styled the footer let´s position our copyright notice at the very bottom of our footer. If you have a look at the HTML code you will see that we have a div with the ID “copyright” which we will position absolutely at the bottom of our footer and give it a slightly darker background color. The width of this div should be similar to the width of our footer so we will set the width to 100%.

Inside our copyright section we have a div with the class “wrapper”. We do not have to set the width or the max-width for it as we have already defined a rule footer .wrapper which will apply. However we need to set the font color and font type, define a padding and set the position to relative to be able to position our social button links absolutely within the wrapper. The div with our social links should be positioned at the right corner and 25px from the top of our wrapper.

If you have a look at the HTML code you will see that our social buttons are simply made by wrapping an anchor around an image. As the links are positioned next to each other we need to make them float just like we did several times before. To achieve the hover effect we will simply set the opacity to about 30% and then to 70% or even more on mouse-hover. To make it fade smoothly from 30% to 70% opacity we define a transition.

#copyright
{background: #1D1D1D;
height:70px;
position:absolute;
bottom:0;
left:0;
width:100%;
}

#copyright .wrapper
{font-family: 'Open Sans', sans-serif;
padding-top:25px;
color: #5e5e5e;
font-size:14px;
position:relative;
}


#copyright .wrapper .social
{position:absolute;
right:0;
top:25px;
}

#copyright .wrapper .social a
{transition: opacity .25s ease;
opacity: 0.3;
margin-left: 12px;
display:block;
float:left;
}

#copyright .wrapper .social a:hover
{opacity: 0.7;}

#copyright .wrapper a
{color: #ABABAB;}

#copyright .wrapper a:hover
{color: #fff;}

The next section in our CSS file is called “MISC” and will contain different rules which you don´t know where to put them else. For our website we need to define two rules inside this section. In the HTML code you will find several br with a class “clear”. These are necessary to clear the floating which we used to horizontally position elements next to each other. Simply try not setting the class and you will see why we need it.

The second rule we still need to define is for our hidden headings. As mentioned in the previous part of this tutorial we need to define a heading for each section in our document to create a proper HTML5 outline. Since displaying these headings does not always make sense we will hide all elements which have the class “hidden” by using the CSS property clip.

.clear
{clear:both;}

.hidden
{position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
clip: rect(1px, 1px, 1px, 1px);
}


Creating the styling – Making it responsive

We have finished styling our website and it should look just like in the website preview. The only difference is that the website we just created is not yet entirely responsive. We have already set our width to auto and defined a max-width for our sections. However this will only change the width of our sections but the content inside these sections might be wrong positioned or overlapping. We will now use CSS Media Queries to specify certain rules for different browser window sizes. I will not cover the topic media queries in detail, if you want to know more about this topic check out the web developer guide. In our website we will only use the max-width attribute for our media queries which defines the maximum width for the rule to take effect. So if you define a rule with a max-width of 500px then this rule will take effect as long as the viewport width is smaller than 500px or exactly 500px.

To make our website responsive we need to first of all think about what content is relevant and should be displayed on small displays like mobile phones or on tablets. When creating a website you need to already have in mind how it should look on a mobile phone at the very beginning of your development phase.

Start reducing the width of your browser window until you detect that some parts are wrong positioned or just don´t look good. In that case the easiest way to determine the current width of the website is to use your browser´s web development tool to get the width of the body element. For that width we then need to define a media query to somehow change the layout of our website and make it look good again. However note that the width defined in our media queries can vary depending on the browser you are using. In Firefox the vertical scrollbar gets included in the viewport width which means that if you define a media query with a max-width of 1000px then in Firefox the media query rules will occur at about 985px. The 15px wide scrollbar is subtracted from the max-width. To read more about that topic check out this blog post. The solution for this problem in our case would be to just use a buffer and simply set our max-width a bit higher than necessary.

On our website the first thing you will notice when changing the width of your browser window to about 1215px is that the “Read more” button in our slider is likely to overlap the spacer. How can we get rid of this problem? One way is to completely remove the button (set display to none) and put the “Read more” behind our paragraph as plain text. That way we will already save some space. To do so we still need to add some HTML code to our file. Add an anchor behind each of the paragraphs inside our slider content boxes and give it a class “responsive_button”. Then add a rule into your CSS file to set display to none for all elements with a class “responsive_button” inside a paragraph inside a slider content box.

#slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p .responsive_button
{display:none;}

In our media query rule we now need to simply set display to inline to display it inline behind the paragraph text and define a font color.

However there is still a problem since the text inside our paragraphs is still overlapping the orange spacer. What we could do here to solve this is to make the slider content wider. To do so we set its width to auto to make it adapt to the parent element and give it a margin-right to create a free space between the slider content boxes and the right edge of our slider images. Also we want the font size to be smaller which will save some space and looks a bit lighter.

@media (max-width: 1215px)
{#slider_content1, #slider_content2, #slider_content3
{width:auto;
margin-right:50px;
}
#slider_content1 h3, #slider_content2 h3, #slider_content3 h3
{font-size:18px;}
#slider_content1 p, #slider_content2 p, #slider_content3 p
{font-size:14px;}
#slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p .responsive_button
{display:inline;
color:#000;
}
.container .button
{display:none;}
}

When reducing the width even more you will notice that when we get below the max-width of 900px which we have set for our website the floated articles will not be next to each other anymore. To get rid of the Firefox scrollbar problem I told you about we will add 15px and define a media query for a max-width of 915px. Since thearticles don´t fit next to each other anymore we will position them one below the other horizontally centered. To do so we need to remove the floating and set margin-right and margin-left to auto. Also we change the width to 60% to make it change its width depending on the website´s width.

We also have the problem that below 900px the orange spacer with the search form will not fit anymore. To solve this let´s change the font size of the spacer and the input field, reposition the paragraph with the question text inside and change the size of our input field by adjusting the padding values.

Another problem occurs with the section “four_columns”. Below 900px some of the articles with the class “img-item” might wrap and overlap the other articles. To solve this problem we will set a specific width to our section so that two articles wrap to the next line. Then we define a margin-top for the two wrapped articles to create a space between the two lines. To address only the third and fourth article (which are the ones in the second row) we will use the CSS3 feature nth-of-type. Note though that this will not work in IE8 or below. If you want to assure full browser support you could give a specific class to the third and fourth article instead.

For the section text_columns we also need to reposition the articles. To do so let´s remove the floating and change the width of the two columns by overwriting the value for max-width. To center the articles within the section we will set margin-left and margin-right to auto just as we did several times before. We also don´t want the two articles inside the second column (the ones with the rocket and the clock icons) to be floated right anymore and need to readjust the margin to make it look good.

The last section we need to adjust at 900px is the footer. To make it fit the smaller width of our website we will reduce the font size and the width of the three columns.

@media (max-width: 915px)
{#boxcontent article
{float: none;
margin: 30px auto 0 auto;
width: 60%;
}

#spacer
{font-size:15px;}

#spacer .search
{margin-top:19px;
margin-right:-385px;
}

#spacer p
{margin-left:-370px;}

input
{padding:4px;
font-size:14px;
}

input[type="submit"]
{padding: 1px 14px;}

#four_columns
{width: 500px;}

#four_columns .img-item:nth-of-type(3), #four_columns .img-item:nth-of-type(4)
{margin-top: 25px;}

#text_columns article.column1, #text_columns .column2
{float:none;
max-width: 500px;
margin: 50px auto 0 auto;
}

.column2 .row
{float:none;
margin:0 0 40px 50px;
}

footer .wrapper .column
{font-size: 12px;
width: 230px;
}
}



When reducing the width of your browser even more you will notice that at some point the slideshow is just too small and does not look good anymore. To remove it we will set the top value to a high negative value to make it disappear. We can not use display to remove it because the slideshow will not appear again if it has been removed. As the slideshow has disappeared the orange spacer will start overlapping our navigation so we need to define a fixed height for our header. We can also reposition our navigation because now that everything has been centered it might look better to center the navigation as well. To center it we first need to overwrite our top and bottom values by setting them to auto. Then we set the left attribute to 50% and define a negative margin corresponding to half of the navigation´s width.

We also got some issues concerning the spacer. The search form and the paragraph do not fit next to each other anymore so we need to position them below each other. We define a fixed height for the spacer and setmargin-right and margin-left to auto to center it. To get rid of any margin and the left value we will set the position to static. By defining a padding we create some free space above and below the paragraph. Just as we did for the paragraph we will do the same for our search form.

Because our footer does not fit anymore we will position the three columns of our footer below each other. To achieve this we first need to set the height to auto as it has been set to 350px before. Then we set a fixed width to the wrapper inside the footer and center it. The three columns inside the wrapper should not float anymore as they should be positioned below each other. We also set the width to auto in order to make it fill out the whole width of the wrapper. Since there is not a lot of space in the footer we will completely remove the social links.

@media (max-width: 765px)
{.container
{top: -1500px;}

header
{height:120px;}

header nav
{right: auto;
bottom: auto;
left: 50%;
top:100px;
margin-left: -184px;
}

#spacer
{height:100px;}

#spacer p
{text-align:center;
position:static;
margin: 0 auto;
padding:15px 0 7px 0;
}

#spacer .search
{text-align:center;
position:static;
margin: 0 auto;
}

footer
{padding-bottom:70px;
height: auto;
}

footer .wrapper
{width: 350px;
margin: 0 auto;
}

footer .wrapper .column
{margin-top:30px;
float:none;
font-size: 14px;
width: auto;
}

footer .wrapper .social
{display:none;}
}

At about 500px we will again adapt the layout of our website. The section “four_columns” will now display the articles below each other. We do not need a fixed width anymore so we can set it to auto. As we don´t want the articles inside our “four_columns” section to be next to each other anymore we will remove the floating and define a fixed width.

For our wrapper inside the footer and the rocket and clock articles we set the width to auto in order to make it adapt its width to the parent element. Unfortunately our navigation is too wide as well so we need to think of a solution. We could of course divide it into two parts which we position below each other but I find it better to completely remove the navigation and replace it with a simple select box. To achieve this we add the HTML code for a select box into the header of our website and give it an ID “alternative_menu”. We then set display to none to hide it by default and position it absolutely somewhere below the subheading paragraph. In our media query we will then set display to block to make it appear when the navigation gets hidden.

If you look at the website again and reduce your browser´s width you will see that the website will now respond to the changing width and look good at any screen size. Obviously you can always do more to make the website look even better on different screen sizes. Just play around a bit with the values and add rules for any element you want to change at a specific screen size.

Creating the JavaScript – Coding the slider content

Now that we have finished our styling we will create the JavaScript code for our slider content boxes to appear and disappear when the slider image changes. For the Slider to work we will add the JavaScript code just like in the example file of the SlidesJS plugin and make a few adjustments. For some reason we need to define a height in the JavaScript function which is much smaller than the actual slider images. I am not yet sure why this is but simply choose a height which makes the slider look good, in our case at about 235px.

In order for our slider content boxes to appear and disappear whenever a slider images is changing we need to add two callback functions. The first callback will fire when a slide starts to change to another, the second one whenever a slide has entered and is not moving anymore. In the start callback we will add a rule to fade out all the slider content boxes because as a slide changes we don´t want any box to be visible. In the complete callback we will fade in the slider content box corresponding to the current image. So say the second image is shown then “slider_content2″ will fade in. To achieve this we can add a variable into our complete function which will always give us the current slide number.

$(function() {$('#slides').slidesjs({height: 235,
navigation: false,
pagination: false,
effect: { fade: {speed: 400}},callback:
{start: function(number)
{$("#slider_content1,#slider_content2,#slider_content3").fadeOut(500);},
complete: function(number)
{$("#slider_content" + number).delay(500).fadeIn(1000);}
},
play:
{active: false,
auto: true,
interval: 6000,
pauseOnHover: false
}
});
});

Creating the JavaScript – Coding the alternative menu

As mentioned before we will now add the jQuery code for our alternative menu, The alternative menu appears as soon as the browser size falls below 500px. When we select an item from the select box we want to be redirected to the selected page. To do so we will simply add the following code into the $(document).ready part in our script.js file.

$("#alternative_menu").change(function()
{$selected = $("#alternative_menu option:selected");
window.location.href = "http://www.lingulo.com/" + $selected.val();
});

With the first line we define a change handler for our alternative menu. Inside the change handler we set a variable “$selected”, which holds the selected element from our alternative menu. In the last step we set the window.location.href to your domain and add the value attribute behind the domain. Now let´s add the page we want to be redirected to into the value attribute in our HTML code. To redirect for example to the page http://www.lingulo.com/contact you would add this to your alternative menu:

<option value="contact" >Contact</option>

Our alternative menu should work now. However using only a select box as a mobile menu is not the best way. I will now show you how to include a better navigation for small display sizes.

The mobile menu we just created is easy to build and works well, however from a user-friendly point of view a select box is not the best way to go. So let´s start creating a mobile navigation just like in the preview which toggles down when clicking on the symbol in the top left corner. First of all we need to add the HTML code for the mobile navigation. We could of course simply use the existing navigation and adapt it on mobile screens but in our case we add a separate menu because we would like to have different menu items on mobile than on desktop screens.

To start let´s remove the previous additional menu from the HTML code and add a div with the ID mobileMenu. Add an unordered list with all the menu items as li elements inside. That´s it for the menu, now let´s add the HTML code for the symbol in the top left corner (three bars above each other). The bars are made by adding three span elements inside a div element and positioning them one above the other. The whole HTML code should look like this:

<div class="toggleMobile">
<span class="menu1"></span>
<span class="menu2"></span>
<span class="menu3"></span>
</div>
<div id="mobileMenu">
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Porfolio</a></li>
<li><a href="javascript:void(0)">About</a></li>
</ul>
</div>

Now let´s move on to the jQuery part of our mobile navigation. When the page is loaded we would like to first of all hide the mobile menu by default (since it should only be visible when clicking on the symbol). When clicking on .toggleMobile we would like the mobileMenu to slide down or up depending on whether it is already open or not (this is done by using the jQuery slideToggle function). Also we would like to animate the .toggleMobile symbol just like in the preview. We are going to do that using CSS3 transitions and therefore all we have to do is add a class active to our symbol. To make sure that when somebody resizes his browser window to a width higher than 500px the mobile navigation should not be displayed we also add a resize event which fires when the user changes the browser width. Within that resize event we test whether the current browser width is larger than 500px and if so we hide the mobile menu and remove the active class from our .toggleMobile. The whole jQuery code should look like this:

(function ($, window, document, undefined)
{'use strict';$(function ()
{$("#mobileMenu").hide();
$(".toggleMobile").click(function()
{$(this).toggleClass("active");
$("#mobileMenu").slideToggle(500);
});
});
$(window).on("resize", function()
{if($(this).width() > 500)
{$("#mobileMenu").hide();
$(".toggleMobile").removeClass("active");

}
});
})(jQuery, window, document);

Now let´s move on to the CSS code for our mobile navigation. We want the navigation to be positioned fixed at the very top of our page. The menu should be as wide as the browser window (100%) and not be displayed by default.

#mobileMenu
{position: fixed;
top: 0;
left: 0;
width: 100%;
display: none;
}

The list elements inside our navigation (which are the menu items) should be displayed as block elements. You can style them however you would like to, in our case we use an orange background color, a white font, some padding and letter spacing as well as a slight border. Also we want the text to be centered and uppercase.

#mobileMenu ul li
{display:block;
background-color: #E56038;
color: #fff;
padding: 12px 0;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid #CC5836;
}

The mobile toggle switch in the top left corner should not be displayed by default since we will only make it visible on screen sizes smaller than 500px using media queries.

.toggleMobile
{display:none;}

Now let´s move on to our media queries section within the CSS file and add the code for screen sizes below 500px. We want our mobile menu to be visible on small screens and to be above any other elements, so we define a z-index which should be high enough in order for the menu to actually be positioned above the other content.

#mobileMenu
{display: block;
z-index: 99;
}

Next let´s position the toggle switch fixed at the top left corner, give it a width of 40px and a height of 36px and make the z-index higher than the one for the mobile menu (since we would like the switch to be above the menu when it is open).

.toggleMobile
{position: fixed;
top: 10px;
left: 10px;
display: block;
width: 40px;
height: 36px;
cursor: pointer;
z-index: 999;
}

Now let´s move on to the cool part, we would like the three bars of our switch to be positioned absolutely within the .toggleMobile div. Also they should be 40px wide and 8px high, have a background color and a transition effect with a custom easing bezier curve. As mentioned earlier in this tutorial the third argument of the transition attribute describes the way an animation should be played. You can use this tool to create your own bezier curves or use an existing like ease or linear. Also we want the transition to address all possible properties which can be animated and the duration of the transition should be 0.35 seconds.

.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
{display: block;
position: absolute;
width: 40px;
height: 8px;
left: 0;
background: #EDA28C;
-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}

Since we would like the bars to be one above the other we will now change the top value for each of the bars.

.toggleMobile span.menu1
{top: 0;}
.toggleMobile span.menu2
{top: 14px;}
.toggleMobile span.menu3
{top: 28px;}

The last thing we need to do now is to define the active class for our switch. When the switch has been clicked and the menu is open the lowest of the three bars should be hidden, the others should be positioned one above the other and then be contrary rotated.

.toggleMobile.active span.menu1
{top: 14px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile.active span.menu2
{-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile.active span.menu3
{opacity: 0;
-webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}

Additional features – Creating skiplinks

If you have lots of content on your web page then it might be useful for your visitors to offer them a skiplink. With a skiplink they can get back to the top of the page by simply clicking a button. If you scroll down our website in the preview you will see that a little button in the right bottom corner will appear. Clicking that button will scroll the page up to the top. To create this skiplink we will download the source files from this quick tip. From the “index.html” file we copy the jQuery code which basically fades in the button if we have moved more than 200px from the top and removes it again if we have moved less than 200px from the top. In the click function we define that the page will scroll up to the top within 300ms when the button has clicked.

We also need to insert our button into the HTML code. To do so we simply add an anchor in the footer of our website and add a class “go-top”. You can now style the button as you like or simply copy the styling from the CSS file in the source files which we just downloaded.

Improving our site´s performance

Now that our website has been finished let´s take a look at how we can improve the page speed ecspecially on mobile devices. The first easy thing we can do to speed up the loading time is to specify width and height attributes for all our images. When the browser loads a page it will try to start displaying content before all the images have been downloaded. The browser will leave gaps for each image and fill these gaps when the images have been loaded. However if you don´t define the size of an image the browser won´t know how much space to leave for it. In the end it will have to reposition all the elements on the page in order to make the image fit. So let´s add width and height attributes to all our images except the three slider images (because their dimensions will be set by SlidesJS). Note that we don´t have to add “px” to the width and height attributes.
<img src="img/Buzz-Private-icon.png" width="64" height="64" alt="alt text about the private icon"/>Except from setting dimensions for our images we also have to make sure that the images have an appropriate file size. You should use image optimizers like for example Kraken.io to reduce your image sizes.
Another thing we can do is to use CSS Sprites. When you have a lot of different images and icons on your website you need to make sure the amount of HTTP requests is as low as possible. To achieve this you can can combine all images into one single image and position the image in CSS depending on what icon you would like to be seen. As it is quite difficult to create your own sprites there are some useful tools out there like SpriteMe which automatically detects images on your website which can be combined to a sprite. To find out more about CSS Sprites be sure to read the SpriteMe FAQ.

Another important way to achieve better website performance is to cache your pages. Each time a user visits your website the browser has to download all web files in order to display the page correctly. This occurs to any element on the page be it an image or a CSS file. As we would like to reduce the amount of HTTP requests we need to find a way to define which files should be downloaded each time the user visits your website and which files can be stored in the browser´s cache as they are not regularly updated. One way to achieve this is by adapting your .htaccess file. Before adding the following code to your file be sure your server supports the module mod_expires (most of the web servers do).

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>

Each line defines the duration of your browser´s cache for a certain file type. The line ExpiresDefault "access plus 1 month" defines the default caching time for all files which are not set in the .htaccess file. In this example we set a caching time of one month to our HTML code and a caching time of one year for your images. You might make changes to your HTML files every now and then so it makes sense to refresh the browser´s cache every month. Your images however are in general not changed for a very long time so we set the caching time to one year for all images.

If you are using WordPress or another CMS you should make use of Cache plugins like W3 Total Cache which will give you a lot of ways to cache your website.

The next way to reduce our website´s loading time is to combine and minify our CSS and JS files. You could either do this manually by simply adding your CSS into one file and using an online tool like CSS Minifier as well as adding your JS files into one file and compressing them with an online tool like JS Compress. Or you could use Minify which automatically combines and minifies all your JS and CSS files. If you use the WordPress plugin W3 Total Cache it will include Minify by default.

Apart from minifying JS files we can also try to load them asynchronous. What that means is that the script will be loaded after the website has been rendered. That way the page appears faster leaving the asynchronous scripts to be loaded afterwards. Obviously there are scripts which need to be loaded from the very beginning, for example the Modernizr script or jQuery. In our example we could definitely set the lightbox script to load asynchronous. To do so we add the attribute async to the scripts we want to load after the document is ready. Here one example with the lightbox script.

<script async src="lightbox/js/lightbox.js"></script>

The last and probably most important thing in order to improve page speed on mobile devices is to load different image sizes depending on the device width. Right now we have three huge slider images which will be loaded even on mobile phones (even though they aren´t even visible!). One way to load images depending on the screen size is the new picture element.

<picture width="300" height="300">
<source media="(min-width: 35em)" src="large.jpg">
<source media="(min-width: 16em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>

However as of now the picture element is not supported in major browsers but there is a fix called picturefill.js that mimics the picture element using span elements. If you would like to find out more about using images on responsive websites check out Chris Coyier´s blog post.

Well done, we now have created a beautiful well coded responsive website. Read my next step by step tutorial to find out how we can create a WordPress template from the responsive HTML5 website we have just built.

How to build a HTML5 website from scratch – Part 2, 9.2 out of 10 based on 165 ratings
82 comments

Hey man, I just read the 1st part and I am half way through the 2nd section of this tutorial. I could not help myself from appreciating your efforts. It took me about 25 minutes to read the 1st part, I wonder how much time it took you to create it. Doing all the proofreading, putting links, formatting etc.

I can see from your writing that you have reasonable experience in Web Development and I just love the way you give tips to your readers.

Thanks for writing these awesome tutorials.

Hi There Chris,

Just in Reply to my last message about the alternate menu not functioning, (for some reason your forum here is not allowing me to reply to you directly).

Here is the test site I am working on http://www.mpmedia.com/DZP

I have tried to use the links without the .php extension, also have tried on my local site to get it to function but cannot seem to make it work. I read that you have an alternate way to code a responsive menu, do you perhaps have a link to this I could try as well?

Thank you so much for your time!

Melanie

Hi there!

Great tutorial. I have followed it to create a web page I am currently testing. My only issue is that I cannot seem to get my alternate menu to work. I have followed the instructions you suggested but I am having issues getting the menu to function. I have the site on a test server at this time. If you may be able to give me any suggestion as to what I am doing wrong? That would be greatly appreciated!!

cheers.

Hi Chris, Great work. well done, but I could not find the script.js you mentioned for the alternative menu.
Was it omitted or where can I locate it.

Thanks

Thank you and well done Chris. This is a wonderful masterpiece and has re-awaken my interest in web design, having dropped out of the vocation after writing the posts at http://infobitt.blogspot.com

I will start recommending this site to others too.

Let me bother you with a silly question Chris: How do you determine the accurate z-index for an element, the slider content for example? Why 11 and not a lower number? Using the Firefox Inspect Element tool, I experimented with numbers less than 11 on the slider content but the effect of overlaying the slider contents on the sliding images was not achieved until I entered 11.

That is why I’m curious, Chris. Please help.

Hi

Can you please help me understand how css position(relative and absolute) works?

on header section you mention that “Since we have added the CSS property position: relative to the header element we can now use position: absolute to position the navigation at the right bottom corner of our header.”
and this works fine but i still don’t understand why we have to you use absolute instead of relative property and margin to place nav element at the right button.

If you have an absolutely positioned div (div1) inside a relatively positioned one (div2) you can position it within div2 using the top, right, bottom, left properties. If however div2 is not relative, using the top, right, bottom, left properties will position div1 within the first parent element that is relative or absolute. Read more about CSS positions here.

Hi

Can you please help me understand how css position(relative and absolute) work?

in header section you use absolute position property to position the navigation at the right bottom corner of our header and it work fine, my problem is that i real don’t understand why we have to use absolute instead of relative property.

Finished your tutorial. Simple amazing! congrats ;)

I’m looking forward to see more tutorials from you :) maybe a parallax one :) ?

cheers! and thank you!

Hey Chris.

You mention a script.js file in the tutorial but i cannot see anywhere where we created that document so i am struggling to get the menu to work when it is less than 500px.

the document containing this part is the one i cannot find to edit:

$(document).ready

Thanks Chris

Hi Chris,

Any news yet on the alternative nav / responsive menu for mobile you mention, this is eagerly awaited. HTML5 is new to me and I have found your tutorial a valuable learning tool.

Kind regards, John

An excellent set of tutorials, well structured and easy to follow, best I seen on the web. One question I have which I see others have posted, you mention an alternative nav for mobile and a better solution than selection box. Have you published details about, looked but cannot locate any reference to this. Your comments would be appreciated.

Hi,

First of all i would like to say THANK YOU VERY MUCH FOR GREAT TUTORIALS…

I checked lots of tutorials but not found detailing like your tutorials, i learned lots of things from your tutorials and now i can develop responsive website.

It’s really great help…Keep it up!

Thanks,
Rahul Patel

Thanks for your time and effort ;)

Going to “eat” this tutorial in the next days :D Overall, it looks very simple and well written ! Amazing job.

In the end I will give you more feedback :D

thank you

Hello.
I would first very much like to thank you for this wonderful tutorial. It’s greatly reduced my learning curve.
But I’d like to seek clarification on the JavaScript code. Where should I save the additions you’ve made? In the jquery.slides.min.js? Or should I create a new JS file in the example folder of the main slider folder?
Thanks!

Hey Paul, thanks much for this — extremely helpful and informative. I’m running into a few problems — the first is with the rocket and clock animations. I copied your style.css and made it my style.css, but still the animations won’t work. I’m not sure why that is, because I’m previewing your page (where the animations do work) and my page in the same browser (Chrome).

The second two are more minor, and I can probably figure out by myself, but in case you know what’s going on – I can see the special German characters on your page, but on mine they appear as � (diamond with a question mark inside), even after I did a direct copy/paste of your page’s source code. Also, lightbox is working, but the magnifying glass with plus sign isn’t appearing along with the rest of the fade.

Great work on your part with providing a neat tutorial on putting together a HTML5 website.
I have built web sites including online stores and having left the industry for more than 3 years now, I need a refresher on how to link up the nav menu that you are using. Please provide an example that links to a page like ‘contact.php’, or better still, if you have a contact page that uses HTML5 to not need to use a php page in a secure email format, that would be great.

I am enjoying this tutorial tremendously. I typed in all the code for the main page details from part 1. Now i’m about to start doing part 2 with the CSS styling. But i just want to know one thing: Which file do i put all the CSS code into? Do i put it into the Reset.css file? I have to ask cos you don’t specifically say which file to use for this part.

First, thank you for the very thorough and excellently presented tutorial!
Second, have you posted your alternative to the “select” mobile menu? I noticed in your comments that you said it was finished but I can’t seem to find it.
Again thanks so much!

Thank you very much for the excellent tutorial.

Just quick question. Forgive me if it is too elementary.
I noticed that basic font settings are set in each section even many sections share the same font-family, font-size and etc. Why can’t we just define globally once and each section inherits the global definition and define specifically for those sections require different font setting from the global?

Is this something to do with reset.css?

Thank you very much in advance for your comment.

Hi Chris,

Great tutorial. I’m making my own new site, step by step, with it.

So far, I stucked on absolute position of an navigation in CSS. You mentioned it in the text, but not included in code below. 3 minutes of my life were wasted thinking why nav is not going to the right !

;)

Hey Chris,

Thanks a lot for your detailed tutorial, I really enjoyed it. It is very informative and useful. Thanks for your all effort.

I need small help here, I am completely new to all the languages but somehow I have managed to get the page up and running in my local machine.

I am stuck at alternative_menu,
Problem 1 – Using the original Javascript – When I navigate to about page using alternative_menu it navigates to about page but the alternatve_menu stays at Home only I mean the value shown in the selection box where I expect it to be About

Problem 2 – my about page is about.html so when I select about from the alternative_menu it goes http://mysite/about so concatenating “.html” will solve the problem in the javascript, but I want to get back to home by selecting home as this page is not home.html I have to use some condition in javascript , but I am not successful here , can you help me.
my altered Javascript below

$(document).ready(function() {
$(“#alternative_menu”).change(function()
{
$selected = $(“#alternative_menu option:selected”);
var sel=$selected.val();
if (sel=”Home”) {
window.location.href = “http://myhtml5site/”;
}
else {
window.location.href = “http://myhtml5site/” + $selected.val() + “.html”;}
});

});

Hey Raj,

to choose the right menu point from the select box you need to add “selected” to the option you want to be selected. For example.
In problem 2 you missed the second equal sign, it should be if (sel==”Home”) {

Best regards

Chris

Hi guys! I have created a framework that allows you to create a responsive site quickly and easily just by clicking buttons or if you want adding your html.. My framework is based on Foundation ( another framework ) but if you want you can select Bootstrap ( is converted from Foundation, so not all can be converted ).. This is the site: http://www.responsivetemplater.altervista.org/

Tell me what you think about that :) .. Sorry if I was wrong to write in english :)

This is seriously one of the best HTML5 tutorials I’ve ever seen. Thanks so much for posting!
The only thing that I am not understanding well is the Image Slide on top of the page. For some reason I have all 3 images showing up, one stacked on top of the other vertically on the page, instead of being inside of a “slider”. What could cause something like that? I downloaded the plugin you linked to and I copied the code exactly as you have it but it’s still not working. Did I miss something?
Thanks!

Hi

really good tutorial, it’s helped me loads on my first responsive build!

Just wondering though how I would do this using a static image instead of a slider? I’ve removed the slider and instead i’ve used a with a class .banner and i’ve given this class a background: url (../img/image.jpg); but the image wont display on the page now??

Any idea why?

Danny

Hi Danny,
if you use url(../img/) to set your background image in your css file you must think of your folder/file structure. Your css file can’t be in the same folder as your index.html file because with ../img/ you go back one folder. Is your css file in a separated folder maybe /css/? If not you must write url(img/).

I hope that helps.

Regards,
Wolle

Oh, thank you very much!!! Now I can see why it happened. For 765px in “container” we should not only set top as -1500px, but set its height to 1px! I don’t know how you could find that solution ))). It’s brilliant.
Once again, thank you for your post. For me it was full of discoveries. For example, I never heard about outlines with those hidden headings.
Looking forward to read your next tutorial. This tutorial is completed )))

Thank you for this great tutorial with all those “read this blog”. It helped a lot.
I tried to follow it and in the end got a problem. When the size of screen less than 765px and the slider disappears, “spacer” doesn’t take it place. I have a big gap on the screen. To find a problem I copied Page Source from your working sample and place it instead of my index page. The problem is still there. Then I place style.css file (which I downloaded from your site) into my website directory. The problem still there. Could you upload a working style.css file on your website or help me to find my problem? I am just wondering if anybody else got the same problem?
There is what I have for now:
http://triosdevblog03.ca/llukanyuk/tutorial/index.html
Thank you.

Hey again, i bumped into another problem today. I cant find to find a good way about how to manage mutliple pages. Is it better to have seperate files for each page and load header and footer into it, or load diferent pages into a content div in the main index file? There is also the option of jquery mobile data-role=page, which i dont know if it is worth using. Could you help me out wiht this one?

That depends highly on what you would like to achieve. If you just have a small website with several pages you can create separate files for each page. If you however have lots of pages containing for example PHP code you might consider using template engine. If you would like to make lots of changes then a CMS might also be a good solution.

Hello, i have 4-8 pages in mind and the content will be mostly static. This means i dont have to use any CMS or serverside languages. It stills goes against my belief and good practices for duplicate code, which is harder to maintain. If i have to change the menu and ad a page i dont want to change it in all the pages which i have, but only once. Well i have some expirence with php, asp, jsp, but this time i wanted to stay away of them, couse i have only static content and javascript should be good enough.

Hi there, first thank you for the great tutorial, but i cant figure out a problem.
I used your code, just deleted the four column section from index and css files. But the images in img slider are starting in the midle of the screen and are stretching to the right. I cant find the settings to center the images.

Thanks in advance, greetings Matjaž

Hello Lingulo :)
Can you just give a simple idea of how you implemented the current menu in your WORDPRESS site?

I mean it becomes a select drop down on smaller screens. I will go with it currently for my WP sites as having a fancy menu for WP is really giving me pain for days.

Thank you

Hi Chris :)
Sorry to bother you always. Please don’t mind :)

I am talking about a Fancy Responsive WordPress Menu like the one I showed you in my HTML (which supports dropdowns) ….. I tried that for days but failed :(

So I have decided that I will use a select dropdown menu for my wordpress site for the time being.
Thats why I asked how you did your Lingulo website menu but I have figured it now… I used a plugin which did the trick :)

Any way will be waiting when you come up with a Fancy Responsive WordPress Menu … In the mean time if I come up with something.. I will let you know.

Thank you

Good Morning Teacher :)
Well I have zero exp. on PHP. But I want to learn how to convert a PSD to WP or even if you can make a Tutorial to convert a HTML to WP, that would also work.

I want to convert my HTML that I showed you to WP :)
Thank you
You regularly respond to your commentors. That’s very nice & kind of you. Much appreciated!

Hi Chris,
Your tutorial is awesome. Do you have an example of the functionality of the nav bar to show the content of each subpage (portafolio, contact, etc) without refresh the entire page?

when will come the 3rd (JS) & 4th (extras) parts of this tutorial?

OK Christoph,
Got a question.

You said “Also we change the width to 60% to make it change its width depending on the website´s width.”

What mathematical calculations are you doing to get 60%? Why not 65% or 75% or any other value?

Thank you

Hey Dpot,

there is no calculation behind it, you could also write 70% for example. Just use whatever you think looks best, I found that 60% looked good so that´s why I chose it.

Greetings
Chris

Hi :)
I have one question.

I have a image (header banner) and navigation bar in the header.

So will I have to use figure element ?

Like this…

Or I can go like this?

Image here

Thank you :)

Leave a comment