ajgreaves/box-model-widget

A widget for practical demonstration and interaction with the CSS Box Model

The Box Model Widget

View website in GitHub Pages

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.

UX

Ideal Client

The Ideal Client for this application is:

• English speaking
• Has a basic understanding of CSS syntax
• Is a student of Code Institute

Visitors to this website are searching for:

• 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

This project is the best way to help them achieve this things because:

• 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

Credits

Content

• The introduction text was written by Niel McEwen and Anna Greaves for Code Institute

Media

• Concept image by the design team at Code Institute

Acknowledgements

• 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.

Disclaimer

The content of this application was build for Code Institute

The content of this Website is for educational purposes only.