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

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!

Michael John Burns

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.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. AbbasKanani says

    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

  2. Julian says

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

  3. says

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

    Thanks

  4. Dario says

    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.

  5. mangoman says

    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.

  6. says

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

  7. Anh says

    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 ?

  8. Kukuh Nova Putra says

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

  9. Awais Raza says

    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.

  10. Deezide says

    - 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.

  11. Deezide says

    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.

  12. says

    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!

  13. Finesse says

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

  14. Miroslav says

    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???