DEV Community

Cover image for Front-end HTML/CSS Coding Challenges Tool
Arbaoui Mehdi
Arbaoui Mehdi

Posted on

Front-end HTML/CSS Coding Challenges Tool

As a Frontend Engineer, I often navigated the complexities of HTML and CSS alongside my partner, a Backend Developer. We frequently discussed the common challenges many face in mastering these languages, noting a significant gap between theoretical knowledge and practical experience in writing effective and accessible code for real-world interfaces.

This led to the birth of divize.io, a concept born from our brainstorming. Unlike typical tutorials or guides, the platform we made is envisioned as a practical, interactive space for individuals to enhance their HTML and CSS skills by working on real-world user interfaces. During its development, we emphasized a structured learning path, ensuring users build interfaces from scratch while adhering to industry best practices. This approach guarantees a solid foundation and a profound understanding of HTML and CSS, moving beyond the theoretical learning offered elsewhere.

Now, let's delve into the main features of the tool:

Features

# 1 Inspect and Highlight

Inspect & Highlight the User Interface Challenge Elements

The UI Inspector is a convenient feature that allows users to interactively examine and dissect elements within a user interface preview by clicking on the dedicated button in the top bar. Easily toggled on and off, it provides valuable insights into the UI's structure and can be disabled for seamless text selection without any disruptions.

Inspect elements from the UI Preview

To enable the UI inspector, toggle the inspector button on the top bar. This feature allows you to inspect elements using your mouse directly from the user interface preview. It offers a clear understanding of how the UI is decomposed. If you prefer to disable the UI inspector, simply click the button again. This can be useful if you want to select text from the UI without interference from the inspector.

Inspect User Interface Elements from the UI itself
Inspect User Interface Elements from the UI itself

Inspect from the Tree Viewer

The tree viewer displays all elements of a user interface according to their parent, child, and sibling structure. By hovering over each element in the tree viewer, the corresponding element in the UI preview will be highlighted. This feature helps you visualize the UI's structure, enabling you to make informed decisions about semantic elements.

Inspect User Interface Elements from the Tree
Inspect User Interface Elements from the Tree

# 2 Timed Challenges

Timed HTML/CSS Challenges

The Deadline-Driven Scoring System is an engaging feature that fosters a sense of urgency and encourages efficient learning. By setting time-sensitive goals, it motivates you to tackle challenges more effectively, ultimately boosting your HTML and CSS skills in the process.

Goal time and how it affects the score

The new deadline feature provides a dynamic scoring system for each challenge:

  • Finish within the goal time: Earn your challenge score plus a bonus.
  • Finish after the goal time: Earn your challenge score, without the bonus.
  • Finish after the deadline: Earn less than the challenge score, without the bonus.
  • Don't finish the challenge: Receive no score.

Finished HTML/CSS Challenge in Time
Modal of the Finished Challenge in Time

This scoring system adds a competitive element to your learning experience, motivating you to improve your HTML and CSS skills under time constraints. As a result, you'll develop the ability to work efficiently under pressure, ultimately leading to an increase in your ranking on the leaderboard.

Divize HTML/CSS Challengers Leaderboard
Challengers Leaderboard

# 3 Reset a Challenge

Reset an HTML/CSS Challenge

The Reset Feature enables you to restart challenges at any point, providing an opportunity to practice and refine your HTML and CSS skills more effectively. This versatile function caters to those who want to hone their abilities by attempting challenges multiple times or aiming for better scores.

How the Challenge Reset Feature Works

The reset feature can be used at any phase of a challenge:

  • During the HTML phase, if you haven't finished it yet.
  • After completing the HTML phase and moving to the CSS phase, if you haven't finished it yet.
  • After finishing both HTML and CSS phases, effectively completing the challenge.

To reset a challenge, simply click the reset button in the left sidebar. This will reset your progress, the deadline countdown, and your score, allowing you to start from the beginning with a clean slate.

Reset an HTML/CSS Divize Challenge
Reset an HTML/CSS Challenge

Additionally, if you try to switch from Assisted Mode to Advanced Mode, you'll be prompted to reset the challenge.

