Summary

• 2 minutes

In this module, you set up a working environment for web development. You also created a website and tested that everything is working in a web browser. Let's look at all you accomplished:

• You downloaded and installed the tools you need for web development, and customized the editor with basic packages.
• You created a project directory and the files to build a website.
• You created a heading and other page elements, then linked to external files and tested the page in a browser.
• You applied styles to different elements and tested your site in the browser and added support for themes using CSS.
• You added JavaScript to enable custom interaction with the page and switching between themes.
• You learned how to create and use console messages to peek inside your code.

You're gathering tools and building a foundation as a web developer. You can reuse your website as a template for future projects. As your skills and knowledge grow, you're able to fulfill more of the vision you have for your website. It's also empowering to see an idea come to life.

Learn more

Web development concepts

• Fault tolerance (graceful degradation)
• Separation of concerns
• Progressive enhancement

Web development references

HTML5

• HTML history
• Webhint - Use charset 'Utf-8'
• MDN web docs - What’s in the head?
• MDN web docs - HTML elements reference

CSS

• MDN web docs - CSS: Cascading Style Sheets

JavaScript

• MDN web docs - Strict mode
• MDN web docs - JavaScript Reference

Web development technologies

Microsoft Edge documentation

• Microsoft Edge Developer Tools
• Inspect, edit, and debug HTML and CSS with the Elements tool
• Console overview

Azure Static Web Apps

One way to deploy your website is to use Azure Static Web Apps.

• Learning paths for Azure Static Web Apps
• Azure Static Web Apps documentation

Visual Studio Code documentation

• User interface
• Emmet in Visual Studio Code