Responsive web design is used to make sure a site is optimized for any device. In this tutorial I’ll create 3 optimized sites in one video and walk you through my process the whole way through.
If you have any questions about HTML5 or CSS3 I cover them in these 2 tutorials HTML5 Tutorial and CSS3 Tutorial. All of the code from the video can be found below.
If you like videos like this, it helps to tell Google with a click here
Code From the Video
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!DOCTYPE html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/style_large.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:980px)" href="css/style_768.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:600px) and (max-width:767px)" href="css/style_600.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:300px) and (max-width:599px)" href="css/style_300.css"> </head> <body> <div class="wrapper"> <aside> <img src="images/logo.png" id="logo" alt="new think tank logo"> <ul class="sb-icon-list"> <li class="sb-item first-sb"> <span class="list-span">About</span> </li> <li class="sb-item second-sb"> <span class="list-span">Contact Us</span> </li> <li class="sb-item third-sb"> <span class="list-span">Blog</span> </li> <li class="sb-item fourth-sb"> <span class="list-span">Videos</span> </li> <li class="sb-item fifth-sb"> <span class="list-span">Podcast</span> </li> </ul> <div id="social"> <span id="social-title">LET'S TALK</span> <img class="social-icons" src="images/facebook-ic.png"> <img class="social-icons" src="images/twitter-ic.png"> <img class="social-icons" src="images/rss-ic.png"> </div> </aside> <main> <img src="images/eyes.png" id="big-image"> <div id="newsletter"> <span id="signup-txt">Sign up for our free newsletter to stay up to date on my newest tutorials, podcasts and giveaways</span> <span class="subscribe-span"> <input type="text" name="email" class="email-input"> <span class="button">Subscribe</span> </span> </div> <div class="article-block"> <div class="article first-art"> <img src="images/first-tn.png"> <div class="art-title">Slow and Steady Win the Race</div> <div class="art-excerpt"> Here is a random picture of something and isn’t wonderful. I’ll talk about it in this article which I’m sure you will enjoy. Just click the picture to read more. </div> </div> <div class="article second-art"> <img src="images/second-tn.png"> <div class="art-title">Take Time to Enjoy the Little Things</div> <div class="art-excerpt"> Here is a random picture of something and isn’t wonderful. I’ll talk about it in this article which I’m sure you will enjoy. Just click the picture to read more. </div> </div> <div class="article third-art"> <img src="images/third-tn.png"> <div class="art-title">Always Keep Your Eyes on the Prize</div> <div class="art-excerpt"> Here is a random picture of something and isn’t wonderful. I’ll talk about it in this article which I’m sure you will enjoy. Just click the picture to read more. </div> </div> <div class="article fourth-art"> <img src="images/fourth-tn.png"> <div class="art-title">The Benefits of Being Cute</div> <div class="art-excerpt"> Here is a random picture of something and isn’t wonderful. I’ll talk about it in this article which I’m sure you will enjoy. Just click the picture to read more. </div> </div> </div> </main> </div> <!-- End of Wrapper --> </body> </html> |
style_large.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 62.5%; font-family: arial, sans-serif; color: #221F51; } .wrapper { font-size: 1.6em; padding: 2em; margin: 0 auto; width: 990px; background-color: white; } #logo { margin-bottom: 15px; } .sb-item { height: 34px; list-style-type: none; margin-bottom: 21px; } .sb-icon-list { margin-bottom: 60px; } /* Icons for sidebar list */ .first-sb { background: url('../images/first-sb.png') bottom left no-repeat; } .second-sb { background: url('../images/second-sb.png') bottom left no-repeat; } .third-sb { background: url('../images/third-sb.png') bottom left no-repeat; } .fourth-sb { background: url('../images/fourth-sb.png') bottom left no-repeat; } .fifth-sb { background: url('../images/fifth-sb.png') bottom left no-repeat; } .list-span{ display: inline-block; padding-left: 45px; padding-top: 8px; font-size: 1.4em; } #social-title { display: block; border-bottom: 1px dashed #221F51; width: 143px; padding-bottom: 5px; margin-bottom: 10px; } .social-icons { padding-right: 7px; } aside { float:left; margin-right: 35px; } main { float: right; } #big-image { margin-bottom: 50px; } #newsletter { background: url('../images/newsletter-ic.png') bottom left no-repeat; height: 34px; padding-left: 54px; position: relative; /* So I can position subscribe-span */ margin-bottom: 50px; } #signup-txt { width: 317px; display: inline-block; font-size: .9em; margin-right: 60px; padding-top: 5px; } .email-input { height: 30px; width: 170px; margin-right: 30px; } .button { border:1px solid #999999; -webkit-border-radius: 42px; -moz-border-radius: 42px; border-radius: 42px; font-size:12px; padding: 5px 15px 5px 15px; text-decoration:none; display:inline-block; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); font-weight:bold; color: #000000; background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF); } .subscribe-span{ position: absolute; bottom: 10; margin-top: 8px; } .article { display: inline-block; width: 166px; margin-right: 16px; } .art-title { margin-top: 10px; margin-bottom: 10px; } .fourth-art { margin-right: 0px; } |
style_768.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 62.5%; font-family: arial, sans-serif; color: #221F51; } .wrapper { font-size: 1.6em; padding: 2em; margin: 0 auto; width: 768px; background-color: white; } #logo { /* margin-bottom: 15px; NEW */ display: inline-block; /* NEW */ } .sb-item { height: 62px; /* NEW */ width: 48px; /* NEW */ list-style-type: none; margin-bottom: 0px; padding-top: 50px; /* NEW */ display: inline; /* NEW */ margin-left: 35px; /* NEW */ } .sb-icon-list { margin-bottom: 50px; /* NEW */ width: 540px; /* NEW */ display: inline-block; } /* Icons for sidebar list NEW */ .first-sb { background: url('../images/first-sb.png') top center no-repeat; } .second-sb { background: url('../images/second-sb.png') top center no-repeat; } .third-sb { background: url('../images/third-sb.png') top center no-repeat; } .fourth-sb { background: url('../images/fourth-sb.png') top center no-repeat; } .fifth-sb { background: url('../images/fifth-sb.png') top center no-repeat; } .list-span{ display: inline-block; padding-left: 0px; /* NEW */ padding-top: 8px; font-size: 1.4em; } /* NEW Eliminates the social part all together */ #social { display: none; } /* NEW aside { float:left; margin-right: 35px; } */ main { /* float: right; NEW */ } #big-image { margin-bottom: 50px; } #newsletter { background: url('../images/newsletter-ic.png') bottom left no-repeat; height: 34px; padding-left: 54px; position: relative; /* So I can position subscribe-span */ margin-bottom: 50px; } #signup-txt { width: 317px; display: inline-block; font-size: .9em; margin-right: 60px; padding-top: 5px; } .email-input { height: 30px; width: 170px; margin-right: 30px; } .button { border:1px solid #999999; -webkit-border-radius: 42px; -moz-border-radius: 42px; border-radius: 42px; font-size:12px; padding: 5px 15px 5px 15px; text-decoration:none; display:inline-block; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); font-weight:bold; color: #000000; background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF); } .subscribe-span{ position: absolute; bottom: 10; margin-top: 8px; } .article { display: inline-block; width: 166px; margin-right: 16px; } .art-title { margin-top: 10px; margin-bottom: 10px; } .fourth-art { margin-right: 0px; } |
style_600.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 62.5%; font-family: arial, sans-serif; color: #221F51; } .wrapper { font-size: 1.6em; padding: 1.8em; margin: 0 auto; width: 600px; /* NEW */ background-color: white; } /* NEW */ #logo { display: inline-block; height: 96px; width: 84px; margin-left: -15px; } .sb-item { /* height: 62px; width: 48px; padding-top: 50px; */ margin-bottom: 0px; /* NEW */ display: inline; list-style-type: none; margin-left: 14px; background: none; } .sb-icon-list { margin-bottom: 50px; width: 430px; display: inline-block; font-size: .9em; } /* .first-sb { background: url('../images/first-sb.png') top center no-repeat; } .second-sb { background: url('../images/second-sb.png') top center no-repeat; } .third-sb { background: url('../images/third-sb.png') top center no-repeat; } .fourth-sb { background: url('../images/fourth-sb.png') top center no-repeat; } .fifth-sb { background: url('../images/fifth-sb.png') top center no-repeat; } */ .list-span{ display: inline-block; padding-left: 0px; padding-top: 8px; font-size: 1.4em; } /* Eliminates the social part all together */ #social { display: none; } #big-image { margin-bottom: 50px; width: 570px; height: 355px; } #newsletter { background: url('../images/newsletter-ic.png') bottom left no-repeat; height: 34px; padding-left: 54px; position: relative; /* So I can position subscribe-span */ margin-bottom: 50px; } #signup-txt { width: 246px; display: inline-block; font-size: .7em; margin-right: 15px; padding-top: 5px; } .email-input { height: 25px; width: 150px; margin-right: 15px; } .button { border:1px solid #999999; -webkit-border-radius: 42px; -moz-border-radius: 42px; border-radius: 42px; font-size:12px; padding: 5px 10px 5px 10px; text-decoration:none; display:inline-block; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); font-weight:bold; color: #000000; background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF); background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF); } .subscribe-span{ position: absolute; bottom: 10; margin-top: 8px; } .article { display: inline-block; width: 166px; margin-right: 29px; } .art-title { margin-top: 10px; margin-bottom: 10px; } .third-art { margin-right: 0px; } .fourth-art { margin-right: 0px; } /* NEW */ .fourth-art { display: none; } |
Leave a Reply