After grinding through two sets of fairly heavy theory lessons over the weekend and writing about them, it was a relief to get back to a freeCodeCamp workshop.
The workshop in question had me building a list of major web browsers with the HTML boilerplate provided, as shown beyond:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of Browsers and Descriptions</title>
</head>
<body>
</body>
</html>
As before on freeCodeCamp, earlier theory lessons will now be put into practice with this workshop - with Description Lists front-and-center!
In each exercise, I used description list elements to add a title and description. Every step followed the same pattern - listing the browser name along with a short explanation. Seven steps later, the workshop was complete, and the final result is shown in the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of Browsers and Descriptions</title>
</head>
<body>
<h1>List of Major Web Browsers</h1>
<dl>
<dt>Google Chrome</dt>
<dd>This is a free web browser developed by Google and first released in 2008.</dd>
<dt>Firefox</dt>
<dd>This is a free web browser developed by the Mozilla Corporation and first created in 2004.</dd>
<dt>Safari</dt>
<dd>This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.</dd>
<dt>Brave</dt>
<dd>This is a free web browser first released in 2016 that is based on the Chromium web browser.</dd>
<dt>Arc</dt>
<dd>This is a free Chromium based web browser first released in 2023 by The Browser Company.</dd>
</dl>
</body>
</html>
After that, I jumped into a few theory lessons surrounding text and time semantic elements. I’ll probably wrap those up later today, and the next post will be another workshop, this time for a Job Tips page.
Top comments (4)
Nice progress
This is a really clean and readable example of using description lists. Pairing each browser name with a short explanation makes the structure easy to understand, especially for beginners.
I also like that you didn’t overcomplicate it — just the right amount of HTML to practice the concept properly. Workshops like this are great for turning theory into muscle memory.
Looking forward to the Job Tips page workshop next — those practical exercises always make things stick better
I truly appreciate your kind words, Bhavin. Whereas I have undertaken the Responsive Web Design certification at freeCodeCamp before, I'm really enjoying this lastest version of the curriculum.
I decided to join DEV and write about my learning journey as a way to stay motivated. Doing this also helps things to stick, as you've said. I'm planning to use a knowledgement management system like Logseq or Zettlr soon, to further aid the rentention of information as well.
Thanks for sharing that, Richard — and glad to hear you’re enjoying the updated freeCodeCamp curriculum.
Writing about the learning journey is a smart move. It’s motivating and it forces clarity, which really helps things stick over time. Pairing that with a knowledge management system like Logseq or Zettlr sounds like a solid next step for long-term retention.
DEV is a great place for this kind of reflective learning. Looking forward to reading more of your progress as you go through the workshops.
Indeed, Bhavin - well said! I've been interested in the Zettelkasten method for sometime, so it's great that there are Open Source applications for me to try it out!
Again, thank you for following my progress!