I spent a lot of time on this challenge and I finally completed it.
What challenges did you encounter, and how did you overcome them?I had a lot of problems with the responsiveness and also the grid structuring.
What specific areas of your project would you like help with?I need help with the responsiveness especially the tablet and Ipad view.
Looks great!
For the socials image (insta & X) you could set the img to overflow-x: scroll; so it doesn't end up squished like that and look closer to the original design.
The spacing and BG-color are off. But besides that, good work!
Great job with the shawdows
This is my first project using Tailwind CSS, and i liked the end result. Maybe next time i could use more the overriding of the theme styles and extends within the config file instead of creating custom classes.
What challenges did you encounter, and how did you overcome them?I was learning the basics and the class names of styles of Tailwind CSS. I did have a little of a struggle setting Tailwind, as well using the config file and the conditionals based in viewport sizes, as it has a similar but different enough logic compared to Bootstrap.
I'm most proud of completing the project because, without the figma files giving the specific measurements, I had to eyeball the length and width of the card and buttons so that took me quite a while to figure out. What I would do differently, is make sure that I have the pro version of frontend mentor so that I can have a bit of more professional workflow.
What challenges did you encounter, and how did you overcome them?I don't know if it was my eyes, but I couldn't figure out how to get the "London, united kingdom" part directly underneath the title, so I took off the top and bottom margins hoping that it did something. Also, the colors that were given in the styles guide at leas to me looked off from the finished image that was provided but I still went with it.
What specific areas of your project would you like help with?I mentioned earlier that I wasn't able to get the "London, United Kingdom" part directly underneath the title so I was wondering what should I do differently there, other than that; I think I did ok with the project.
Nice work!
To solve the issue you mentioned. It should be pretty easy since you're using Tailwind, you could simply add text-center to the wrapping container or directly to the h2 element containing the text.
I think I've figured out how to use the Google fonts downloaded directly into the project.
What challenges did you encounter, and how did you overcome them?I wanted to avoid putting a max-width on the "learning" tag, so I ended up finding “align-items: flex-start”. It seemed coherent here.
What specific areas of your project would you like help with?I find that there are some repetitive elements in the CSS, and I didn't know how to factor it (or even if you should or shouldn't for this kind of case).
Is the "align-items: flex-start" ok here? (file "style.css", line 148 on the first version)
Is it ok for the structure of the index.html? for example the use of the "article" tag, or the tag, or the tag with class for the publication date?
Thank you very much!
Good use of semantic HTML.
I notice there's no description of your image in the alt="", I also see that you haven't customized the README.md file.
About your question no.2, I think a simple way to solve that would be text-align: left.
I'm most proud of completing challenging projects and learning from them, especially when it involves problem-solving. Next time, I’d aim for better .
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was implementing media queries to ensure the component was fully responsive on various screen sizes. Specifically, I found it difficult to achieve the right scaling for the QR code and adjust the layout for smaller screens.
After experimenting with different breakpoints, I was able to improve the responsiveness. I used a mobile-first approach, starting with styles for smaller screens and adding media queries to adjust for larger displays. This approach helped simplify the scaling and improve layout consistency across devices.
What specific areas of your project would you like help with?Responsive Design and other thing
I can't see a shadow on the component, did you leave it out?
I assume applying the exact shadow effect as the design will prove difficult with just CSS - It was for me.
