CSS

How to build a HTML5 website from scratch – Part 2

Google+ Pinterest LinkedIn Tumblr

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.

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.

I am a frontend and backend web developer who loves building up new projects from scratch. In my blog "Lingulo" me and some guest authors regularly post new tutorials, web design trends or useful resources.

Subscribe
Notify of
guest
141 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
marko
marko
6 years ago

Thank you for this great tutorial. It’s one of the best on the net. I would like to ask about exact needed dimensions of the images – I couldn’t find them, so I used some other images and got everything mixed up. Thanks

Poker88
6 years ago

Thank you mate for this GOOD ARTICLE !!

agouk wong
6 years ago

Great Sharing,

skalekarr
skalekarr
6 years ago

I am new to HTML5 and responsive wed designing and this tutorial was very helpful in understanding the core concepts. Also appreciate the very useful resource you have put up in this tutorial. Great job. Thank you very much

Tagreed
Tagreed
7 years ago

hello mr, where can i see the final result of the website ?

Miss Elli
Miss Elli
7 years ago

Thank you for the very helpful and excellent tutorial. It helped me reworking the site of our local chess club: http://www.schachclub-denzlingen.de

poker online
7 years ago

thank u

Beth
Beth
7 years ago

Ooops, meant to type png

Beth
Beth
7 years ago

I swapped out your text logo for a pgn logo, but when I minimize the window on the computer the nav bar ends up over the top of the logo. What am I doing wrong?

Chris
Chris
7 years ago

Dieser Teil ist leider in Englisch. Schade

daftar poker88
7 years ago

thank u

Sil
Sil
7 years ago

Thanks a lot for the tutorials.its excellent. but i have an issue with the slider, it gone awol , its a;; over the place, can u help me out please

ali
ali
7 years ago

i mean which folder should i use for dist folder in lightbox or src folder ?

ali
ali
7 years ago

hey chris how i use lightbox.css file it has alot of files in having different folders including js and js.min files its a bit confusing.

lot for sale salitran dasmarinas cavite

Everything is very open with a precise explanation of the issues. It was definitely informative. Your site is extremely helpful. Thanks for sharing!

adam
8 years ago

Hi Chris,
Your tutorial is awesome.
got i question , i have downloaded your website how to navigate menu?
when i create other web page and try to link it didn’t go to that page?

help?

alen
alen
8 years ago

Hi.

excellent tutorial. makes my day 🙂
I manage to make custom responsive page in few hours.
Question: how to make one title static and visible over all slides?

thank you for your time

Joseph
Joseph
8 years ago

If your site contains very little content, the footer won’t stick to the bottom of the page. Any idea how to change that?

Regards, Joseph

Rui Machado
8 years ago

hey there

Congrats for the 5 stars tuturial of HTML5
Can you please tell me how i make the Slideshow higher, where can i modify it’s Height

Best regards

David Mesaros
David Mesaros
8 years ago

Hi Lingulo,

Excellent tutorial , thank you so much for sharing.. I hope one day I can give back to the world and help other people, like you have … thank you again 🙂

Jiri
Jiri
8 years ago

Cool tutorial, thanks!

Brian
Brian
8 years ago

Thanks for the great tutorial. I have made some changes and have almost everything working correctly. I have not written any html in 10+ years. I am really struggling with ie 11 and several elements such as border-radius. Any help with making this work better in ie 11 would be great.

david
david
8 years ago

Hi 🙂
Thanks for informative share!

ihave got a problem
the online preview works fine but when i run github files on my local server (wamp)[ and also im connected to the ethernet]
some features disapear and it dosnt look like as good as your preview!
whats wrong ?!

Rek
Rek
8 years ago

Hi Chris,

Thanks for creating such a helping tutorial.

I have very less experience in html and css,I could do the first part and the styling from the second part without doubt referrring to this tutorial.But when i run the site the slide show is not working for me ,I included all the js,css files as given in the tutorial.I put the javascript function in this included file ,but it is not working . Please can you help me?

Regards
Rek

Keith
Keith
8 years ago

Hi – I just wanted to congratulate you on an excellent piece of work. I’ve been struggling with ‘responsive’ for a while and your tutorial has really helped – many thanks.

Pieter
8 years ago

Hi Chris,

Am starting now with part two of this tutorial. But just wanted to say, really excellent work! Thanks a lot for your in depth explanation. This was exactly the exercise I needed tot take the next step in learning Front-end development.

Keep up the good work!
All the best,

Pieter

deke
deke
8 years ago

Very impressive tutorials–P1 and P2. Recognizing that you created these some time ago, could you give some feedback on how to manage server-side images to be shown on Retina displays, considering their density level are so much greater than non-Retina displays. I have briefly looked into this issue and see that Retina images need to be a unique file name and js code is needed to detect which image to download to browser. Can you update your tutorial to address this issue or explain in your response how to handle support for Retina displays? Again, thank you for your tremendous… Read more »

YOGESH JOSHI
8 years ago

give guidance in details about responsive website throught html5

Tyrone
8 years ago

Hello Chris,

Got a query – the images in the slider are meant to be 300px high, yet they are being stretched to 1676px high, any reason why this might be happening? I’ve run through your tutorial word for word but still no luck? Thanks 🙂

Tyrone
8 years ago

Hello,

