Hi deezjason, good job on completing the challenge 🎉
To address your question about the background image, the issue here is that you didn't actually set the pattern background image as your page's background. Instead of creating a separate div for it, you can set it as your body's background. Check out this resource to learn more ☺️
You are using a lot of divs in this solution — it is good practice to use the appropriate semantic HTML tags instead (note that div tags do not convey any meaning about the content that's inside of it)
Practice using responsive units for your CSS properties instead of using px for everything
I hope you found these feedback to be helpful! There are more HTML and CSS best practices that I'm sure you'll learn as you do more challenges — happy coding!
What are you most proud of, and what would you do differently next time?
Completing the project.
What challenges did you encounter, and how did you overcome them?
I found using calc(rem + vw) with clamp challenging. Like what would be the apt value for the calc was a bit tricky to figure out. I just went with instict then and just played around with diff values until i liked the font size on the 320px mobile and 1440px desktop screens.
What specific areas of your project would you like help with?
Whether my use of picture element was correct or I should have used srcset.
And any help with fluid typography or any other areas of the project.
I would also like help with google fonts. Earlier they used to have a feature where you could download only font weight that you need now it seems like you have to download the whole family even though you might need only 2-3 font weights. How can I choose the specific font weights only?
Hey Srishti, good job on completing the challenge!
To address your last question about the font weights, you're going to have to replace some parts of your base URL — after the font family name, you will have to use wght (axis property for weight) and then use '@' afterward, followed by your preferred font weights (separated by semi-colon) like so ⬇️
(for example you want Fraunces in 400 and 600, and Monsterrat in 300 and 700)
What are you most proud of, and what would you do differently next time?
coding the blog preview card in mobile first
What specific areas of your project would you like help with?
There is an unwanted marge between the .illustration image and the .card-container that I could not manage to understand where it comes from and how to get rid of it.
Note that I have used CSS reset (normalize.css).
According to the design, there should only be 24px between both elements, but right now there are 24px (margin set-up on class .content) + an additional 10px (unsure where they come from).
Hi there! Congratulations on completing the challenge 🎉
Unfortunately, the size of the background image during the desktop view does not fit the viewport, you may want to add a background-size property in order to fix this.
Hey Kaustubhya, good job on completing the challenge 🎉
For your future projects, it would be good practice to incorporate semantic HTML such as the header, main, and footer elements to your solution to improve its accessibility ☺️ I found this read/resource to be helpful in learning more about this topic!
Lastly, don't forget to add a title to your solution! ☺️
Hey there, good job on completing the challenge! 🎉 For your future projects, it would be good to incorporate semantic HTML in your code such as using the header, main, and footer elements.
What are you most proud of, and what would you do differently next time?
First of all I'm proud that I simply did it!
This, since is my first challenge, motivated me to keep going at my bootcamp and showed me that I am really learning what I'm studying.
I'm also glad that now I'm understanding how this challenge community works.
What challenges did you encounter, and how did you overcome them?
The first challenge was to understand what Frontend Mentor Challenge wanted from me, and that was overcome by the readme files that comes in the download package and also with the resources at the Discord server.
The second challenge was to write down the codes itself, this was my first "big" blank file that I had to structure and style, but I overcame that remembering everything that I had learn at Colt's Bootcamp and also by using my study notes.
Flex, it looks like that this will be a challenge for a while.
Definitely, the hardest challenge was SVG. At first I thought SVG would be easy peasy, but that required a lot of googling and help from study friends. And I still not sure if I did it correctly.
What specific areas of your project would you like help with?
A feedback on the general structure of the file would be highly appreciated.
At the body I used an encoded version of the svg as a background (Encoded at Meyerweb) (Is it ok to work this way?)
I also tried to use a encoded svg for the top image of a person dancing, but it didn't work, maybe because it was too long. So I googled for that svg url on a third-party website and used that as an external url:
At the music note svg I could work with the inline without problems, but I feel that if I had to scale it I would have problems. That's why I didn't use inline svg for that "person dancing" image, because I couldn't scale it when it was styled inline with .
Annual Plan
$59.99/year
Change
A feedback on the flex structure would help a lot. I feel that I may have added some extra codes that I wouldn't need to.
Hey Guilherme, good job on completing the challenge 🎉
I have a couple of suggestions for you for your next project—
When we finally deploy our projects online, one other thing that we want it to be is SEO-friendly; to achieve this, it would be helpful to store your CSS styles in another file instead so that your HTML file is easier to read for search engines
As for the alignment of your card, I see that it can be 'more' vertically centered, you can do this by adding min-height: 100vh to your flex container/flex parent element (this sets the flex container's minimum height into 100% of the viewport)
For your future projects, I also recommend you implement a mobile-first approach when setting your CSS rules (mobile designs tend to be simpler compared to desktop designs which makes it easier to start here); I see in your README file that you are familiar with Kevin Powell so I suggest this helpful read from him about the use of mobile-first approach!
(I am not very well-versed with SVGs so I do not have any feedback about it)
One tip, I see in your code that you used a media query to style the mobile view, but since you are already following the mobile-first approach per your readme file, you can put these styles outside the media query (so that you'll have them as your default styles) and then you can just override some of these style rules with the media queries for larger viewports.
What are you most proud of, and what would you do differently next time?
I am not proud of anything as I feel like I still have a long way to learn web development.
Next time, I will try to use another web development language to complete this web.
What challenges did you encounter, and how did you overcome them?
It was my first time using a CSS grid. I was confused as I was uncertain of a few things about using grids. I had to read on W3school how to properly use grid.
What specific areas of your project would you like help with?Areas for Feedback
I would greatly appreciate feedback on my project, particularly in the following areas:
CSS Grid Usage: This was my first time using CSS Grid, and I'm unsure if I've implemented it correctly. I'd like someone to review my grid layout and point out any errors or areas for improvement.
Responsiveness: While I've tried to make my project responsive, I'm not entirely confident that it displays optimally on all screen sizes. I would appreciate feedback on how I can improve the responsiveness of my design, especially for smaller screens.
Code Structure and Organization: I want to ensure that my HTML and CSS code is well-organized and follows best practices. If there are any areas where I could improve the structure or organization of my code, I'd like to know.
Accessibility: Accessibility is essential, and I want to make sure my project is accessible to all users. If there are any accessibility issues in my code or design, I would appreciate feedback on how to address them.
Any guidance or suggestions on these specific areas would be incredibly helpful for me to complete this challenge successfully. Thank you in advance for your assistance!
May I ask why you added a value for your margin in your universal selector? Also, to vertically center your card, you can try adding a height of 100vh to your body selector ☺️
What are you most proud of, and what would you do differently next time?
I'm most proud of completing the project in a shorter time than expected. However, reflecting on it, I am not sure about how I used the grid property and img.
What challenges did you encounter, and how did you overcome them?
Throughout the process, I encountered challenges such as aligning images and text for the author element, which I resolved by declaring "display: inline-block". Additionally, I initially struggled with grid due missing properties, which I quickly corrected.
What specific areas of your project would you like help with?
Moving forward, for the next iteration of my project, I would appreciate assistance in resolving different font-size in mobile view without using media queries, as suggested during the challenge
Hi there, good job finishing the challenge! Just a few suggestions to improve your code —
instead of assigning a specific width for the body (#hero1), you may instead just use 100% (if needed, you may also just not set a width value), that way there wouldn't be a horizontal scrollbar when the viewport is smaller;
i'm not totally sure why there was a specified height for #hero2, but if you remove that, that should help fix the height problem of the container;
make sure to add your font style to your css file
also just like what was mentioned in the other replies, you have the wrong path for your img
