Completing an HTML/CSS challenge requires following a set of instructions during two distinct phases: the HTML phase, where you create a semantically correct structure, and the CSS phase, where you style the user interface.
Read the article
Completing challenges on Divize not only improves your skills but also earns you achievements that are displayed on your public profile. To help you share these accomplishments and showcase your progress, we've introduced a feature that allows you to easily share your public profile on social media platforms, including LinkedIn, Twitter, and Facebook.
As we move through the beta-testing phase of the Divize HTML/CSS Challenges tool, we are taking a selective approach by focusing on specific types of users for whom the tool is designed. At this stage, we are eager to evaluate the product with a diverse groups and fields, each bringing their unique expertise to the table. Our aim is to gain insights that will help us fine-tune the tool for its public launch.
Divize uses GitHub for authentication, and to provide users with more control over their public profile information, we've introduced additional privacy settings.
We introduced an Advanced Mode in the Divize HTML/CSS Challenges Editor, offering a more challenging experience for learners who want to push their skills further. Unlike the Assisted Mode, where you are provided with CSS properties to fill in the blanks, the Advanced Mode requires you to read CSS instructions and write both the corresponding properties and values independently.
Mastering responsive design is crucial in today's web development landscape. To help you practice and perfect your responsive HTML/CSS skills, we've introduced a responsive controls feature in the Divize editor. This feature enables you to adapt your user interfaces to various device sizes, such as mobile or tablet, in both portrait and landscape orientations. You can also adjust the resolution manually to test your CSS breakpoints.
A crucial skill for frontend developers is understanding the structure of user interfaces to make accurate HTML/CSS conversions. To help you develop this skill, we've implemented a UI inspector feature in Divize HTML/CSS Challenges Editor. This feature allows you to inspect and highlight elements directly from the UI or from a tree viewer, providing a better understanding of the UI's structure.
Competition can be a powerful motivator, pushing students to achieve more and improve their skills. With this in mind, we've introduced a leaderboard feature to the Divize HTML/CSS Challenges tool. This new addition showcases the top 10 highest achiever on the platform—those who complete more HTML/CSS challenges and earn higher scores will secure their place at the top of the list.
Our HTML/CSS Challenges tool now includes an all-in-one feature, the UI Analysis, which lists the HTML tags and CSS properties for each challenge. This feature, combined with the MDN reference integration, provides you with direct access to implementation details for HTML tags and CSS properties, making it easier to learn and apply them correctly.
In each HTML/CSS challenge, adhering to proper semantic structure and utilizing the appropriate CSS properties are crucial for creating readable and effective user interfaces.
Deadlines play a crucial role in achieving goals, providing a sense of urgency that motivates us to complete tasks within a set timeframe. Recognizing this, we've introduced a new feature to the Divize HTML/CSS Challenges tool: a deadline-driven scoring system. This addition encourages students to tackle challenges more efficiently, and in the process, learn more about HTML and CSS.
Effective learning in writing code often comes from writing it manually rather than copying and pasting it from external sources. To encourage a more hands-on approach, we've implemented a feature in the Divize HTML/CSS Challenges Editor tool that discourages copying and pasting code. This feature not only prevents students from copying and pasting, but also detects such actions, prompts a warning, and requires a challenge reset to continue.
Whether you want to practice a challenge multiple times or aim for a better score, the new reset feature in the Divize HTML/CSS Challenges tool will help you with that. This versatile feature allows students to restart challenges at any phase, providing a fresh start to refine your HTML and CSS skills.
We have added new challenges filters to Divize, allowing you to easily find challenges that match your skill level, preferences, and progress. With three filter options—Levels (Easy, Medium, or Advanced), Type (Free or Premium), and Status (Finished or Unfinished)—you can tailor your learning experience and focus on the challenges that interest you the most.
When taking on a User Interface challenge in the Divize HTML/CSS Challenges tool, having a way to compare your work with the intended outcome is crucial. That's why we've introduced a new UI comparison feature that allows you to visually match your progress with the provided preview. This addition helps you stay on track and ensure your final result aligns with the desired design.
Emmet is a powerful and efficient tool that transforms short expressions into complete HTML markup and CSS. By integrating Emmet into the Divize HTML/CSS Challenges Editor, we've enhanced the user experience, enabling you to write HTML in a more DRY (Don't Repeat Yourself) and less repetitive way.