Getting started in web design and development is a lot easier than it used to be. In the past, you had to learn HTML, you had to get to grips with a graphic app such as Photoshop and you had to be familiar with the fundamental workings or domain names and web hosting. Now it’s as easy as setting up a WordPress blog and pressing a button to activate a theme. But that’s not enough for everyone. Many people want to learn the inner workings and put their own stamp on their project. They want to set their projects apart from their competitors and are simply not content with installing WordPress and using a third party theme.

So if you do want to get started in web design and development, you’re going to need a starting point. You can’t just dive in and do anything without reading up on it first so today I’m going to run through 7 resources which I know you’ll find helpful if you’re just starting out and would like to design and build your first website.

And remember, if you are starting out and would like a flashy new domain name and web hosting account, look no further than our offerings 😉

WPBeginner

If there is anything you ever want to know about WordPress be it resolving complex coding issues to highly basic, first time developer tutorials you’ll find it on WPBeginner. It covers every WordPress related subject imaginable and boasts over 5,000 content-rich posts on anything and everything WordPress. You can find basic theme design tutorials right through to sidebar widget configuration and more complex custom coding insights that allow you to find the answer to pretty much any WordPress development question you pose. It is the only resource you’ll ever need when it comes to WordPress development.

W3Schools

As the name suggests, W3Schools is a tutorial site with a difference. Whilst it is good for first time designers and developers to learn the ropes it is also frequented day to day by experienced designers as it covers all aspects of HTML, CSS and even JavaScript. So whether you’re building your first website or you can’t remember the CSS options for a background property or text effect you will find the answer on W3Schools. Bookmark it, I guarantee you’ll use it in future.

Code.Tutsplus

This is the tutorial offering from Envato, the guys behind the popular WordPress theme marketplace, ThemeForest. It features everything from regular text based tutorials, to video offerings and even fully blown paid courses. You can quickly and easily search the options between free tutorials and paid courses and the subjects covered range from beginner type “how to create a blog” style tuts right through to professional paid coding courses designed to be completed over a matter of weeks.

SitePoint

SitePoint has been the go to website for anything webmaster related for many years. It’s content repositories, forum and even domain and website marketplace are the stuff of legend and to this day their tutorials and guidance sections are some of the most detailed on the web. It offers online tutorials, courses and even hard copy books for you to purchase on pretty much any design and coding style imaginable. It also features screencasts so you can specifically see how to do something. My only gripe is that it could be categorised better as the HTML/CSS section for example will cover both extremely basic and highly complex subjects without any real way to separate them.

Material.io

Whilst Material design and design standards in general might not be at the top of the considerations list for the first time web designer it is still something you should read and familiarise yourself with. At Material.io you can learn all about where your content elements should be positioned, colour harmony and text styling. All of the aspects that can turn your first time, amateur design style into a professional looking, material design based project.

Bootstrap

Most people don’t opt to use a CSS framework right off the bat. They prefer to code their own core CSS elements to get a feeling for how it all works. Which is fine to understand the basics but when I think back to the hours I spent playing around in CSS trying to get elements to align or seeking out code for particular parts of the page I just wish someone would have told me about Bootstrap. Using a framework such as Bootstrap should can quickly develop a grid based design and by using its significant element repository you can literally just copy and paste common elements such as forms, buttons, tabs and tables into your design. It is also a mobile responsive framework so pretty much everything you build will be mobile ready from the offset without the need to revisit it and make a “mobile version”.

Codeacademy

Codeacademy is an online tutorial site with a difference. Not only does it walk you through the steps it also gets you to perform the various parts of a given tutorial right there on the site and will periodically test you via a quiz on the topics covered in the tutorial. It’s more of a course based service than a regular tutorial style offering but if you genuinely want to learn how something works rather than just have it work then this is definitely for you. It’s not just for beginners either, it covers everything right through from building your first site to getting to grips with complex, higher level languages.

A Starting Point

The above is literally just a starting point and through the above you can cover most topics form WordPress theme builds through to basic HTML/CSS and graphic work. This, for now, should suffice but if you want to take it to the next level and get into complex coding methods you’re going to need to do your own research. But don’t run before you can walk. If you learn the basic fundamentals or HTML/CSS and perhaps some highly basic PHP you’ll find learning the more complex languages and frameworks much easier to get your head around.