DEV Community

Liz
Liz

Posted on

1

stealing css

I am a visual person, so the first thing I did was recreate the badge list. This has no functionality, but I was able to import an icon and make it look pretty much exactly like the object we're duplicating. The next step is to add the drop down with a toggle. Originally, I used snipCSS to get a basic idea of how to build the object in the CSS, and I customized it accordingly. Here it is below:

Image description

I know the next step is adding the drop down toggle. There is a lot I can steal from Project 1's card such as the details and summary tags. I just have to think about how I want to layer it in. Whatever container the details and summary tags is in will need to expand with the information hidden. The information will also need to be modifiable through a slot so it can be change to fit the needs of the user.

Currently, my partner is working on the search bar. I feel like that will be the hardest part. Once everything is sketched out visually, we will need to start working on the more technically sides of things to get the API working and actually make the page have functionality.

I know this is super short, but the main gist of the past week was laying everything out the way we know how to.

https://github.com/lizblake/badge-list

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️