Breaking into Web Design — A Beginner's Guide

When you start a new hobby, interest, or career there is no doubt that as easy as it seems to be able to do it at first sight, it actually isn’t. Whether you grow an interest for knitting, wood crafting, drawing, writing, or Web Design – They are all much harder to accomplish than they seem. But let’s not allow this to put us off learning or taking up anything new, especially Web Design. There are many aspects of the Web industry that one may be interested in learning about and “breaking into” but in this article I’m going to go through what it takes to break into the Web Design industry as a beginner / hobbyist and I also aim to guide you in the right direction of developing your technical skills. On we go!

What You Need to Know

When you start out as a beginner and you want to design your first Website there are a number of different subject areas that you must have basic beginner knowledge and skills in so you can design, develop, and produce an effective Website that you’ll be happy with. The following are skills that you’ll need to know a little bit about to get you started:

  • Web Design (theory, concepts, and principles)
  • Accessibility
  • Usability
  • Search Engine Optimization
  • Typography
  • Front-End Web Development (HTML, CSS, JS)
  • Back-End Web Development (PHP & MySQL, ASP.NET, Ruby on Rails, etc)
  • Web Hosting

As you can see Web Design isn’t just two words – It splits into a multi-disciplinary subject that requires at least a basic beginner level knowledge in each so you can be well equipped to produce a Website that will be on par with today’s Web standards.

The Path of Learning Basic Web Design

To start off with though you really only ought to know the basic theory, concepts, and principles behind designing a Website and then you’ll need knowledge in HTML and CSS to be able to produce the Website that you’ve designed, so with that in mind, here is the path I advise that you take in beginning to learn Web design.

  1. Web Design (theory, concepts, and principles)
  2. HTML
  3. CSS
  4. JS
  5. Web Hosting

The above five are the most crucial elements of a basic Website. You’ll need to have the basic beginner level knowledge and techniques to be able to design a Website (even if it is just a 5 page static Website), you’ll then require knowledge of basic HTML and CSS in order to develop your design into a fully functional Website, and in addition to this basic functionality if you require any user experience enhancements then you’ll need to know how to code and manipulate JavaScript. Finally, after you’ve designed, developed, and produced your Website and it’s ready to go live on the Internet and World Wide Web you’ll then need to find a Web hosting service provider to upload your Website files to so everyone in the World can view your glorious Website.

Where to Next

There are so many different inter-disciplinary subjects that you must learn within the Web industry that you couldn’t begin to learn all of them at the same time which is why I have produced the basic and short learning path list above to help guide you in the creation of your first basic Website. In the next article I’ll be helping you to develop your first basic Website using HTML 4.01 and CSS 2.1 and as usual if you need any help then you can visit the SoDevious forums or leave a comment.
7 years ago

20 Free Resources for Learning Web Design

As a teenager it can sometimes be hard to begin learning something new outside of school because you’ll often have to pay for the learning resources (books, videos, private tutoring / mentoring, evening classes, etc) yourself and without a job – Or a job that doesn’t pay as much as you’d like it to, it can be hard to really get to grips with learning something worthwhile with the right resources available. You don’t have to start off with buying second-hand books on Web Design that were published 10 years ago and are no longer relevant because in this article I’m going to list 20 free resources for learning Web Design that are relevant and new materials that have been published within the past few years.

In this article you’ll find the following free resource types:

  • Books
  • Online Curriculums
  • Videos
  • Web Communities

Free Books

There are hundreds of free eBooks available online to download and print off for your own educational use. Some of the best free eBooks are listed below to help you get started before you start buying the books.

  1. Dive Into Accessibility
  2. Taking Your Talent to the Web the Web
  3. The Web Book
  4. Web Style Guide
  5. Google’s Search Engine Optimization Starter Guide
  6. The Elements of Typographic Style
  7. Eloquent JavaScript
  8. The Yahoo! Style Guide
  9. The Art and Science of Web Design
  10. Designing for the Web

Online Curriculums

