Web Development
High School Students learn fundamentals ofĀ front-end web development
using HTML, CSS, and JavaScript.
Front-End Development with HTML, CSS & JavaScript
Browser-Based Code Editor ā No Installation Needed
Designed for High School Students
Portfolio Website Project by Course End
100% Web-Based ā No Installations Needed
Project-Based, Hands-On Learning
High School Web Development Course
This course introduces students to the fundamentals of front-end web development
using HTML, CSS, and JavaScript. Through engaging projects and real-world design
challenges, students will learn how to plan, design, and build fully functional websites.
The course emphasizes creative problem-solving and iterative development.
This course is hands-on and interactive. Students spend most of their time designing and
building web content while receiving just-in-time instruction and peer feedback.
Students get immediate feedback from embedded practice questions, work through hands-on projects, and collaborate with peers along the way. Students use CodeMonkeyās robust in-browser code editor to build and preview web pages. No setup or installation is required.
- Short, focused lessons to introduce new concepts
- Hands-on exercises to apply new skills right away
- Capstone projects that simulate real-world web design challenges
Curso Programa de estudios
HTML Basics
- 2-3 weeks
This unit introduces students to the basics of HTML, the language used to structure content online.
Students will learn how to create meaningful page layouts using semantic tags and how to add text, images, links, tables, and forms.
By the end of the unit, students will be able to build a clean, well-structured resume webpage.
- Introduction to Web Design and Development
- HTML Basics
- Lists, Tables, Links
- Forms and Input Elements
- Adding Images
- Unit Project: Build a ResumƩ Page
Style with CSS
- 2-3 weeks
In this unit, students bring their HTML pages to life with visual design using CSS. Theylearn how to apply colors, spacing, typography, and layouts to create websites.
Through hands-on practice with the box model, grid system, and real-world layout patterns, students gain the skills to design multi-page websites that look polished.
- CSS Basics
- Color and Typography
- Text Styling
- Element Selectors, Class and ID Styling
- Layout Techniques
- Unit Project: Designing a Multipage Website
Programming with JavaScript
- 3-4 weeks
In this unit, students cover basic programming concepts using JavaScript, the language of the web. Through hands-on lessons, students learn how to work with variables,
conditionals, loops, functions, arrays, and simple DOM manipulation.
By building small programs and interactive challenges, students develop problem-solving skills and gain confidence writing their own code from scratch.
- Variables and Data Types
- User Input and Output
- Conditional Logic
- Iteration
- Matrices
- DOM Manipulation Basics
- Unit Project: Building an Interactive Quiz Game
Web Apps with JavaScript
- 3-4 lessons
In this unit, students bring their JavaScript skills to life by building a series of interactive, single-page web apps through guided code-along lessons.
Each project focuses on practical skills like working with arrays, handling user input, and manipulating the DOM.
By the end of the unit, students will have created a portfolio of fun, functional apps such as a quiz game, to-do list, and movie generator.
- Code Along: A Smart Tip Calculator
- Code Along: A Movie Recommendation Generator
- Code Along: Rock-Paper-Scissors
- Code Along: A Flashcard Quiz App
- Code Along: A To-Do List App
- Code Along: A Birthday Countdown App
- Project: An Interactive Single-Page Web App
- Quiz: Programming with JavaScript
Portfolio Project
- 2+ weeks
In this final unit, students put everything theyāve learned into action by building a complete multi-page website.
Students will apply design thinking, accessibility, and programming best practices while designing a website tailored to a specific audience or purpose.
Students will refine their work into a polished final project they can proudly share or present.
- Planning: Project Brainstorming and Idea Generation
- Best Practices: Design Principles and Accessibility
- Project Build: Final Portfolio Website (Multi-Page App)
- Portfolio Reflection and Submission
- Teacher guides and course explanations
- Exercises and portfolio projects
- Interactive lessons and Q&Aās
Web development is one of the most in-demand digital skills in todayās job market. Even if students don’t pursue a tech career, this course equips them with valuable skills.
- Understand how the web works and how websites are structured.
- Write semantic and accessible HTML.
- Style pages with CSS for both aesthetics and responsiveness.
- Use JavaScript to make websites interactive and respond to user input.
- Complete projects through iterative development.
- Create and present a personal website showcasing their skills.
Want to Learn More about our Web Development Course?
Give your students the tools to become creators, not just consumers of digital content.
- Explicaciones del curso, guĆas para profesores y preguntas y respuestas.
- Diapositivas para el aula, lecciones interactivas y actividades sin conexiĆ³n
- Exercises and Portfolio projects
- Preguntas de repaso para estudiantes
Programa de Ciencias de la ComputaciĆ³n galardonado
2023
Yo aprendo
Primer lugar - ElecciĆ³n del lector Ciencias de la ComputaciĆ³n
2024
Avance en tecnologĆa educativa
Proveedor del aƱo
2024
Lo mejor de STEM
ElecciĆ³n del educador: plan de estudios de inteligencia artificial Para la enseƱanza y el aprendizaje
2025
Impacto de la tecnologĆa educativa
EnseƱanza superior Herramienta de eficiencia
Preguntas mƔs frecuentes
CodeMonkey, una plataforma lĆder de aprendizaje basada en juegos, enseƱa a los estudiantes de ocho aƱos en adelante los principios fundamentales de la programaciĆ³n de computadoras. Fundados en 2014, los productos CodeMonkey estĆ”n diseƱados para maximizar el compromiso y la experiencia del usuario, para presentar a los estudiantes las habilidades fundamentales de programaciĆ³n de computadoras. Utilizando lenguajes de programaciĆ³n reales y adaptaciĆ³n a todos los entornos de aprendizaje, CodeMonkey proporciona una soluciĆ³n Ćŗtil para los educadores al ofrecer capacitaciĆ³n bĆ”sica, herramientas de administraciĆ³n y generaciĆ³n de informes, calificaciĆ³n automĆ”tica, tutoriales detallados para los maestros y comentarios inmediatos a los estudiantes.
No se necesita experiencia.
No se necesita experiencia.
These courses are designed to be flexible! While they are perfect for teacher-led instruction, they can also be taken as self-guided courses. Students can move through the material at their own pace, making it ideal for independent learners.
CodeMonkey High School Computer Science courses are typically offered to estudiantes del 9.Āŗ al 12.Āŗ grado.