Reasons to Reset a Challenge

Resetting a challenge can be beneficial for various reasons:

  • Practice a challenge multiple times to enhance your learning experience.
  • Aim for a better score by completing the challenge within the deadline.
  • Strive for a higher score by finishing the challenge in Advanced Mode.

# 4 Copy-Paste Prohibited

Divize Editor Copy-Paste Prohibited
Divize Editor Copy-Paste Prohibited

The Editor's Copy-Paste Prevention Feature is designed to promote a hands-on learning experience by discouraging the act of copying and pasting code. This feature detects such actions, issues a warning, and necessitates a challenge reset to proceed, ultimately fostering better code-writing habits and a deeper understanding of HTML and CSS concepts.

How the Anti-Copy-Paste Feature Works

When using the Divize Editor, copying and pasting external code into it is not allowed. If a student attempts to do so, they'll receive a warning indicating that they have cheated, and they'll be required to reset the challenge. Failing to reset the challenge will result in a cheated label being assigned to it.

Cheating on a Challenge Public Profile Label
Cheating on a Challenge Public Profile Label

# 5 Responsive Controls

User Interface Responsive Controls

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.

How Responsive Controls Work

Using the responsive controls is simple and efficient:

  • Click the mobile or tablet button in the top bar to adapt the UI to the respective resolution in portrait orientation.
  • Click the mobile or tablet button again to switch the orientation to landscape.
  • Click the arrows button in the top bar to fit the UI to your browser's size.
  • Click the pencil button to reveal a dropdown where you can set your preferred width manually.
  • To adjust the width manually, drag the element on the right side of the UI, and it will adapt to the position where you stop dragging.

Adjust the Width of a Responsive Challenge
Adjust the Width of a Responsive Challenge

# 6 UI Analyzer

User Interface HTML used Tags and CSS used Properties

The Semantics Analyzer and CSS Properties Analyzer features provide guidance on appropriate semantic tags and CSS properties for UI elements, helping users expand their HTML/CSS knowledge and develop better user interfaces.

Enhancing Your Learning Experience with the UIs Code Analyzer Features

The Semantics Analyzer and CSS Properties Analyzer features offer several benefits for an effective learning experience:

  • Understand the correct semantic tags to use for specific UI elements, such as breadcrumbs using <nav>, <ol>, <li> and <a>.
  • Access a comprehensive list of HTML tags and their references for easy reference.
  • Receive a summary of the HTML tags and CSS properties required to complete a challenge successfully.
  • Discover new HTML tags and CSS property implementations to expand your HTML/CSS knowledge.

How to Use the Semantics and CSS Properties Analyzer Features

After choosing a challenge, you'll find a button with the corresponding language logo near the editor. In the HTML phase, click on the HTML logo button next to the instructions to display a list of tags for the challenge. Select the semantically correct tags for each element, and click on individual tags to view a brief definition and a reference link for further information.

Divize Editor - User Interface HTML Tags
User Interface Challenge HTML Tags

During the CSS phase, click on the CSS logo button to see a list of the required CSS properties to complete the challenge. Each property is clickable, displaying its definition and a link to its reference and implementation details.

Divize Editor - User Interface CSS Properties
User Interface Challenge CSS Properties

# 7 MDN Reference

MDN integrated HTML/CSS References

The UI Analysis feature goal is to enhance learning by displaying a list of HTML tags and CSS properties for each challenge. Integrated with the MDN reference, it offers direct access to implementation details, facilitating a better understanding and application of HTML and CSS. Furthermore, the Divize MDN Guide pages serve as a centralized resource, allowing you to conveniently search and find references to HTML tags and CSS properties all in one location.

How to Use the UI Analysis Feature

  • Locate the HTML logo or CSS logo button next to the instructions tab.
  • Click on the button to reveal a list of HTML tags or CSS properties.
  • Choose the HTML tag or CSS property you're interested in, which will open a short description containing a reference link.

Divize HTML/CSS MDN Reference
HTML MDN Reference

  • Click on the reference link to visit its reference page with detailed implementation information from MDN.

