Ok, so you are well after learning and reading some books about CSS and or HTML, and the next thing is “I want to build a site”.


But how can you go from a few books and examples to a fully fledged web app that will bring in users to read your content.

That is the issue, it’s not all about building your site, but designing it. And I don’t mean opening up photoshop and layering stuff but actual user experience, and making your ideas work.

When you are new to this, the first thing that comes into mind after finishing a tutorial, book, course of HTML/CSS will be to head over to reddit, hackernews or *place your favourite discussion board here* and simply ask where to go from here. The answers are the same every time:

  • Learn jQuery
  • Learn Bootstrap
  • Javascript is most important
  • Go to codeacademy and do a course there

But, if you would lack the code knowledge, that is fine but if you have a different issue, like how to put them all together these things won’t help you in the short run. You will fall in the framework sinkhole and the most important factor is lost.

The thought process and problem solving is no more. You will learn to build stuff using frameworks but will not be able to tackle grids or some other feature that frameworks come pre build on your own.

In my world, designing a site is more that layering, there is app purpose, ux, seo, monetization, content, optimizations and more. I will try to detail some of these thing further for a better understanding on the concepts.

App purpose

First, find a name for your app. And before you’re finding that name, find the purpose of the app you want to build. Just find something you are passionate about or find a problem other users are having and try to fix that problem.

Let’s say you love animals and the pets in your area are not getting adopted fast enough, just build a webapp that will help the local shelter give more animals for adoption.

Next is the name. Everything has to have a name, search for something catchy that is relevant to what you will build. After you chose it, head on over to namecheap.com and find your domain name, if you’re not keen on spending money this early in your webdev career, no problem I’mma hook you up.

Github pages

If you don’t want to spend any money for your first website, use github pages. It basically lets you host your webapp (a simple one) on github and they provide the hosting and you even get to choose your name (username). You can find out more on https://pages.github.com/ and if you have your own domain name, it’s even better because you can use that too.

UX

UX stands for User Experience and it’s the way users interact with your website. Some things to consider here is what are users going to do on your site, they might navigate to find a nice deal or buy some clothes or simply post a message.

Let’s take an actual example. I have a site that reviews bicycles and bicycle parts. A common thing here after they have consumed your content is either go into your shop page and see what’s for sale, maybe buy the product you have reviewed or leave a comment on your page attracting more consumers.

The UX can be whatever you like it to be. And to do this be sure that in your initial design the paths are clear on what the user should do (buttons, forms, call to actions etc).

Content

The content is one of the most important aspects of the design. You will need to write original, useful content that will stand out in the crowd. Forget about keywords or SEO at this point, just try to write your copy in a understanding and clean fashion and you’re all set.

Performance and optimization

I know this is not on top of the list for so many people, but try to find time and optimize for performance. It’s such an important factor to consider since Google takes into account how fast your app is running.

Now it’s not about the fact that people have slow internet, but (myself included) get frustrated when I want some content to be loaded but I’m unable to get it right away. I just close and search for the next best thing.

Try to use PageSpeed Insights from Google and fix your issues. If you want to go the extra mile, you can optimize advanced stuff like running your app in 60FPS for a silky smooth experience, removing jank and all of that stuff.

SEO

To me this acronym is synonym with Viagra because there is so much spam about it, and it was a lot of spam in the past. I know you will come across it and I have a few pointers for you:

  • Never, ever, ever hire a SEO agency (you won’t need it)
  • Forget optimizing for SE, you simply have to write good content
  • If you really want to get into it, go on moz.com or on reddit.com/r/seo

That’s it about SEO, it’s not useful anymore at a small scale, just be sure to write good content and if possible start a blog and write regularly.

Here is a nice reddit post with some free resources regarding SEO

Conclusion

These points take up the more non-technical aspects of building a website, so my advice is to get started small, no need for fancy stacks or anything like this. If you want to take it up a notch, learn how to edit the basic wordpress theme, and make it your own, then start making your own theme from scratch so you can see how an integration feel like.

After this, you can look at some advanced examples like using node.js, task managers like gulp or even possibly making something with MEAN.js