How do I learn a front-end framework

Learn web development

Welcome to the MDN learning area!
This series of articles will take you from beginner to web developer. Everything you need to code simple websites can be found here.

The aim of this series of articles is to take you from "beginner" to "expert" level. You will only become an "expert" after a lot of practice on your own projects, whereby MDN will always be a valuable resource for you.

If you are a complete beginner web development can be a tough challenge - we will help you "hold your hand" on the way to becoming a real Mozilla web developer. Everyone can feel at home here, regardless of whether they are a student learning web development (self-taught or within a course), a teacher looking for teaching materials, someone pursuing their hobby or someone who knows more about the technologies that hold the internet together would like to.

Important: The learning area is constantly being expanded. The German translation is not yet complete, but work is underway. If you have any questions on the subject, please contact us.

What's new

The learning area is regularly expanded by us. So that you stay up to date, all innovations are recorded here. So please come back later!

If you have questions about topics that are not described here or are only partially described in your opinion, please send us a message in the Discourse forum.

Do you want to become a front-end web developer?

We have summarized all the basic information in another course so that you have everything you need to achieve your goal.

Where to start

We would like to come to a common denominator with you. Which description best describes you?

  • I am a Beginner

    Welcome! The best thing to do is to start with our "Get to know the Internet" series. Here you will learn everything about the basics you need to get started in web development.

  • I know the web

    Very good! In that case, you can take a closer look at the most important web technologies: HTML, CSS and JavaScript.

  • I've mastered the web.

    Great! Then you may be interested in our advanced guides and tutorials. Perhaps you would like to contribute to the MDN learning area yourself ;-)

Note: We will continue to publish more learning material, for example for experienced programmers on specific advanced techniques, native developers who are new to the web, or people who want to learn design techniques.

Learn quickly: vocabulary

Thread
Thread in computer science is the execution of running multiple tasks or programs at the same time. Each unit capable of executing code is called a thread.

Our topics

Here is a list of our article ranges.

Get to know the internet
Gives a basic introduction to web development for beginners.
Structure HTML web pages
Here you will be taught the language on which every website is based. HTML is there to give websites a basic framework and structure.
Designing CSS websites
CSS is the language we use to give a website a certain style. Colors, fonts and the position of an element on the website, all that and more can be determined with CSS. In this area you will learn basic CSS.
JavaScript - dynamic, user-side scripting language
JavaScript is the scripting language of the Internet. It is used to add dynamic content to a website. In this series of articles, you will learn the basics of JavaScript.
Accessibility - Make the Internet accessible to everyone
Accessibility - this is about making the Internet accessible for everyone, whether for people with disabilities or for mobile access or other access options. These articles will give you some knowledge on how to increase the accessibility of your website.
Tools and tests
Various tools for web developers are presented here, for example tools to test a website in different browsers.
Server-side website programming
Even if you specialize in user-side website development, it makes sense to have a basic understanding of server-side programming. This topic introduces you to how server-side programming languages ​​work. There are detailed instructions for two popular frameworks, Django (Python) and Express (node.js).

How do you get our code examples?

The code examples that you can find in our learning area are all accessible via Github. You can copy these to your own computer to practice with.

Contact us

The entire learning area was created by our volunteers. We need you on our team, whether you are a beginner, a teacher or an experienced web developer. If you are interested in participating in the MDN project, you can reach us via our mailing lists or the IRC channel. :)

additional

Mozilla Developer Newsletter
Our newsletter for web developers. (in English)
Codecademy
A good interactive website for learning programming languages ​​and web development. (in English)
Code.org
Intended for students and teachers. (Partly in German)
freeCodeCamp.com
Interactive site with tutorials and projects on coding. (in English)

Edabit
Thousands of Interactive JavaScript Challenges.