An interactive widget to help Code Institute students understand the CSS Box model. Website features a brief text based introduction to the box model with a concept image, a window with a pair of buttons, 4 interactive sliders and a code output box. The primary goal of this application is for users to have a clear understanding of the different parts of the CSS Box Model and how they interact.
The business goals of this application are:
- Build brand credibility
- Improve student satisfaction with the CSS Essentials module
- Improve student velocity through the CSS Box Model section of the CSS Module
- Improve student velocity through their milestone projects and beyond
The student goals for this application are:
- Build a stronger understanding of the CSS Box Model
- Build confidence in how to approach coding the different box model properties
- Clear, easy to understand content
- Responsive design so the app can be used on all screen sizes
This website is built with HTML, CSS and JavaScript.
- English speaking
- Has a basic understanding of CSS syntax
- Is a student of Code Institute
- A better understanding of the the CSS Box Model
- An interactive way to learn about the 4 sections of the Box Model
- A clear explanation of the overall concept
- Code examples to help apply further knowledge
- On researching we were not able to find any application that already provides an interactive tool for teaching the box model concept
- The User Interface is clean and simple to use
- The text based part of the lesson is clear and concise
- The provided image helps visualize the concept
- The introduction text was written by Niel McEwen and Anna Greaves for Code Institute
- Concept image by the design team at Code Institute
- I received inspiration for this project from my colleague Ronan Burke, who found demonstrating the box model with two buttons and adjusting their values helped students understand the concept effectively.
The content of this application was build for Code Institute
The content of this Website is for educational purposes only.