i completed the project without giving up
What challenges did you encounter, and how did you overcome them?not finishing it early
What specific areas of your project would you like help with?i would like to improve in my skill
You might have shared the wrong project, my friend.
I would create a spacing system variables so I won't forget the sizing, and make everything consistent.
What challenges did you encounter, and how did you overcome them?I used javascript to move the image outside of the container, on smaller screens. Because using position absolute would overlap the content of the container behind the image.
The second challenge was to add spacing to the markers or number of ol, ul. I started with:
ul li::marker, but it didn't work, because as I figured out before the spacing for this tag is not supported in every browser.
So I've decided to add spacing to each individual first child element inside the li: ul li :first-child { padding-left: 0.5rem; }
What specific areas of your project would you like help with?Is it possible with pure CSS to make it similar to the solution example where the image is outside of the article container?
I'm really impressed with your elegant solution to this challenge. The way you handled the fonts was particularly well done. You have a great eye for detail and your code is clean and easy to read. Awesome job!
Hey davidsaymon,
I was checking out your code and noticed that the class names could be a bit more consistent. Keeping them consistent makes the code easier to read and maintain. For example, instead of:
<h1 class="header__title">Title</h1>
<h2 class="header__title__subTitle">Subtitle</h2>
You could use:
<h1 class="header__title">Title</h1>
<h2 class="header__subtitle">Subtitle</h2>
This way, it's clear that both elements belong to the same block (header), and the naming is more consistent.
I'm most proud of creating a fully responsive solution using only HTML and CSS without needing JavaScript. Using media queries and design techniques like Flexbox and Grid really allowed me to make the layout flexible and easy to adapt. Next time, I could further optimize the image structure or add subtle animations to improve interactivity.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges was making sure the card looked good on both small and large screens. To overcome this, I focused on a mobile-first approach, adjusting sizes and alignments as I scaled the design. I also had to tweak margins and spacing to prevent elements from overflowing on smaller screens.
What specific areas of your project would you like help with?’d love feedback on how I could optimize the performance of images, as image size is important in a responsive design. Additionally, I’d like to know if there are ways to make the design more accessible or improve the semantic structure of the HTML.
That i completed the project myself.
What challenges did you encounter, and how did you overcome them?The mobile version and the sizing.
What specific areas of your project would you like help with?The mobile version and some finishing touches.
HTML
CSS
