Reverse engineering is the process of taking apart a product or system to better understand how it works. In the context of software development, reverse engineering can be used to learn how an application was built and to gain insight into its inner workings. In this article, we’ll explore how reverse engineering can be used to learn HTML, CSS, and JavaScript, three foundations of mobile app development. HTML, or Hypertext Markup Language, is the language used to create the structure and content of web pages. CSS, or Cascading Style Sheets, is used to add visual style and layout to HTML pages. JavaScript is a programming language that can be used to add interactivity and dynamic behavior to mobile app screens.
Much has been written about the benefits of using reverse engineering, or “backward design” to help students become more familiar—and proficient—with learning to code.
Many refer to the work of Wiggins and McTighe, with one report by Kantorski, et al identifying this as: “a well-established curriculum design methodology. We believe that the benefits of backward design can be harnessed beyond traditional curriculum design and applied to the design of apps for educational purposes.” The report adds that “McTighe and Wiggins (2012) suggest that when someone truly understands information, they can, in brief: (1) explain concepts, principles and processes, (2) interpret information in various ways, (3) apply knowledge to new and complex contexts, (4) demonstrate perspective, (5) display empathy, and (6) display self-knowledge.”
Another report from Magna Publications also references McTighe and Wiggins, concluding: “The use of backward design provides for more relevant and meaningful learning experiences; ensures that the required course outcomes are met; and prepares learners to perform successfully on their final assessment. One starts with the end—the desired results (goals or standards)—and then derives the curriculum from the evidence of learning (performances) called for by the standard and the teaching needed to equip students to perform.”
A Harvard Business Review article entitled “You Can Learn Anything Through Reverse Engineering” further noted:
“To reverse engineer is to look beyond what is evident on the surface and find a hidden structure — one that reveals both how an object or idea was designed and, more importantly, how it can be recreated,” adding: “Reverse engineering can facilitate skill acquisition in any field, and is especially useful for knowledge workers whose success depends on their ability to learn quickly and adapt to rapidly evolving fields.”
Several case studies provide extensive evidence of the benefits of employing this strategy. These include:
“Effect of Reverse Engineering Pedagogy on Primary School Students’ Computational Thinking Skills in STEM Learning Activities”
published by mdpi.com Journal of Intelligence
“Reverse Engineering as a Learning Tool in Design Process”
published by the American Society for Engineering Education
“Ninth-grade students’ perceptions on the design-thinking mindset in the context of reverse engineering” published by Springer.com
Reverse engineering can be a powerful tool for learning these computer programming technologies because it allows you to see how they are used in practice. By analyzing existing code sets and their outcomes, you can gain insights into how HTML, CSS, and JavaScript work together to create a functional app. Here is how MAD-learn approaches this process:
- Start with simple examples:
When starting out with reverse engineering, it is important to begin with simple examples. We offer a range of code sets in a library, many having a basic structure and layout, and that use only a few HTML tags, CSS properties, and JavaScript functions. This makes it easier to understand how the different pieces fit together.
- Use the MAD-learn Platform’s HJC Builder layout fields:
This template allows you to inspect each code set individually. It can be used to view the source code of the page, as well as to see how the different elements of the page are styled and positioned. In this environment, you can gain a better understanding of how HTML, CSS, and JavaScript are used together.
- Analyze the code:
Once you have identified a simple example to work with and have imported an existing code set into the template’s fields, take some time to analyze the code. Look at the HTML tags used on the screen, and try to understand how they are used to create the screen’s structure. Look at the CSS properties used to style the screen, and try to understand how they are used to create the page’s visual layout. Finally, look at the JavaScript functions used on the screen, and try to understand how they are used to add interactivity and dynamic behavior to the screen.
- Experiment with the code:
Now that you have analyzed the code sets, try experimenting with them. Make small changes to each set, and see how they affect the page. For example, you might try changing the font size or color of some text or adding a new element to the screen. By experimenting with the code, you can gain a better understanding of how the different pieces fit together, and how changes to one part of the code can affect the rest of the screen.
- Build your own customized screen:
Finally, once you feel comfortable with the basics of these code languages, try building your own screen from scratch. Start with a simple design, and gradually add more complex features as you gain experience. By building your own screens, you’ll gain a deeper understanding of how these technologies work together, and you’ll be able to apply your knowledge to create more complex and sophisticated websites.
In conclusion, reverse engineering can be a powerful tool for learning HTML, CSS, and JavaScript. By analyzing existing code sets, using the template’s fields, analyzing the code, experimenting with the code, and building your own screens, you can gain a deep understanding of these foundational technologies of web development. With practice and experience, you’ll be able to create your own mobile apps and contribute to the ongoing demand for mobile app developers.