Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch

Posted in Coding, Tutorials, Web Interface10 months ago • Written by 29 Comments

Hey guys, we’re really excited to release this resource for you. If you’re following my previous tutorials, I started with the basic one, which is boring for some of you and might be helpful for the beginners who just started learning. If you’ve missed it, check Basic Web Design Video Course.

In this web design video course, I will show you the processes involved on creating a landing page – from planning, searching for inspiration in the top design community, choosing fonts, colour scheme, wire framing and finally transferring the wireframe into Photoshop and rocking it out there. Once we have our PSD design ready, we will convert it into a working website using Twitter Bootstrap. We will be also covering how Bootstrap, scaffolding, base CSS, and JavaScripts work!

Get ready and let’s get started!


Build Flat Responsive Website from Scratch – Complete Course


The Final Product

dipped-design-preview

Resource you will need to complete this tutorial:

The Designing Part

Finding Inspiration & Wire Framing

Let’s assume that we already know what is the goal of the website we’re going to make. The first step is to gather some inspiration that suits your taste for your website and start doing some rough sketches using your pen and paper.

The next thing you will need after finding inspiration is to create a wire frame based on your ideas.

Wireframe to Photoshop

Basing on our wire frame, we will start transferring it into Photoshop to have a much clearer vision of what exactly the website layout will look like. What’s good about doing this is we can focus only in placing the elements like buttons, text headings, and paragraphs in the right position and the right size.

Applying Styles

Here is the exciting part, and that is, applying styles to all of the elements, buttons, fonts and background. In here, we can play around with a lot of stuff, for example, applying filters to images, playing with curves, putting contrast, creating our own shadows to make the elements pop out more.

So that’s it, guys, for the designing part. It’s a matter of trying and playing to come up with a great outcome. Just remember to search for inspiration because designers of the 3 design communities I’ve mention are following the latest trends of web design. It’s not copying but learning from their works. I think there is nothing wrong with that as long as we don’t copy their overall design. So if you’re planning to create yours, please take time to think and plan what’s best for you, gather some inspiration, create a wireframe, choose the right fonts and colour scheme for your brand and, lastly, rock the Photoshop until you have come up with great results.

PSD to HTML using Bootstrap

In the first part of this tutorial, we are working mostly on the graphical part. We’ve also talked about where to find inspiration, colour schemes, grid and much more.

In this 2nd section of the Elegant Landing Page Design in Photoshop tutorial, we will be working on the coding part. In here, we will talk about how to use Twitter Bootstrap for transforming our PSD design into a working website. I will divide this into 3 videos: first one will be about marking up the HTML; the second will be about applying CSS styles and the last one will be taking care of the responsive part. This will take much of your time but if you’re a beginner and willing to learn to transform your own design into a working website, I know you will find time to learn this. Let’s get started!

Resources you will need to complete this tutorial:

HTML Markup

Here, I will walk you through on how easy it is to use Twitter Bootstrap by just linking the appropriate file path to make it work. Then I will guide you step-by-step on how to mark-up properly the HTML base on our design, starting from the header down to the footer.

Applying CSS Styles

Now that we’re done marking up our HTML, it is time to overwrite the styling that Twitter Bootstrap has provided. What’s good with this is we will not be worrying anymore on the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML. All we need to do now is to style the elements to match to our PSD design.

Responsive Part

Alright, you’ve done a lot. Have a break; get some cup of coffee. Done? Finally, we reach the last part of this tutorial, which is to make every section responsive. And also, we will make the banner and testimonial section working as a carousel.

Conclusion

That’s it guys! Imagine how easy and powerful Bootstrap is by the pre-made classes provided for us to use. All we need to do is to properly adjust some padding and margins to make everything look good and balanced.

You’ve done a great job, guys! You just completed the tutorial. I hope you can apply this in your future projects. I wish you learn something from this. Make sure to share it with your friends. If you have comments or suggestions, feel free to drop them below. I’m excited to hear from you. See you guys on the comment section. Cheers!

Need a Host for Your Website?

Free domain and get a 20% discount when you sign up on Bluehost for as low as $3.95 per month!

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

