All solutions

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

I'm happy that I organized my CSS pretty neatly this time around. I'm also getting the hang of "thinking in CSS", as in, how to write CSS in a way that will not make me get lost in my own code further down the road. I'm on the look out for elements that can be reused later, as well as unique ones. I'm also thinking about class names that can be strategically reused.

Basically, I took this task and turned it into an exercise for organization.

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

Somewhere around the midpoint of the task, when there were enough elements to get cluttered, it became hard to keep track of individual elements' margins and paddings.

I had an idea to give each element's backgrounds a unique color, but it nearly gave me epilepsy looking at it.

In the end, I just gave subtle dotted borders for every element and that was sufficient to help keep track of every adjustment I made.

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

I'm proud of doing this task just by sight alone, instead of using Figma to get the exact measurements.

It went pretty smoothly, and much faster than the previous two tasks.

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

I had to stop to watch a couple youtube videos, where I figured out that by applying flex-direction: column, the justify-content and align-items functions get swapped.

That was a hurdle that I had been struggling with in the early phases of this task.

I also learned about using var() variables, which helped me clean up my code.

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

I need some tips for magically working faster lol.

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

I'm glad I took my time this time--as opposed to the first project--to do this completely on my own, without the figma-to-code plugin. It got me to tackle puzzles piece by piece, carefully and slowly building skills in both CSS mechanics and also finding resources.

In doing so, I have already imagined how I would do some steps differently, in order to achieve new things that i am imagining doing in the future.

For instance, i am imagining certain element interactions on hover or click that would require placing them in a parent container, so that i can alter their shape or sizing without affecting their neighboring elements.

I'm also glad that I've made more interactive elements than what was shown in the starter design, because in a real world scenario, you'd also have hover and click effects on the header image, author name, and profile pic too.

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

I had difficulty at first remembering when to affect margin settings, and when to affect padding.

Playing around with flexbox and grid settings was also a challenge at first, but they were fun puzzles to solve.

Same thing with organizing CSS selectors and trying to find the most efficient way to organize them and keep them clean of repeating or obsolete declarations.

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

I would like help with organizing CSS declarations to keep them clean.

I find that I struggle with not making a mess of my CSS code.

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

I'm proud of feeling that everything clicked once I just jumped right in. I had learned CSS and HTML long before, but didn't really use that knowledge and most of what I had known was forgotten; or so I thought.

Once I ran into the attribute names and values, I started to remember everything again.

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

I was stuck at first, not knowing where to start. But after some digging around in Figma, I found how to simplify turning the figma starter file into code using plugins. I used the Figma to Code plugin which, though not correct, got me into the right path of sorting out the CSS code