New Challenge: Continuous Underline Text Animation

New Challenge: Continuous Underline Text Animation

By Solving the Continuous Underline HTML/CSS Animation Challenge, you'll learn to create a stylized, interactive hyperlink that can be used as a button in a user interface (UI). Here's a high-level overview of the UI element and what you'll learn:

Read the article

Latest articles

New Challenge: Minimal Home Accessories

New Challenge: Minimal Home Accessories

The Minimal Home Accessories challenge is designed to guide students in creating effective HTML/CSS code while adhering to good performance practices. One of the key learning outcomes of this task is understanding how to adapt image breakpoints for a variety of scenarios to enhance performance.

Get Unstuck: Challenge Instructions Help

Get Unstuck: Challenge Instructions Help

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.

Showcase Your Skills: Share Your Profile

Showcase Your Skills: Share Your Profile

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.

🚀 Private Beta: Testing Divize.io

🚀 Private Beta: Testing Divize.io

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.

Personalize Your Profile's Privacy

Personalize Your Profile's Privacy

Divize uses GitHub for authentication, and to provide users with more control over their public profile information, we've introduced additional privacy settings.

Editor's Advanced Mode: Push Your Limits

Editor's Advanced Mode: Push Your Limits

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.

UI Resizing: Multi-Device Preview Options

UI Resizing: Multi-Device Preview Options

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.

User Interfaces Elements Inspection

User Interfaces Elements Inspection

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.

Climb the Ranks: Top 10 HTML/CSS Achievers

Climb the Ranks: Top 10 HTML/CSS Achievers

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.

MDN Guide: Integrated HTML & CSS References

MDN Guide: Integrated HTML & CSS References

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.

UI Analysis: HTML Tags & CSS Properties

UI Analysis: HTML Tags & CSS Properties

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.

Beat the Clock: Bonus Scores

Beat the Clock: Bonus Scores

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.

Manual Input Only: No Copy-Paste in Editor

Manual Input Only: No Copy-Paste in Editor

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.

Challenge Reset: Restart Anytime, Any Stage

Challenge Reset: Restart Anytime, Any Stage

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.

Refine Challenges Listing: Level, Type & Status

Refine Challenges Listing: Level, Type & Status

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.

UI Matchup: Visual Design Checker

UI Matchup: Visual Design Checker

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 Support: Boosting the HTML Editor Efficiency

Emmet Support: Boosting the HTML Editor Efficiency

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.