29 Comments Best Comments First
  • Deezide

    Saturday, October 12th, 2013 15:59

    9

    - I am not sure where my first comment went, or whether it is not approved yet. If so, ignore this comment -

    First of all, thank you for this tutorial. It is really helpful for someone that is not familiar with responsive design. Anyway, I have a question:
    How about migrating a website, created with the same technique as in this video, to WordPress? I am new to WP, and do not know whether it is good to use this or not. A friend suggested me to use WordPress, also because clients will need an easy CMS. Thank you in advance.

    +7
  • Deezide

    Saturday, October 12th, 2013 06:25

    8

    How about WordPress? Everybody uses it nowadays, and one of my friends suggested it. It would come in handy when clients want an easy to use CMS. Is it a lot different than this process? Or can I continue by migrating it to WordPress after this tutorial? Thanks in advance.

    +6
  • Miroslav

    Sunday, October 6th, 2013 12:19

    3

    whether it will be a lesson on how to shift this site into wordpress..???

    +6
  • Miroslav

    Saturday, October 5th, 2013 11:23

    1

    Hi.I’m from Serbia. I am a beginner in the design and coding of the site. My english is bad but the video lessons transcend barriers .. Your lessons are the most extensive and best explanation. Sometimes you’re quick but I manage to catch up with you … Carry on with the lessons, and … how it takes years to become a designer and a solid knowledge of HTML, JavaScript, CSS3, jQuery???

    +2
  • Cesar Lee

    Friday, October 11th, 2013 17:19

    7

    I would be also interested in knowing whether you could go over the steps to transfer the website to wordpress. Thanks for sharing your ideas with us, great post!. Cheers!

    +2
  • Web Design Coimbatore

    Friday, October 18th, 2013 03:56

    13

    Great tutorial for web designers. Worth to share :)

    +1
  • Dario

    Sunday, November 3rd, 2013 05:41

    19

    hello Michael,
    first of all thanks for sharing … However, the site does not work with IE8 (as usually). The navbar is not transparent and the background of the hero-unit div is not visible.
    How can I fix this?
    Thanks for your time and sorry for my bad english.

    +1
  • Sameer

    Tuesday, November 5th, 2013 02:06

    21

    Awesome tutorial..
    PSD download link not working..

    +1
  • WindyKiss

    Thursday, November 7th, 2013 07:43

    23

    Great tut! thx bro

    +1
  • Adam Garrett

    Sunday, October 6th, 2013 12:07

    2

    I will just say this. If you are going to wireframe and use bootstrap, instead using Photoshop, there is a visual builder for Bootstrap at http://bootply.com

    +1
  • lse

    Tuesday, October 15th, 2013 13:13

    12

    where the final download zip that includes demo and bootstrap lib?

    0
  • Kukuh Nova Putra

    Monday, October 14th, 2013 16:28

    11

    Well, this is a great tutorial Michael. I think anybody will could build they own website and you help all newbie of web designers.

    0
  • Awais Raza

    Sunday, October 13th, 2013 05:39

    10

    This is truly an awesome tutorial, I was looking for it a way back. I knew how to use twitter bootstrap to make a layout, but I had no idea how to overwrite css effectively. Thanks for another awesome piece.

    0
  • Finesse

    Thursday, October 10th, 2013 17:14

    5

    Hi! Could you please show us how to convert this to WordPress??? And am I allowed to use this template for a personal website?

    0
  • kacash

    Tuesday, October 8th, 2013 20:50

    4

    The vidieo isn’t work in China.May I have the download link?

    0
    • Rean John Uehara

      Thursday, October 10th, 2013 23:36

      6

      Hello!

      Sorry to hear it doesn’t work in China. Here’s a trick: go to http://www.keepvid.com then one by one insert the YouTube links so you can download them.

      Do you have access to the youtube video links?

      +1
  • Alberto

    Saturday, October 26th, 2013 08:50

    15

    I’m from Argentina. This tutorial is great. Thanks for your time. Alberto

    0
  • asep rosadi

    Wednesday, October 23rd, 2013 04:06

    14

    WOW!!! A Great Tutorial thanks

    0
  • Ijja

    Monday, December 16th, 2013 08:28

    26

    Great series, i think it would awesome if you do HTML/CSS and wordpress coding, thnk you for the series.

    0
  • Ijja

    Monday, December 16th, 2013 08:41

    27

    Great tutorial series, it would be awesome if you do wordpress coding, thanks for series

    0
  • sieuhuflit

    Monday, December 23rd, 2013 04:13

    28

    wow, great tuts ,Thanks

    0
  • AbbasKanani

    Thursday, December 26th, 2013 08:49

    29

    I can design photoshop templates, but I dont have any knowledge how to code. I dont know the A B C of coding no idea about html5 and css3, From where to start, Please help

    0
  • Julian

    Sunday, December 1st, 2013 11:42

    25

    Really really awesome tutorial! I’m planning to build my own personal website, and this is just fucking working for me! Thanks man!

    0
  • zSky

    Monday, November 25th, 2013 13:57

    24

    Hi, can you create tutorial to convert step by step this theme to wordpress.
    Thanks

    0
  • Anh

    Sunday, October 27th, 2013 09:54

    16

    Thank you for this great tutorial, but I have a broblem, carousel part didn’t auto start when the page load, it just work after i clicked on the carousel-control ?

    0
  • sam

    Monday, October 28th, 2013 00:14

    17

    Thanks for the tremendous tutorial. Would appreciate if this tutorial is continued to develop WordPress.

    0
  • mangoman

    Wednesday, October 30th, 2013 08:47

    18

    Hie Micheal,

    The tutorial content was more than awesome, pure info without fluff & bluff. I just stuck at responsive part!

    When i made complete page responsive everything gone well except the buttons in the process class, they are misaligned i.e; all the buttons are misaligned at different screen sizes.

    html code:-

    Create Account
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    Add Monitor
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    Get Alerts
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    Check Reports
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    the css:-

    .row h3 {
    font-family: “museo700″;
    font-size: 22px;
    margin-bottom: 30px;
    }
    .row p {
    font-size: 14px;
    font-family: Helvetica Neue;
    color: #777777;
    margin-bottom: 30px;
    }

    }
    .row .btn {
    margin: 30px;
    text-align: center;

    }

    I searched over google for aligning all the four buttons horizontally didn’t have a clue about css too…. I’ve just started from fresh. Went good upto coding in html,css, psd. But in responsive part it took more time than everything done now.

    0
  • J World

    Tuesday, November 5th, 2013 07:04

    22

    One of the best tutorials I’ve ever met….
    Cheers!

    0
  • Arif

    Sunday, November 3rd, 2013 09:48

    20

    Well done ! This is very effective tutorial for us, i am impressed for this and hope it will be continue.

    Thanks

    -1
  • AbbasKanani

    Thursday, December 26th, 2013 08:49

    29

    I can design photoshop templates, but I dont have any knowledge how to code. I dont know the A B C of coding no idea about html5 and css3, From where to start, Please help

    0
  • sieuhuflit

    Monday, December 23rd, 2013 04:13

    28

    wow, great tuts ,Thanks

    0
  • Ijja

    Monday, December 16th, 2013 08:41

    27

    Great tutorial series, it would be awesome if you do wordpress coding, thanks for series

    0
  • Ijja

    Monday, December 16th, 2013 08:28

    26

    Great series, i think it would awesome if you do HTML/CSS and wordpress coding, thnk you for the series.

    0
  • Julian

    Sunday, December 1st, 2013 11:42

    25

    Really really awesome tutorial! I’m planning to build my own personal website, and this is just fucking working for me! Thanks man!

    0
  • zSky

    Monday, November 25th, 2013 13:57

    24

    Hi, can you create tutorial to convert step by step this theme to wordpress.
    Thanks

    0
  • WindyKiss

    Thursday, November 7th, 2013 07:43

    23

    Great tut! thx bro

    +1
  • J World

    Tuesday, November 5th, 2013 07:04

    22

    One of the best tutorials I’ve ever met….
    Cheers!

    0
  • Sameer

    Tuesday, November 5th, 2013 02:06

    21

    Awesome tutorial..
    PSD download link not working..

    +1
  • Arif

    Sunday, November 3rd, 2013 09:48

    20

    Well done ! This is very effective tutorial for us, i am impressed for this and hope it will be continue.

    Thanks

    -1
  • Dario

    Sunday, November 3rd, 2013 05:41

    19

    hello Michael,
    first of all thanks for sharing … However, the site does not work with IE8 (as usually). The navbar is not transparent and the background of the hero-unit div is not visible.
    How can I fix this?
    Thanks for your time and sorry for my bad english.

    +1
  • mangoman

    Wednesday, October 30th, 2013 08:47

    18

    Hie Micheal,

    The tutorial content was more than awesome, pure info without fluff & bluff. I just stuck at responsive part!

    When i made complete page responsive everything gone well except the buttons in the process class, they are misaligned i.e; all the buttons are misaligned at different screen sizes.

    html code:-

    Create Account
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    Add Monitor
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    Get Alerts
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    Check Reports
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Read More

    the css:-

    .row h3 {
    font-family: “museo700″;
    font-size: 22px;
    margin-bottom: 30px;
    }
    .row p {
    font-size: 14px;
    font-family: Helvetica Neue;
    color: #777777;
    margin-bottom: 30px;
    }

    }
    .row .btn {
    margin: 30px;
    text-align: center;

    }

    I searched over google for aligning all the four buttons horizontally didn’t have a clue about css too…. I’ve just started from fresh. Went good upto coding in html,css, psd. But in responsive part it took more time than everything done now.

    0
  • sam

    Monday, October 28th, 2013 00:14

    17

    Thanks for the tremendous tutorial. Would appreciate if this tutorial is continued to develop WordPress.

    0
  • Anh

    Sunday, October 27th, 2013 09:54

    16

    Thank you for this great tutorial, but I have a broblem, carousel part didn’t auto start when the page load, it just work after i clicked on the carousel-control ?

    0
  • Alberto

    Saturday, October 26th, 2013 08:50

    15

    I’m from Argentina. This tutorial is great. Thanks for your time. Alberto

    0
  • asep rosadi

    Wednesday, October 23rd, 2013 04:06

    14

    WOW!!! A Great Tutorial thanks

    0
  • Web Design Coimbatore

    Friday, October 18th, 2013 03:56

    13

    Great tutorial for web designers. Worth to share :)

    +1
  • lse

    Tuesday, October 15th, 2013 13:13

    12

    where the final download zip that includes demo and bootstrap lib?

    0
  • Kukuh Nova Putra

    Monday, October 14th, 2013 16:28

    11

    Well, this is a great tutorial Michael. I think anybody will could build they own website and you help all newbie of web designers.

    0
  • Awais Raza

    Sunday, October 13th, 2013 05:39

    10

    This is truly an awesome tutorial, I was looking for it a way back. I knew how to use twitter bootstrap to make a layout, but I had no idea how to overwrite css effectively. Thanks for another awesome piece.

    0
  • Deezide

    Saturday, October 12th, 2013 15:59

    9

    - I am not sure where my first comment went, or whether it is not approved yet. If so, ignore this comment -

    First of all, thank you for this tutorial. It is really helpful for someone that is not familiar with responsive design. Anyway, I have a question:
    How about migrating a website, created with the same technique as in this video, to WordPress? I am new to WP, and do not know whether it is good to use this or not. A friend suggested me to use WordPress, also because clients will need an easy CMS. Thank you in advance.

    +7
  • Deezide

    Saturday, October 12th, 2013 06:25

    8

    How about WordPress? Everybody uses it nowadays, and one of my friends suggested it. It would come in handy when clients want an easy to use CMS. Is it a lot different than this process? Or can I continue by migrating it to WordPress after this tutorial? Thanks in advance.

    +6
  • Cesar Lee

    Friday, October 11th, 2013 17:19

    7

    I would be also interested in knowing whether you could go over the steps to transfer the website to wordpress. Thanks for sharing your ideas with us, great post!. Cheers!

    +2
  • Finesse

    Thursday, October 10th, 2013 17:14

    5

    Hi! Could you please show us how to convert this to WordPress??? And am I allowed to use this template for a personal website?

    0
  • kacash

    Tuesday, October 8th, 2013 20:50

    4

    The vidieo isn’t work in China.May I have the download link?

    0
    • Rean John Uehara

      Thursday, October 10th, 2013 23:36

      6

      Hello!

      Sorry to hear it doesn’t work in China. Here’s a trick: go to http://www.keepvid.com then one by one insert the YouTube links so you can download them.

      Do you have access to the youtube video links?

      +1
  • Miroslav

    Sunday, October 6th, 2013 12:19

    3

    whether it will be a lesson on how to shift this site into wordpress..???

    +6
  • Adam Garrett

    Sunday, October 6th, 2013 12:07

    2

    I will just say this. If you are going to wireframe and use bootstrap, instead using Photoshop, there is a visual builder for Bootstrap at http://bootply.com

    +1
  • Miroslav

    Saturday, October 5th, 2013 11:23

    1

    Hi.I’m from Serbia. I am a beginner in the design and coding of the site. My english is bad but the video lessons transcend barriers .. Your lessons are the most extensive and best explanation. Sometimes you’re quick but I manage to catch up with you … Carry on with the lessons, and … how it takes years to become a designer and a solid knowledge of HTML, JavaScript, CSS3, jQuery???

    +2

Comments are closed.

54.83.241.88 - unknown - unknown - US