Total Followers 132,503
Hello everyone, this is Mike and welcome to my Basic Web Design Video Course.
In this course I will walk you through the very basic steps on what to do and what to learn before, and during, building a website.
You’ll learn all the steps I use including:
Resources in this tutorial:
Wireframe: Download!
Finished PSD: Download!
Part 1: Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing
Part 2: Basic Web Design Video Course – Basic HTML Tags, Structure & CSS Properties
Part 3: Basic Web Design Video Course – Complete HTML Markup & CSS Styles
For our valuable readers we will be pushing the basics here. So it’s your chance to learn and become a web designer for free. Are you excited? I hope that beginners can follow through, if anything is unclear just reach out to me in the comments section.
I will do my best to walk you through everything slowly and clearly. So let’s get started!
What is a wireframe?
A wireframe is a visual presentation of how a website’s layout will look when it’s finished. It’s about structuring the overall layout without any graphics, placing the various elements where you believe they will look and work best. Wireframing is a great step to start before jumping on to Photoshop because it allows you to focus on the important components of the website without all the visual clutter of a finished design. Wireframing also saves you time when designing a website because wireframing acts as a sketch, and instead of having to do things more than once in Photoshop, you can just adjust your ‘sketch’ until you’re happy.
Your wireframe should include boxes that represents images, header, footer, sidebars, text blocks, navigation and other content aspects of your website.
You don’t have to worry about drawing them yourself, since there are many wireframing tools available on web.
Tools Used: Go Mocking Bird
Some beginners know the functions of specific tools, take the Ruler Tool(I) as an example. The problem is they don’t know how to look for the distance when they measure and how to turn the guides on and off. Especially those who are using earlier versions of Photoshop. Like this question in Quora What is the shortcut to display the distance between two guides in Photoshop?. So in this part I will walk you through the basic Tools and Panels in Photoshop, talk about how important they are and how each tool will help you create your design in Photoshop.
Now that we have the general idea for our website’s layout, it’s time to tone this up and make it more presentable in Photoshop. Let’s make this design as simple as possible.
In the next part we will be talking about the basics of HTML and CSS and with this knowledge we will convert our simple design into a working website.
So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestion regarding the videos or how I presented it please leave a comment below. I’m really excited to hear your thoughts in the comment section, see you guys down there.
Peace!
Get The Only Freelancer crash course you will ever need to read!
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. Other than that he loves Coffee and his Girl.
Tuesday, May 14th, 2013 16:05
Oh my goodness!! Very helpful tutorials!! Thank you so much!
Saturday, May 11th, 2013 10:25
You’re best tutor, keep up. I’m going to make my website and I gotta put ur name into it, Thank uu!
Tuesday, March 26th, 2013 16:40
Thanks for this awesome tutorial .. Hope i will be able to learn web design this time.. Thanks again..
Friday, March 22nd, 2013 04:40
how do you always find such perfect topics? I search many times on your site to find interesting inputs. Compliment!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
vijay
Tuesday, February 26th, 2013 02:28
very nice article… Enjoyed!! keep it up.
Michael John Burns
Tuesday, February 26th, 2013 23:15
Hello Vijay,
Hope you enjoyed the article.
Watch out for the next part.
Have a great day!
Danny Campbell
Monday, February 25th, 2013 21:40
thank you Michael, this has been very informative, and helpfull, I am not about to criticise your resolutions etc as I am thanful enough that you took time to post these free lessons, I am an A+ certified technician who recently qualified as a web designer, I have only done a couple of designs/ sites till now but Iam always looking out for hints and tips ,and your tutorials have (so far ) given me just that. again thank you, I look forward to any future tutorials
Danny
Michael John Burns
Monday, February 25th, 2013 22:38
Hello Danny,
Thanks for understanding and you’re welcome. I’ve mistaken to record this that’s why. Promise on the part 2 all videos are HQ.
Congratulations! Danny, Good luck and keep on learning.
Paul
Tuesday, February 26th, 2013 06:47
Why Photoshop? Fireworks would be far mor suitable.
Michael John Burns
Tuesday, February 26th, 2013 23:12
Hello Paul, Yep Fireworks must suite in design a web layout.
But it’s a matter of choice and most of the people have Photoshop than Fireworks.
Honestly when I started in web design I don’t know about this Fireworks stuffs.
Since most of the tutorial regarding to graphic used Photoshop. I hope you understand.
Praveen Bhardwaj
Tuesday, February 26th, 2013 06:48
Great videos. I’ve downloaded all of them. Thanks a lot for sharing.