Divize HTML/CSS MDN Reference
CSS MDN Reference

# 8 UI Matchup

User Interface Matchup Preview

The UI Comparison Feature allows you to visually compare your progress with the provided preview while tackling User Interface challenges, ensuring your work aligns with the intended design. This helpful addition assists you in achieving accurate and effective results.

How the UI Comparison Feature Works

The UI comparison feature is enabled by default and can be controlled using a toggle on the topbar. Here's how to use it:

  • Start a new UI Challenge.
  • Ensure the UI comparison feature is enabled by checking the toggle on the topbar.
  • To compare your work with the preview, simply drag the "mirror" slider from left to right. This will reveal the preview of the intended design.
  • Drag the slider from right to left to view your work and assess your progress.
  • If you prefer to disable the UI comparison feature, simply toggle it off from the topbar.

Compare the HTML/CSS Challenge Preview with the Student Result
Compare the HTML/CSS Challenge Preview with the Student Result

# 9 Code Editor Emmet Support

Divize Editor HTML Emmet Support

The Emmet integration is a powerful feature that allows you to create HTML and CSS code more efficiently using short expressions. This enhancement promotes a DRY (Don't Repeat Yourself) approach and reduces repetition, resulting in an improved user experience.

How Does Emmet Work in the Divize Editor?

Emmet is a powerful and widely-used toolkit that allows developers to generate and manipulate HTML code with a variety of expressions. These expressions can be used to perform a range of operations on HTML code, including creating new elements, nesting them within other elements, adding attributes to elements, and more:

{} adding text
[] adding attribute
> child element
^ up one element
* multiplication
$ automatic numbering
+ sibling
() grouping
. add class
# add ID
Enter fullscreen mode Exit fullscreen mode

With these expressions, you can quickly generate HTML structures and improve your workflow while progressing through challenges.

A Simple Example of Using Emmet in our Editor

Consider this Emmet code, which generates a basic HTML structure with a main section, a header, a section for the main content, and a footer with a span tag.

main.container>h1{Header}+section>p{Main}+footer>span
Enter fullscreen mode Exit fullscreen mode

The generated HTML code will look like this:

<main class="container">
  <h1>Header</h1>
  <section>
    <p>Main</p>
    <footer>
      <span></span>
    </footer>
  </section>
</main>
Enter fullscreen mode Exit fullscreen mode

With Emmet integrated into Divize Editor, you can significantly speed up your coding process while reducing repetition.

# 10 Advanced Mode Challenges

Divize Advanced Editor Mode

The Advanced Mode feature offers an increased challenge for learners seeking to enhance their skills. Unlike Assisted Mode, where CSS properties are provided to be filled in, Advanced Mode requires users to independently interpret CSS instructions and write both the corresponding properties and values, promoting a deeper understanding and mastery.

Key Elements of the Advanced Mode

  • No phasing: Both HTML and CSS editors are available simultaneously, and you'll have access to instructions for both.

Advanced Editor Mode Elements
Advanced Editor Mode Elements

  • Higher score potential: Finishing a challenge in time in Advanced Mode will result in a higher score compared to completing it in Assisted Mode.

How to Use Advanced Mode

To switch to Advanced Mode, click on the Advanced Mode tab in the top bar. You will be prompted to reset the challenge because switching modes requires a fresh start. The countdown will restart, and any previously calculated scores for the challenge will be reset.

Enable Divize Advanced Editor Mode
Enable Divize Advanced Editor Mode

# 11 Accessibility Steps

In our commitment to promoting writing more accessible HTML structures, we've introduced a feature that includes a comprehensive list of accessibility best practices. This guide aids in crafting an accessibility-friendly HTML structure, ensuring that websites and web applications are usable by everyone, including individuals with disabilities.

Accessibility HTML Tests
Accessibility HTML Tests

Conclusion

In conclusion, Divize.io is a practical tool for enhancing HTML and CSS skills, offering interactive challenges and real-world scenarios. It provides a straightforward approach to learning, with a focus on understanding and applying coding skills effectively.

Ready for the first challenge? Let's center a <div>

Video Explainer

Top comments (0)