FreeCodeCamp Progress: Wikipedia Viewer and Twitch Viewer

Wrapping Up the Wikipedia Viewer Project

It took me a while to return to my Wikipedia Viewer project after writing the blog post about troubleshooting the Wikipedia API. But I finally hunkered down and finished it up.

I posted my project to several online forums and received feedback on how to improve my code. A few things that were brought to my attention:

  • Accessibility: I’d created some accessibility issues when I removed the focus styling from my input, button, and link elements.
  • Semantics: I was nesting paragraph tags within <a> tags unnecessarily, when a simple <a> tag would have sufficed.

Here’s a look at how I improved my tabbed navigation experience:

GIF showing focus styling on search input and search button, as well as mouseover effect on button

I’m still working on implementing other peoples’ suggestions, so there are still a couple things on my to-do list for this project. These include:

  1. Making sure that every entry card has a summary. The API sends back empty strings for many entry summaries. I want to fix this to ensure that, if a summary string is empty, my app will grab a blurb from the Wikipedia entry.
  2. Better page alignment. I want to center the search bar in the middle of the screen and implement some jQuery effects to pull everything toward the top of the page when the results populate.


Designing the Project

I was trying to figure out what my design should look like for this upcoming project.

To start the brainstorming process, I logged onto Dribbble and started adding cool designs to a bucket.

I was really inspired by designer Sander van de Vondervoort’s user card design for another streaming app. I made a Photoshop mock-up of what a Twitch streamer’s info card might look like if I ‘borrowed’ this design.

Screenshot of user card design for TwitchTV project

I’m going to continue planning the design before I start the coding process. I’m hoping this will help solidify the page structure from the get-go and keep the CSS from becoming too unwieldy.

Until next time…that’s all folks!

By lupe

I'm a web developer at an awesome web design agency in PDX. I'm passionate about learning, playing, tinkering, and blogging about everything from coding to DIY experimentations.


  1. Congratulations on your work! Your progress shows how we can learn webdev by ourselves. I spent some time reading your posts and now I’m inspired to start my journey through The Odin Project. Wish you all the luck with the Project!! Keep going!!

    1. Thank you Bruno! I’m so happy to hear that you were inspired to start learning web dev. Keep me updated on how you like The Odin Project, and don’t be afraid to reach out if you’re in need of feedback or resource recommendations. 😀

      1. Thanks for the reply! Right now I’m gathering resources to begin my studies and I found very useful links. Do you have an e-mail where I can contact you? Maybe I can help you too with these links! 🙂

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.