With online curriculums and structured courses you’ll have a structured learning plan from start to finish where you’ll complete objectives throughout by covering both theory and practicals. Although there are only three listed below, you’ll only need these three to get yourself started on the path to becoming a Web professional.

  1. Opera Web Standards Curriculum
  2. WaSP InterACT Curriculum
  3. MSDN Beginner Developer Learning Center – Web Development

Free Videos

It’s a well known fact that some people love to read a good book and some people prefer to watch a video and listen to a person talking about what the video is about, so I’ve also scoured the Web for some of the best, most useful, free video tutorials available. Enjoy.

  1. Think Vitamin – Learn Web Design – Free Tutorial Videos
  2. Nettuts+ – Who Needs University? The Best Nettuts+ Screencast Training Courses
  3. SitePoint – The CSS Video Crash Course
  4. Killer PHP – Beginners PHP Course [Note: Only the tutorials with active links are free]

Web Communities

Just like in the offline world / real life where you can talk to friends and professionals who can give you hints and tips about this and that you can find even more online through their own Websites, free magazines and blogs, as well as online community forums. You could sign up to any of the free and professional communities listed below where you can find help on your Web Design / Development adventures.

  1. SitePoint Forums
  2. MSDN Forums
  3. SoDevious Forums

Hopefully you’ll be able to learn something from one or more of the resources listed in this article and you’ll be well on your way to becoming an amazingly talented Web Designer / Developer. If you’ve got a free learning resource that I haven’t listed here but you think should be here then share it with us in the comments!

7 years ago

Cross-Browser Website Testing

Cross-Browser Website Testing banner including the logos of 5 Web browsers.
Cross-Browser Website Testing banner including the logos of 5 Web browsers.

Ok, so let’s go through the typical scenario.

You design and develop a Website in Google Chrome 4, and it looks beautiful. You upload the Website for the world to gaze and admire your masterpiece, but the audience is using Internet Explorer 8. Guess what? It doesn’t look so beautiful anymore!

Because there are so many Web browsers available which each have their own Web page rendering engine and because people use different Web browsers you can never really tell which Web browser your audience will be using to view your Website. The best thing for you to do when in the production stages of your Website is a best practice technique known as cross-browser Website compatibility testing. That means testing your Website in the most popular Web browsers to ensure your Web pages look almost the same (pixel perfection would be great though) in each of these browsers.

It is common for Web Designers to test their Web pages in the following most popular Web browsers (version numbers correct at the time of post):

There are also a number of other popularly used Web browsers which are listed at the Information Regarding Web Browsers – Browser Choice Website. Have a look at them, download them if you like, and test your Websites in them to make sure everything looks as it should. Alternatively you could instead use a cross-browser compatibility testing tool to do the dirty work for you. The three most popular and advanced cross-browser compatibility testing tools available right now are Browsershots, Adobe BrowserLab, and Microsoft Expression SuperPreview. I would personally recommend Browsershots as it doesn’t require you to download anything and it is also free however, Adobe BrowserLab and Microsoft Expression SuperPreview are much more advanced (but also come bundled with a price tag too).

If you manage to create a solid layout that has good markup foundations (HTML) and cross-browser standard styling and presentation features (CSS) then you won’t have too much to worry about when it comes to testing your Web pages in different browsers however; it is creating this markup and the style sheet that can be the tricky part. Not to worry though as you can always receive help in the SoDevious Forums. If you want some further reading on this topic then Alexander Dawson has published an in-depth article on Web Designer Depot about Browser Testing: A Family Tree.

The advantages of testing your Web pages in a number of different Web browsers is that you end up with a Website that can be viewed as it was designed by a large number of people, no matter what Web browser they’re using and what rendering engine that particular Web browser uses. The only disadvantage to testing in so many is that you obviously lose some development time however; it is necessary to test in different browsers. If all browsers rendered Web pages as they should, which would mean they would all render pages in the same way, then we wouldn’t have to worry about so many browsers, sadly that isn’t the case!

If you already test your Web pages in different browsers, what browsers do you test in? Do you only test your Website in your own browser or do you test it with as many as you can get your hands on? Leave a comment below or start a discussion in the SoDevious Forums!

7 years ago