About This Tutorial

Pedagogical Approach

This tutorial series is designed with specific educational principles in mind, informed by research and best practices in adult learning and critical pedagogy. The approach emphasizes student-centered learning, accessibility, and practical application.

Teaching Philosophy

The educational philosophy behind this tutorial draws from several important thinkers and practitioners in education:

Paulo Freire emphasized dialogical learning and problem-posing education that engages learners as active participants rather than passive recipients. This tutorial encourages you to experiment, make mistakes, and learn through practice rather than memorization.

John Dewey argued that education should connect to life experiences and that learning happens through doing. Throughout these tutorials, you'll work with real examples, build actual projects, and see how concepts apply to practical situations.

Alfie Kohn critiques traditional grading and emphasizes intrinsic motivation over external rewards. This tutorial focuses on learning for understanding rather than simply completing assignments. Assessment is for learning, not just of learning—each practice exercise helps you understand concepts better.

bell hooks wrote about engaged pedagogy and teaching practices that acknowledge and honor diverse student experiences. This tutorial assumes no prior knowledge, provides multiple ways to understand concepts, and recognizes that learners come with different backgrounds and learning styles.

Patrick J. Finn and Robert P. Moses both emphasized the importance of making knowledge accessible and demystifying technical subjects. This tutorial breaks down web development concepts into clear, understandable explanations without assuming prior technical knowledge.

Core Educational Principles

Scaffolding: Concepts are introduced gradually, with each lesson building on previous knowledge. You start with the basics of HTML before moving to CSS, and build from simple examples to more complex projects. This ensures you have a solid foundation before tackling more advanced topics.

Transparency: Learning outcomes are stated clearly at the beginning of each lesson. You know exactly what you'll be able to do after completing each section. Examples of completed work are provided so you can see what success looks like.

Multiple Representations: Concepts are explained in prose, demonstrated with code examples, and reinforced through practice exercises. Different learners process information differently, so multiple approaches help ensure understanding.

Equity and Accessibility: This tutorial is designed to be accessible to learners from diverse backgrounds. Technical terms are defined when introduced, concepts are explained without assuming prior knowledge, and the structure accommodates different learning speeds and styles.

Critical Thinking: Rather than just memorizing syntax, you're encouraged to understand why things work the way they do. Each concept includes explanations of the reasoning behind it, helping you develop analytical skills that extend beyond this specific tutorial.

Content Structure

Each lesson follows a consistent structure designed to support learning:

  • Learning Outcomes: Clear statements of what you'll be able to do after completing the lesson
  • Prerequisites: What you need to know before starting (often nothing for early lessons)
  • Conceptual Explanations: Prose explanations that explain the "why" behind concepts, not just the "what"
  • Worked Examples: Complete, step-by-step examples showing how to apply concepts
  • Practice Opportunities: Exercises with graduated difficulty to build skills gradually
  • Bibliography: References to quality educational resources for further learning

This structure is informed by educational research showing that explicit learning objectives, worked examples, and deliberate practice all contribute to effective learning outcomes.

Attributions and Acknowledgments

This tutorial site was built using several tools and resources:

Development Tools

This site was built in Visual Studio Code (VS Code), a free, open-source code editor developed by Microsoft. VS Code provides excellent support for HTML, CSS, and JavaScript development.

The development process was assisted by Cursor, an AI-powered code editor, and Claude (by Anthropic), an AI assistant that helped with content creation, code structure, and pedagogical planning. These AI tools supported the development of this educational resource while maintaining focus on human-centered learning principles.

Educational Resources

The content draws from and references several high-quality educational sources:

  • MDN Web Docs: Comprehensive documentation for web technologies, providing authoritative information on HTML, CSS, and JavaScript
  • W3Schools: Beginner-friendly tutorials and reference materials for web development
  • Khan Academy: Free educational content that influenced the tutorial structure and explanation style
  • The Odin Project: Open-source curriculum for web development that informed the learning path
  • GitHub Documentation: Official guides and resources for understanding version control and GitHub features

Inspiration and Pedagogy

The educational approach is informed by the work of:

  • Paulo Freire: Pedagogy of the Oppressed - Critical pedagogy and dialogical learning
  • John Dewey: Experience and Education - Experiential learning principles
  • Alfie Kohn: Punished by Rewards - Intrinsic motivation and assessment for learning
  • bell hooks: Teaching to Transgress - Engaged pedagogy and inclusive teaching
  • Patrick J. Finn: Literacy with an Attitude - Democratic access to knowledge
  • Robert P. Moses: Radical Equations - Making technical knowledge accessible

About the Creator

This tutorial series was created by Joshua Aaron, an educator focused on making technical knowledge accessible and supporting diverse learners. The tutorials are designed specifically for QQI Level 5 students (Irish Further Education) but are freely available to anyone interested in learning web development.

You can learn more about Joshua Aaron's work at jsaaron.com or view other projects on GitHub.

How to Use This Tutorial

This tutorial is designed to guide you from complete beginner to publishing your own website. Here are some recommendations for getting the most out of your learning:

Learning Path

Start with the lessons in order, beginning with HTML Basics. Each lesson builds on previous concepts, so working through them sequentially helps you understand how everything connects. Don't rush—take time to complete the practice exercises and experiment with the examples provided.

As you progress through lessons, refer to the code examples when you need to see concepts in action. Study how the examples are structured and try modifying them to see how changes affect the result. Use the starter templates when you're ready to build your own projects—they provide foundations you can customize.

Practice and Experimentation

Web development is a skill built through practice. Every lesson includes opportunities to apply what you've learned. Take time to experiment, make mistakes, and learn from them. This tutorial provides the foundation, but your curiosity and practice will take you further.

Getting Help

If you encounter problems, check the Troubleshooting guide for common issues and solutions. The Quick Reference provides a handy lookup for HTML tags and CSS properties you've learned.

Open Source and Sharing

This tutorial site is an educational resource that aims to make web development accessible to everyone. Feel free to use it for learning, share it with others, and adapt the concepts for your own teaching or learning purposes.

If you find errors or have suggestions for improvement, contributions are welcome through the project's GitHub repository.