loading...
Cover image for Webdevelopment for Beginners 01 - How to get started

Webdevelopment for Beginners 01 - How to get started

bdbch profile image Dominik Biedebach ・2 min read

Welcome to my second tutorial series called Webdevelopment for Beginners. This series will be written for beginners trying to get into Webdevelopment but don't know where to start. I'll try to keep everything as simple as possible and link resources to learn more.

In the span of this tutorial you will read about the following topics:

  • The tools used for webdevelopment
  • Awesome learning resources and links
  • What is HTML and how to write it
  • What is CSS and how to write it
  • The box layout and how layouting in browsers work
  • How to combine HTML and CSS to create simple page layouts
  • How to host a website
  • What is JavaScript and how to write it

Lets get started: What tools do you need to start developing websites?

Luckily you really don't need any tools to begin with webdevelopment. You could fire up your notepad or any other text editor and start writing code which is okay but for beginners I suggest using tools that can help you memorizing code without looking up a tutorial or documentation every 5 seconds.

For that, I'd suggest Visual Studio Code developed by Microsoft. It supports autocompletion for code and helps you with suggestions for code you write.

I'd advise against any tool that supports WYSIWYG (What you see is what you get). Visual editors are bad for you and won't help you with your future development because it generates really bad code 90% of the time and won't help you actually learning the code.

But if I can use a visual editor, why should I learn to code?

As I said visual editors generate code really bad. That could change in a few years with AI and Machine Learning but even then editors never really work well with logic implementations.

Also it's way more fun writing code and seeing the output working fine. :)

Any other tools needed?

You actually just need a browser. I'd suggest using Chrome or Firefox. Chrome has superior development tools when it comes to editing styles, responsive development, debugging JavaScript or analyzing your page but will watch you (since it's Google).

If you are a privacy advocate I'd suggest using Firefox. It also has good styling devtools, a really good layouting helper and other nice tools. Just the debugger and analyzing tools are behind Google Chrome.

After having your preferred tools setup and running, you're ready to write your first small website.

Read about it in my next post in this series!

Posted on by:

bdbch profile

Dominik Biedebach

@bdbch

I produce code. - Prefers React over Vue - Prefers VSCode over any other editor - Likes React Native - Absolutely loves GraphQL / Apollo

Discussion

pic
Editor guide