DEV Community


Posted on

Blog post about recreating website badges querying system- week 11

Image description

This screenshot is the current state of the project to recreate the badges page that Liz and I are working on, only frontend developed

1- How did you start?

We started trying to recreate the template by going to the home website and using a tool called SnipCSS (chrome extension) that allows us to click on an element and copy it's style/html. We did this for all the necessary elements, put it in our own code, and trimmed a lot of "fat" off of the copied code because most of it did nothing.

2- What did you decide to attack first?

The frontend looks, because without that we cannot have any coherent basis. Liz worked on the badges as I worked on the search bar.

3- What issues have you had?

Most of our current issues stem from looking at the ocean of copied code from the base website, there really was a lot of material that was completely unnecessary and only served to make understanding the site/element layout confusing.

Then with the useful bits that we had left, we had to reverse engineer each element/class/thing to look at what needed to be done to then fit it into the standard of how we wanted it to look. We encountered some dependency problems along the way.

4- What concepts translated from Project 1's card?

Project 1's card really helped with basic understanding of workflow and syntax, and where to find things. Certain concepts that translated over were mostly debugging related, like how efficiently find why an element wasn't doing what it was asked because of dependencies.

5- What's your next priority?

To flesh out the overall presentation of the frontend and polish any quirks, and then to tackle the backend when we are ready.

6- What problems are you unsure of how to solve?

Too many to name, but one would be why certain CSS attributes don't apply to certain classes in a div but others in the same div work just fine.

The backend will also be tough and we might need some direction on how to navigate it.

Top comments (0)