💡 An editor is ready below the article—experiment freely!
Updated: May 31, 2026
Make List
📌
Conclusion
Make List — free browser-based HTML practice
Why it matters in real projects
ul is an unordered list and li is a list item. Put li elements directly inside the ul. Similar patterns appear daily in code review and production UI work.Step-by-step workflow
1. Read the guide and understand the goal of "Make List" 2. Review the HTML editor pane and start from the starter code 3. Open hints if stuck; compare your diff with the sample solution 4. Click Run and inspect preview/console output 5. Auto-check looks for output containing: <ul>, <li>. 6. After success, continue with adjacent exercises in the same categoryCore concept explained
ul is an unordered list and li is a list item. Put li elements directly inside the ul.Technical focus
Key HTML elements in this task: ul, li.Hint before you peek at the solution
ul is the list container, li is each item. Write li between <ul> and </ul>.Sample solution walkthrough
The solution uses HTML tags such as ul, li. Check nesting and closing tags. Explanation: ul is an unordered list and li is a list item. Put li elements directly inside the ul. Hint recap: ul is the list container, li is each item. Write li between and .Solution code
📝 Sample code
<ul>
<li>apple</li>
<li>banana</li>
<li>grape</li>
</ul>Common mistakes for this exact task
- Skipping the hint: ul is the list container, li is each item. Write li between <ul> and </ul>.Troubleshooting
Q: Preview does not change after Run A: Ensure you edited the HTML pane and clicked Run. Q: Looks correct but check fails A: Auto-check looks for output containing: <ul>, <li>. Look for typos, full-width spaces, or unclosed tags. Q: Console shows errors A: Open DevTools Console and fix bracket/quote mismatches at the reported line. Q: Hard to type on mobile A: Use landscape mode or continue on desktop—the same URL keeps progress in localStorage.Interview / portfolio tips
- Explain the techniques in "Make List" in your own words within 30 seconds - Practice walking through each line of the sample solution on a whiteboard - Be ready to discuss tags: ul, li - Mention responsive or accessibility trade-offs - Prepare one alternative approach and why you chose this oneWhat to do after you pass
Move to the next exercise in the environment track, then continue the learning roadmap at /en/learning/environment/.Keywords
Free hands-on exercise covering Create a list, environment, beginner, ul, li, make list—search-friendly guide for Make List.🧪 Try it here — safe to break things
Use the editor below to write code and preview instantly.
Jump to editor■ Exercise task
Create a list of your three favorite fruits using ul and li. Replace the ___ placeholders in the template below.
Hint if stuck
ul is the list container, li is each item. Write li between <ul> and </ul>.