All solutions

What are you most proud of, and what would you do differently next time?

I was more selective in my markup and CSS style rules for this one. I treated it more as a self-contained widget with the assumption that other site-wide rules (resets, fonts, margins, etc.) were already in play. I also set up my root style variables to be more modular so if anyone wants to swap out the color palette for a different brand/theme it's super simple.

What challenges did you encounter, and how did you overcome them?

The CSS was done in a bit of a windshield wiper method, refactoring the styles and dependencies as I went. The only real challenges were getting the image to the right size (a lot of trial and error eyeballing), and centering the social link buttons without making every nested div a flexbox.

What specific areas of your project would you like help with?

I'm still trying to get easily responsive font proportions down pat. Ideally there would be one base font for the entire widget that all elements would base their font size off of. That way if this ever needs to resize for a different design layout it only takes one line of CSS to change it all.

If anybody knows of a simple and straightforward method of handling this I'd be very grateful to know what it is.

What are you most proud of, and what would you do differently next time?

I'm mostly proud of how I was able to figure out more "recent" CSS stylings such as drop shadows, transformations, etc. on my own. I also wanted to get as close as I could to the design from eyeballing the visual image only, not extracting the numerical values from the Figma file.

I'm also pleased at how much faster I was able to complete this compared to previous micro projects / components.

What challenges did you encounter, and how did you overcome them?

The question was whether to nest the anchor tags inside their relative DOM elements, or place the DOM elements inside anchor tags. I decided to go with the latter because if this were a full-site design system or theme, there could easily be a case where h3 elements are NOT meant to also be hyperlinks and I didn't want the stylings to be tag-nesting dependent.

What specific areas of your project would you like help with?

I used a fixed size since this is a card component. When it comes to responsive designs I'm good with full site and section layouts, but any micro changes to smaller in-page components are not as intuitive to me for some reason.

I would like to know if there's a way to make this (especially the text) slightly responsive without using a hard break point for elements other than the card body itself

What are you most proud of, and what would you do differently next time?

Honestly it's the fact that I followed along with a lengthy tutorial and stuck with it. One objective was to time myself and see how real time stacked up against "video time", because other than just typing along I looked up anything I hadn't encountered before; checking places like the Mozilla documentation, or caniuse to check for browser support. The other objective (and why I chose to follow a tutorial) was to see which aspects of frontend development I've missed and what I could learn from someone more seasoned to improve my turnaround time and workflow.

What are you most proud of, and what would you do differently next time?

Happy with how fast this was to put together (really simple microproject though). I used the extra time to hone on quick and tidy flexbox positioning, along with eyeballing font relative size differences.

Really eager to get back into the Figma docs where the specs are clearly laid out but need to get the basics down to a fast-paced T first, and part of that is making visual guesses.

What specific areas of your project would you like help with?

The card is fixed width as per the project description (I'm treating these as if they came from real clients/supervisors, who are clear on what they want).

That said, setting a fixed width allowed me to "hide" certain scaling issues which would have popped up had this been made responsive. My responsive design is still kind of moderate (stylings take me more CSS lines than they reasonably should) so if anybody has any clean and concise ideas on making this card fully responsive I would be most grateful.

What are you most proud of, and what would you do differently next time?

For these early Frontend Mentor projects I've grouped them into a shared repo, starting up a component library. Having a new repo for each microproject seemed a bit much so I practiced becoming more familiar with basic GitHub operations.

What challenges did you encounter, and how did you overcome them?

I learned not to take flex-start for granted. Having the nested DOM elements drop out of their containers despite no 'position' or 'float' attributes being set took some detective work.

What specific areas of your project would you like help with?

At very specific widths the columns stagger at the base. It's only a few narrow ones, but in a live project at tablets widths this would need to be fixed.

Does anybody have any ideas? I usually try to only use style rules supported in browsers at least 5 years old; avoiding cutting edge stuff in production builds so as not to rely on them for fast fixes.

What are you most proud of, and what would you do differently next time?

I've been dabbling with Frontend Mentor for a while now, but only on my local computer. This is my first time doing a push using modern (post 2015) CSS practices. this is also my first public push to GitHub; figured I'd use this basic project as a test drive for other challenges.

Also I made a point to time myself and keep it short. Overshot the timeframe but learned quite a bit about debugging image styling (i.e. that un-asked for whitespace at beneath an image).

Now that I have the process down I'll run a few other timed basic challenges before moving on to full complex templates.