About Divize

Divize is a learning tool for designers and developers that assist them to write readable/semantic HTML and concise CSS of real-world user interfaces. Divize is also a place where you can build user interfaces gradually from scratch, with the help of strict rules and guidelines. You can track your progress easily through an in-app dashboard, and force yourself to finish challenges under a deadline constraint.

Your progress will be checked against other users on the Leaderboard, showing you how much you have improved.

The tool will make you a better/professional front-end developer, by:

1. Learning to convert User Interfaces into readable and semantic HTML
2. Learning how to analyze and write a good HTML Structure
3. Learning how to write class names of your HTML elements following a consistent naming convention
4. Writing self-contained, readable, modular, concise, and reusable HTML/CSS UIs, including patterns like product listing, pricing items, breadcrumbs, navigations, paginations, and more.
5. Writing accessible code
6. Learning Different CSS properties implementations
7. Building real-world user interfaces
8. Learning how to present a UI content in different ways, which can be a good UX exercise.

Divize is the perfect tool to learn how to write small and reusable user interfaces, by learning how professionals build small UIs effectively. Divize is designed to give you the ability to analyze and write a good structure, name your elements effectively following a pattern, and write concise CSS with reusability in mind.

The HTML/CSS coding challenge is a set of instructions you must follow correctly to complete it successfully.

Steps

The instructions are separated into two steps: HTML step and CSS step.

The HTML step has a set of instructions that must be followed in order to complete the first half of the challenge. After completing the HTML step successfully, you'll move to the CSS step, which also applies a set of instructions to finish the second half and the entire challenge.

HTML Phase

The HTML phase of the challenge requires you to employ good semantics by using the appropriate tag for each element. Employ the parent, child, and sibling structure to ensure it is properly formatted, and apply BEM as a class naming convention for a better organization of your code.

CSS Phase

For the CSS phase, you'll be provided with a set of properties where you'll have to write their corresponding values, where each property or a set of properties has their corresponding instructions.

Modes

Each challenge has two modes:

1. Assisted Mode: you'll have to follow a list of instructions to write the HTML code and fill in the blank for the CSS phase;
2. Advanced Mode: you'll have to follow a list of instructions to write the HTML code and write the CSS code from scratch where you'll not be provided with a set of CSS properties and you'll have to write them by yourself.

Deadline

To get right in each challenge: finish on time and avoid copying and pasting code, as that will stop you from continuing and force you to reset the entire challenge.

Score

Each challenge has a score that can help you raise your ranking on the leaderboard. The points will be added to your total score if you complete a challenge in time, or subtracted if you reset the challenge.

You should already have some familiarity regarding HTML/CSS to pass the coding challenges through the Divize Tool, but do not require extensive knowledge unless you are trying to pass advanced challenges.

The Divize Tool is a learning platform that allows anyone to learn how to code by solving challenges. It uses a gamification approach to teaching which makes it fun and engaging while still being educational.

The Divize Tool uses real-world industry-standard technologies like HTML and CSS to teach you everything you need to know about these languages. The Divize Tool has been designed in such a way that anyone can use it, whether you're a beginner or an expert.

Points are a way to keep track of your progress on the leaderboard. You earn points by completing challenges and lose them by resetting them.

Points are awarded or deducted for each submission according to the following criteria:

1. Easy Challenge: 20 XP
2. Medium Challenge: 50 XP
3. Advanced Challenge: 100 XP

The score will increase if you finish challenges from the Advanced Mode and if you Finish in time (before the deadline). The score will decrease if you finish after the deadline.

You can check your current score by clicking on Profile in the dropdown menu from your avatar.

The points system is designed to encourage you to think about how to solve challenges, rather than just following steps blindly. It's okay if you don't understand everything in a challenge; just try to make sure that what you do understand works properly before moving on!

You are allowed to use the code challenges in your own free or commercial content. As an example, if you are video-streaming yourself completing challenges on the Divize Platform, or using free challenges in your free content/course/tutorials while providing attribution to Divize and linking to the challenge page on the Divize site.

You are not allowed to use these challenges for paid courses or tutorials, whether it's your own paid course or someone else's paid course that you're using in one of your videos.

You are not allowed to sell any of these challenges as part of another product (such as a bundle) or a standalone product.

The first type of action is copying and pasting code from somewhere else. We consider this as cheating, as it allows you to write less code and get more points.

The second type of action is writing the code too fast by reading it from elsewhere.

Both of these behaviors will force you to reset the challenge.

The tool is not mobile-friendly as the goal is to write the code in a full-width browser context to simulate a real UI to HTML/CSS conversion experience.

It'll be more useful if you try it on your desktop or laptop computer.