Tom Rothwell

Web Design

It's all about a project, code your own website!

Some tips and ideas on starting a project

29th July, 2018

I know it’s been ages since my last post but I’ve been working on a comments section for my blog, amongst other things. I’ve been learning PHP and MySQL, two of the most popular and useful technologies in web development. Now, by no means am I an expert (yet!) but I’ve learnt enough to get my blog working, and that is kind of the point of this article. I think that having a project to work towards is a great motivation and it’s always good to have something to show for your efforts.

Once you’ve learnt the basics of HTML and CSS, and maybe a little JavaScript, then I think now’s a good time to start your own project. I’m not suggesting you completely give up on Freecodecamp or Codecademy if you’ve been using those, because they are great tools. Maybe just put them to one side for a while, you can always come back to them. Personally, I have found that having an immediate goal to work towards makes you much more determined and by having your own project you become much more committed. It doesn’t have to be your own website, it could be anything you’re interested in, but don’t make it too difficult for yourself. I would suggest either a website or a blog, or both!

If you’re considering becoming a freelance web designer/developer, then there really is no better project to work on than your own website. Use all the skills you’ve learnt to showcase your ability to potential clients. I’ve enjoyed creating mine so far, and that’s the thing, it’s constantly evolving. As you pick up new skills you can improve your site and add additional features, it’s an ongoing project. I would suggest following along with some web design tutorials on YouTube first so you can gain some confidence and pick up on some useful techniques. I have found Traversy Media’s YouTube videos to be great but there are loads of good ones out there.

When it comes to developing a style for your site, I’ve found the best thing is to look at other websites. There’s a great site called Awwwards.com and it gives design awards to some of the best websites out there, it’s a brilliant place to go to get some inspiration. And yes, a lot of the sites on there are very flashy and difficult to code but it’s something to aspire towards. If you look hard enough though there are some really nice sites with clean, simple deigns that shouldn’t be too challenging to aim for. Even if you feel the coding would be too difficult for you, just try to pick up on the design aspects that make the sites look great. Take note of the colours, fonts, font sizes, and overall layout. For further inspiration, you can also just Google portfolio websites and freelance web design sites, particularly if you’re aiming for freelancing. After all, it’s always good to check out your opposition!

In terms of useful tools, you can download a simple colour picker that gives you the hex code of any colour on your screen, I use one called Instant Eyedropper. You can then use Google color picker to tweak the colours and again it will give you the hex value which you can use in your code. For fonts, use Google Fonts; there’s an extensive range and they’re all free to use. These three tools together should provide enough to be able to create your own layout.

For technical assistance, there are some other great resources that I can recommend. The main ones are w3schools, MDN Web Docs, and stack overflow. W3schools is often at the top of search engine results for HTML and CSS, and it can be very useful. The site contains some very good tutorials and it is often a great place to go to learn how to code something specific. For example, how to create a navigation menu or an image slider. A word of warning though, it is often outdated and I would only use it for HTML and CSS. For more comprehensive and up to date information, MDN Web Docs is the place to go. It doesn’t provide any tutorials as such, and it can be a little intimidating to the beginner, but you should definitely check it out and try to familiarise yourself with the more formal documentation. It will come in very useful later on, particularly if you start to learn PHP or any other programming languages.

For problem solving, stack overflow is a great place to visit. Basically, somebody details their problem and the coding community provides answers to it. Of course, the answers vary but usually the highest rated answers are the most useful. Even if you don’t find the exact solution to your problem, it often provides a great starting point. You can, of course, sign up and post a new problem yourself but be warned, they don’t take too kindly to time wasting. Make sure you have thoroughly searched the site before posting a new problem. If a similar one has already been submitted, you’ll get some awkward comments! Failing this, you can always just search Google and Youtube for answers to your specific query. I will write about some of the best resources for more specific problems in later blogs, but these are the ones that I have found most useful in general.

I hope after reading all this you’re more convinced that you should code your own website, or at least start some sort of project of your own. Don’t be put off when you get stuck because it will be difficult but if you persevere you’ll get there. And in the end it will be worth it when you have something to be proud of. Also, don’t be afraid if you don’t know exactly how to do it, you’ll figure it out as you go. Don’t forget to use as many different resources as you can, and usually just Googling your problem will provide a great starting point. Since I’ve mentioned so many different resources in this post I’ll link them all at the bottom. Thank you for making it this far, it’s been a long one this time! Happy coding!

Over and out!

Useful resources (web development):

About Me

Find out more about me.

Let's Go