Jump to: navigation, search

A beginner's introduction to web design and development


Welcome to the Web Platform Docs beginner's article series!


This set of articles is designed to allow complete beginners to web design and development to get comfortable with coding the web, by working through a series of simple tutorials, slowly building confidence and not being overwhelmed by details, facts and figures to begin with. As you get more experienced with web development you may wish to delve into other areas of Web Platform Docs to get more detailed, complete information, however here we will just cover the essentials you need to get started.

If you are already experienced with web development, this is not the place for you, and you should find topics that interest you at our main page. If you have previous experience of web development but your skillset is very outdated (perhaps you are a developer or teacher, and your knowledge comes from 15 years ago?) then you may wish to review the course anyway to get a quick feel of modern web development practices and work flow.

Before you start

If you are reading this, then you probably have some kind of interest in making your own web content, and a basic level of proficiency in using computers and the internet. That's great - building web sites and applications is a really fun and rewarding way to facilitate sharing videos and images, expressing your opinion, starting up discussions, getting yourself known, promoting your business, or even creating a business from scratch.

We want to warn you now — creating web content is not an easy skill to pick up. Mastering it requires a lot of time spent researching, tinkering, learning and practising. But this is not the aim here — this course is designed to get you at least comfortable with the basics, allowing you to make that first jump into web development as easily as possible. We want to use this opportunity to show you that coding for the web is not unachievable voodoo magic — it is within the ability of anyone who is willing to just sit down and spend some time focusing.

Our advice is that you should work through the different parts below in order, not stopping to look at individual subjects in any greater detail the first time round. Then the second time round, go through the course again, and this time stop to go into greater detail on HTML, CSS, etc. Throughout the course we have provided links to further articles containing more information at regular points along the way, so you can find what you need!

Now roll your sleeves up and let's get ready to learn.

Explore our Beginner's docs

Part 1: The beginning

The very first part of our beginner's material gives you some important background on how everything works, and gets you set up and ready to go with web site building.

Part 2: A crash course in web site code

Next, we will give you a quick and dirty introduction to the fundamentals of web site code, allowing you to get comfortable early on with some real development work!

Part 3: Planning our example project

Next we will introduce an example project for you to work on, to get used to the planning side of web development with open web standards. Let's build a recipe site!

Part 4: Structuring our content with HTML

In this chapter let's get our hands dirty with Hypertext Markup Language (HTML), structuring our content as we go..

Part 5: Styling our content with CSS

Now we have a solid base of content to build upon, let's learn about Cascading Style Sheets (CSS), and use it to apply some style and layout to our HTML.

Part 6: Programming fundamentals

At this point, let's look at the programming basics you'll need to know before you can start getting into JavaScript.

Part 7: Adding some behaviour with JavaScript

At this point our site is functional, but what about things that go whoosh? Now we'll give you a brief introduction to JavaScript, using it to apply some dynamic behaviour.

Part 8: Advanced topics

Now you've worked your way through the basics, let's give you some more advanced exercises to do to test your new found skills.

Glossary of terms

Our beginner's glossary provides basic definitions of fundamental web technologies, concepts and other terms you might meet while learning web development.

Where to go from here

If you exhaust the list of articles here and want to learn more skills, head on over to the Web Platform Docs main page and find some other articles of interest!