HTML, CSS, and JavaScript Building the Web
3h 38mBeginner2024-10-01
Authors
Jasmine Greenaway
Nitya Narasimhan
Course details
With over five billion global internet users in 2023, there is high demand to build web-based technologies, and it’s one of the most common platforms in software development. This course offers a project-based approach where beginners can get started with a hands-on approach to learning. Microsoft developer advocates Jasmine Greenaway and Nitya Narasimhan show you the tools of web development so you can start coding in HTML, CSS, and JavaScript. Plus, learn how artificial intelligence tools like Copilot and ChatGPT can assist in your web development.
Skills covered
HTMLEcma InternationalCSSWeb StandardsJavaScriptWeb DesignWeb Development ToolsFront-End Web DevelopmentWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentOne-Off
Concepts
Introduction
- Learn the web by building
Welcome to Your Development Environment
- Hello, web development
- Hello, DevTools
- Hello, GitHub and Git
- Setting up your development environment
- Hello, GitHub Codespaces
- Hello, GitHub Copilot
- Learn by doing
HTML Development
- Hello, HTML
- Document structure - Elements and tags
- Document organization
- Document attributes
- Document accessibility
- Putting it all together
CSS Styling
- Hello, CSS
- CSS in action
- Stylesheets and setup
- Cascading and inheritance
- Selectors and properties
- Layouts and positioning
- Transitions and animations
- Recap
JavaScript Development
- Hello, JS
- Understanding variables
- Creating functions
- Working with the Document Object Model (DOM)
- Adding event handling
- Understanding closures
- Putting it all together
Coding Projects
- Introduction to app dev projects
- Building to learn
- Typing project - Applying the build to learn process
- Space game project - Code overview
- Space game project - The HTML canvas element
- Space game project - Examining the game mechanics
AI-Assisted Development
- Conversation - AI-assisted web development, part 1
- Conversation - AI-assisted web development, part 2
- Conversation - AI-assisted web development, part 3
- Intro to AI-assisted web development
- Setting up Copilot
- AI-assisted development with Copilot
- Useful prompts to learn programming with Copilot
- AI-assisted development with ChatGPT
Conclusion
- Growing your web development skills