Got an issue: in the slider I have my own images with dimensions set to 400px wide x 300px high. The slider is set to a height of 235 as per your tutorial, but when you view the properties of the image on the webpage it shows as being 1424px high. Is there any reason why it is doing this? Go to https://www.sjsparkles.co.uk/website_new/index.php to see what I mean. Thanks

Tolga
Tolga
8 years ago

hey Chris, erst einmal HUT AB für das geniale Tutorial. Ich bin wohl dennoch zu blöd um das NAVi-Menu zu erweitern. Wenn ich in der index die Linkliste erweitere um weitere (sagen wir mal 4 Link) dann schiebt sich die Navigation in den Headtext hinein und es überlagert sich. Voralem auch beim verkleinern des Browsers. Wie verhinder ich das? Ich bräuchte so ca 6-8 Menupunkte in meiner Navigation. Bitte hilfe, steh auf dem Schlauch.

Roland
Roland
9 years ago

Hi Chris,
a quick question…
Why is that the ‘rocket’ and the ‘clock’ animation not working for me? I have opened your preview in the same browser and it’s working fine but that’s not the case for my page.
Mine just fades on mouseover 🙁
I have been using the same browser, same versions for both pages.

Could you tell me what’s wrong?

Thanks!

Umukoro, B. K.
9 years ago

Master Chris, I salute! Thanks so much for not holding back on sharing your knowledge with others. Following the detailed instructions on this great website, I’m proud to inform you that the skills you teach have helped me, a complete newbie, to build a website from scratch for a friend. The testing url of the website is http://www.testpage.regbasic.com . The site has served as an experimental site where I test, with a view to perfecting web design skills I’m acquiring as a newbie. Obviously, the website still needs a lot of improvement and under construction. It is just my first… Read more »

Nele
Nele
9 years ago

Hi, Cris!
Great tutorial. I really appreciate your efforts and good intentions to share knowledge with others. Thank you!

I read the whole tutorial. I’m not sure, but I think that I have not seen an explanation of how an image on the page can become rensposive (as using Bootstrap by adding class = “img-responsive”). Personally, I like it this way, where all the elements of designing how I want.
Could you give me advice on how to implement principles of responsability on some larger pictures on my website?

Hope you’ll find some time to answer my question. Thanks!

thuốc chống xuất tinh sớm tốt nhất

Great post ! thank you so much about this post
I have been had than exp more to develop template

Werner
Werner
9 years ago

Kommt der zweite Teil des Tutorials noch in deutsch? Ich bin leider in englisch nicht so perfekt um das Tutorial zu verstehen.
Danke
Werner

Soowec
9 years ago

Thanks a lot for this tutorial. It is a great one. In fact you have not left anything untouched. You have added some real technical issues to make the tutorial a total delivery. It requires a great effort to have put the various resources together. I love the work. You have provided the right framework to re design any website as a responsive HTML5 website.

joe
joe
9 years ago

Hi I am using your tutorial to remake the site above, what I would like is instead of having the four-columns section and the two-columns section, I would like the photo (house bottom of page) to cover this area so it sits where these would be. Any ideas how to do it? would I delete the aforementioned sections and create a new section or div?

Jermaine
Jermaine
9 years ago

Hi Chris,

I will like to replace the images used with my own images but i am experiencing some positioning images.

Can the layout only work with images from the mage provider you provided or can i use my own copyrighted images?

Many thanks,
Jermaine

yoshi
yoshi
9 years ago

Cooles Tutorial Chris. Sehr verständlich erklärt – Hut ab!
Eine Frage habe ich trotzdem:
Wie kann ich die Fotos im Slider an den Slider anpassen?
Ich möchte nicht die Fotos am Browser anpassen.

Shelly
Shelly
9 years ago

Hello! Two things:
1) Thank you for the tutorial! It’s awesome! 😀

2) How do I add sub-level(s) to the menu? I’d like for another set of links to appear when you (1) hover on the links (in full screen) and (2) click on the boxes (in small screen). Please help!

Sebastian
Sebastian
9 years ago

Hallo Chris, ein richtig tolles Tutorial. Hat mir wirklich geholfen. Ein kleines Problem habe ich jedoch noch.
Wie ist es möglich dem mobilen Menü eine weitere Ebene, also Unterpunkte, hinzuzufügen? Beim “normalen” Menü habe ich das hinbekommen. Beim mobilen scheitere ich allerdings.

Vielen Dank und Grüße aus München

YourFriend
9 years ago

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.

TD
TD
9 years ago

Never mind I got it.

TD
TD
9 years ago

Hi Chris,

Loved your tutorial. But it seems that the slider doesn’t work on mine.. it’s cropped off on the left side.
Here is a screen capture:
http://s4.postimg.org/ydn9c3m30/Untitled.jpg

How to fix it? Btw, it’s loaded in my localhost.

Thanks in advance,
TD

Melanie
9 years ago

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… Read more »

Melanie
9 years ago

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.

trackback

[…] I hope you liked the first part of the tutorial, please feel free to tell me how you liked it in the comment section. To continue with the second (which is also the last part) of this tutorial, click here. […]

Babatunde Ibidapo
Babatunde Ibidapo
9 years ago

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

Babatunde Ibidapo
Babatunde Ibidapo
9 years ago

Great Work. but i cannot find the script.js for the alternative menu. please where can I get it.

Thanks