Total Followers 132,503
Have you decided to learn web design?
Congratulations! Web design can be one of the most useful skills to acquire in your professional career. Your first 30 days of learning are crucial because many people simply give up after a week or two. In this article, we’ll go through some useful tips and tricks to help you get started with web design and stay on track.
Saying “I want to learn web design” is like saying “I want to learn how to cook”. There are thousands of recipes out there and many different styles of cooking.
There are thousands of web design specific tools and general principles that every designer should know. Since web design is such a broad field, many people simply ask how to get started! It’s this question that stops people from even getting started at all with web design. With so many tools to choose from to start learning, they end up at not choosing anything at all. This is a well-documented psychological principle.
I, too, was overwhelmed by the choices I had to make about how and where to get started with web design. Should I learn Dreamweaver first? Or Photoshop? Or maybe learn how to code in JavaScript? I could have done any of those things. The truth of the matter is, there are lots of resources for learning design, so many of us face an overload of choice and when you have plenty of choices, you often tend not to make one at all.
Dreamweaver is basically a program that helps you code HTML and CSS faster. It’s a text editor and you can just as easily start with Notepad, but you’ll spend a lot more time coding. So Dreamweaver is basically a time saver, but not a good tool to get started learning web design. That’s what I learned the hard way.
So I chose to learn HTML and CSS first before learning any software.
Most of the websites (I’m guessing 99%+) are made in HTML. Just go to your favorite website and press CTRL+U (this should work on most browsers, alternatively, find the “View Source” option in your browser).
Do you see things like <p>, <a>, <strong>, <script type=’text/javascript’>, <span>, <style> and so on? Those are called HTML tags. No worries if you know nothing of this, you will soon.
HTML is the structure of almost any modern website. What about CSS?
CSS is basically giving that structure a style. Without CSS, websites would look awful, something like a bunch of text in a Notepad file.
To truly understand and become a good web designer, I think it’s crucial to know these two simple languages. The good thing is, they are really easy to learn once you grasp the logic behind them. Don’t worry, this has nothing to do with actual programming languages like PHP, Javascript or C++. They’re entirely different universes. Learning HTML and CSS as compared to these languages is like learning how to ride a bike versus flying an airplane. Do you know how to ride a bike? Then you probably have the ability to learn HTML and CSS. Here’s how:
This is where I’ve tried and failed numerous times. In my opinion, choosing the right books on learning a particular topic can be the difference between giving up and staying on track. The right book will present everything concisely in a fun and engaging way.
One such book is Head First HTML & CSS. Generally, speaking, all “Head First” books are better than other literature on the topic.
This book might be the only book on HTML and CSS that actually focuses on your learning experience. They apply a lot of research-based learning principles to help you stay motivated and, most importantly, help you feel that you have accomplished something! This is the problem with other books: they simply have no feedback mechanism to tell you that you’ve made some progress (some of them tell you “congratulations” after finishing the entire book, but that’s far from enough). You have a pretty extensive preview on Google Books if you want to see what Head First HTML & CSS is all about.
Before accidentally stumbling upon this book, I had tried around four other books but gave up on all of them mostly because somewhere in the middle, I found myself stuck at a concept that those books failed to explain in a clear way. No matter how many times I tried to “re-read” that section of the book, it was impossible to grasp it. Yes, searching on Google helped, but after the third or the fourth time getting stuck on a concept, I started wondering “Why should I continue reading the book at all when things are explained so poorly? Why should I waste my time with it when I can pick up another book or learn from the web since I’m Googling everything they say to get a better grasp of it?”
Trust me when I say it, choosing a GREAT book to get started with ANY topic is a major deal.
2012 was a great year for the “online education” industry. There were a lot of new startups to really help you learn web design. Some of them are:
Of course, you always have 1stWebDesigner and some of its really amazing articles, such as:
I highly recommend you read these articles but only after you have set your foundation right with a good book.
Consistency is the key when getting started with web design. Are you learning everyday? Are you applying whatever new concepts you learn at least three times a week? Learning a little bit everyday is way better than covering a lot of material in just one day of the week.
But how exactly do you get consistency? Are there any ways to improve your chances of taking more action regularly?
I once read about a study where the goal was to get more students to do a specific thing like writing a report. The researchers separated the students into three groups:
Can you guess which group completed the task more than the two groups?
It was the third group, which was not just told what to do, but also when and where to do that thing.
When you want to do something specific, it’s also a good idea to specify when and where you plan to do it. The “when” part doesn’t have to be at a specific time. It can be “immediately after I wake up” or any other activity you normally do, like “immediately after I get back from the gym”.
It’s also a good idea to keep track of all your daily tasks using a checklist. Tracking my goals for the day enabled me to discover the periods of the day when I am most productive (it was in the morning, immediately after I used to wake up).
Motivating oneself regularly helps you accomplish more with your time.
For example, I was a lot more motivated to learn programming when I read blogs like TechCrunch talking about various small startups being bought for millions. The startups were all software-based and some were relatively simple to make — this pumped up my motivation even more!
Discovering what motivates you can be discovered mainly by observing yourself and the way you act.
If you were surfing the web and stumbled on this article and got to this part, I want you to slow down and relax now. Just forget about everything for a moment. Ignore that rush of browsing to the next webpage and then the next… one of the best ways to gain self-control is to relax for a moment.
Now think: can you set up a goal tomorrow at some exact time to start learning web design? A goal such as “Read 30 minutes of Head First HTML & CSS, or some other preferred book.” Also, when will you start? 3PM? 4PM? Immediately after waking up? Decide the time.
What is the current biggest obstacle that you’re facing when learning web design? I’ll be waiting for your feedback in the comments!
Get The Only Freelancer crash course you will ever need to read!
Executive editor of FinderMind magazine, a people search engine on helping you find long-lost friends.
Monday, March 4th, 2013 22:36
What about visual design – actual design principles and aesthetics? Any shmuck can start learning how to code a site or use a program, but they aren’t “designers” until they know contrast, color theory, typography, etc. Putting more emphasis on this will make you stand out in a field full of terrible-looking websites.
Wednesday, February 13th, 2013 05:00
Very motivated, thanks for shared this post. I will try myself to learn it “Immediately after waking up”. Nice post
Tuesday, February 12th, 2013 03:45
HYE DARREN,
liked your post a lot,, its a real motivation for novices in the filed f web design .
I have just completed Head First HTML with CSS. It was the best book i ever read about a learning procdure. they made it so simple to learn.Now i am very keen to work with one of the professional companies,
But befroe taking that huge leap of faith, i have to Brush up my practical knowledge. just today,When i was trying to capture some ideas for portfolio projects, i landed on this great :) website.Every single topic ,and update is enriched with right amount of details and knowledge plus not to forget motivational boost up bogs from time to time.
Now , In order to build my portfolio, i need to start from the scratch.What shall be the right way to proceed further,because till yet i had only theoretical knowledge of things apart from the example pages that i built through HEAD FIRST HTML WITH CSS ofcourse.
The issue arises when i thing about the layout design to be made into photoshop , i am well versed with the tool ,
after designing the layout ,it has to be converted to HTML/XHTML.
This part of the design process is where i am lagging behind,Can you please recommend some nice tutorials for this , or youtube has to be the lat resource , as if in you tube , everyone has there own way to do it and sometimes it gets very confusing,
DO recommend and advice please.
and shall i start learning any tool for coding other than notepad as well like dreamweaver or other,,,, what say?
Sunday, February 10th, 2013 17:25
thumbs up for code academy
Frameworks also help people learn design by encouraging good habits. Bootstrap is a great one.
Saturday, February 9th, 2013 23:28
What is the current biggest obstacle that you’re facing when learning web design?
I get an idea of how I want to design a web page for someone/self.
I mess around in Photoshop with some color schemes.
Gather content material on what the page is about or for.
Write the basic code in html: head, body, footer etc etc…
Write a few divs
…
…
..
Problems begin. I can’t get to work like I want. I can’t figure out why I can’t get certain content to lay where I want it to. And well the page stops there. Weeks later I try again. Stuck. Upset. Frustrated. Try to move on.. get frustrated again.
That is my role so far. :-(
Any help?
Thanks,
Wendy
Friday, February 8th, 2013 07:38
like your post. I personally give up learning web designing twice. But now i am good in web designing and its my profession :).
the learning point is dont give up at any stage, you will learn alot.
Emma Jones, UK
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!
nazanin
Friday, January 25th, 2013 09:49
First all , thank you for the information. Hopefully I can stick to my promise and teach my self HTML and CSS at least for the next 3 weeks! My biggest challenge is motivation, even though I know I have to improve my HTML and CSS skill but for some reasons I am being lazy about it! If I set a regular schedule this time, I might “will” succeed!
Darren
Monday, January 28th, 2013 07:05
For this I also recommend you read “The Willpower Instinct” on getting more self-control.
Taimur Rehman
Monday, January 28th, 2013 07:42
First up, thanks a million Darren, you just did a perfect job. Being a technology person myself, I feel people give up too early, even I do that too so times, while learning anything new especially when its making no sense at all. But after reading your post, I feel I should try once again and learn the hard stuff. Thanks again :)
Darren
Monday, January 28th, 2013 19:33
Deliberate practice is the way to go (Google ‘deliberate practice’, a lot has been written on the subject).
Stuart
Monday, January 28th, 2013 09:57
Excellent article and this came at just the right time. I am the worlds worst procrastinator. I know what I want to do abut never seem to figure out how to do it. The sheer volume of languages and platforms available to the web designer is unbelievable and massively daunting, every time you think you are off down the right path, someone will mention to you that you should go off in another direction…….it’s the old opinions are like a-holes analogy.
I’m off to read “Head First” for 30 minutes as you suggest.
Darren
Monday, January 28th, 2013 19:33
Cool, it’s a really addicting book!
John Wodka
Monday, January 28th, 2013 15:58
Darren,
I appreciate all of the resources listed and really like the way you encouraged Stipe. Do you ever use Word Press and or do you have a favorite theme?
Thank you.
Darren
Monday, January 28th, 2013 19:32
Yeah, I use it, Genesis is a good theme.
Victor
Monday, January 28th, 2013 04:29
This article hits the nail on the head – I remember first starting to learn web design, and it was so frustrating as there was so much to learn, and it was so tempting to try and take huge leaps rather than learn the foundations first.
Exactly right though – HTML and CSS is definitely the best way to start, which is what I did, then started branching out into different areas such as SW packages, scripting/programming etc..
Another really good idea is to ALWAYS keep trying to learn more – which is why I have been a regular on this site for quite a while ;-)
Larry James
Friday, January 25th, 2013 22:26
I built my first website many years ago using the not extinct geocites platform. I built my geocites website using their on-line WYSIWYG editor. It was there that I learned how to view the source of the page to see how the page was laid out. These were the days before css and the styles were included inside the HTML. We used to use Tables to layout and position things on a webpage. Today it is much easier to learn HTML because the HTML on the page is much cleaner without all the tables on the page, and with the styles being on a separate page.
I would like to encourage anyone who would love to be able to build websites to learn HTML. Learning HTML is probably the most useful thing I have ever done. It helped me to start to web design business.