What specific areas of your project would you like help with?
I really dislike how I did the Nutrition part. Ideally it's simple 2 column grid with lines in between, but it was difficult to achieve it. I though it has to be ul (since this is a list), but it doesn't play well with grid. Also it was difficult to align items to beginning of cells and add borders.
Hi @ddosia, your code and solution looks good but it has some few issues. Don't worry though as these issues are very easy to fix and are quite common aswell.
My Tips and Feedback
Put the challenges in their own Github repositories instead of putting all of the in one Github repo. It will take longer to clone and and it might take longer aswell to commit and push in the long run.
Consider self-hosting your fonts instead of linking to Google Fonts. Using Google Fonts is bad for performance and violates GDPR laws which is an issue on larger websites as it may lead to lawsuits. I use this handy tool for helping me self-host the fonts.
Remove the "mY" prefix on the colors. I don't see the need for it and it just makes things more verbose.
You can use global styles instead of setting a utility for each element since this project is mostly text-based. Like using @apply for the styling the headings and the paragraphs.
Use a table for the Nutrition section. See more about it here
Wrap the article tag inside a main tag. The main tag signifies the primary content.
Use the hr tag for the borders on the end of each section.
No need for the min-w-80 on the article tag. I don't see why you would need margins there and instead you should use padding on the parent element instead
What are you most proud of, and what would you do differently next time?
Next time, I'll add a loader while fetching the data. :)
What specific areas of your project would you like help with?
I'd like to ensure that all country flag images display at the same size in both the country list and details view. Some flags have different aspect ratios, and I don't want to set a specific size, as that might crop parts of the flags.
Try CSS subgrid for this. I've tried setting aspect-ratios on the flag images aswell but some of there either are distorted or cropped. Setting height / min-height does the same aswell.
What are you most proud of, and what would you do differently next time?
This project was created using CUBE CSS methodology. I tried to separate CSS styles into Composition, Utilities, and Exceptions folders. Also, I worked on making it more accessible.
What challenges did you encounter, and how did you overcome them?
1.) When menu sidebar appears for mobile devices, I would like to know how the Menu Close icon, in the upper right corner, gets focus first. Also I would like to get some tips on how to improve accessibility even more.
2.) Should I give role attributes to every div and span? Also, do the nav and ul tags also need role attributes?
No, you rarely only need to use the role="" attribute. Navs and uls are already semantic but I've heard about of using role="list" on ul and ol because Safari do some wild stuff. Divs and spans are only there for presentation but there are some cases where you would need to use a role attribute for it like a tablist. Check this and this
Hi @Dpal88, your solution and code looks good but it has some few issues. Don't worry though as these issues are very easy to fix and is a common mistake when learning. "Mistakes are a part of learning".
My Tips and Feedback
Consider self-hosting your fonts instead of using Google Fonts. Google Fonts violates privacy laws such as GDPR which can be a problem on larger sites due to lawsuits and it it also slower. I use this handy resource for helping me self host my fonts.
Use the ::marker pseudo-class to change the list styling instead of using ::before.
Use proper semantic HTML. Replace the .container div with a <main> tag instead. The <main> tag signifies the main content of a site and each site should have atleast 1 main tag. There is no need for the <header> or <section> tags as there are already headings. Replace all of the <h3> tags with an <h2> tag, self explanatory since the headings are the same. Also, the .attribution div should be a <footer> tag instead. Use the <strong> tag instead of a span for the bold text.
Use a CSS reset. What a CSS reset does is that it makes your styles look more consistent across devices and browsers since it removes all of the browser default styling. I recommend Andy Bell's or Josh Comeau's CSS reset for this. For this type of project where there are alot of text, use Andy Bell's CSS reset instead. You should also use a CSS reset for all of your projects. You don't have to do anything special since you only need to copy and paste the CSS reset inside your code.
No need for counter-increment for this.
That's pretty much all and refactor your code after this and I will continue with feedback.
What are you most proud of, and what would you do differently next time?
I am most proud of being able to use my custom css library. This will very significantly quicken styling process and reduce setup.
What challenges did you encounter, and how did you overcome them?
I encountered issues with css specificity, speficially with my padding classes which were generated automatically.
Learning
p-xs-100 is responsible for mobile screen size padding on all sides, while pt-xs-50 and pb-xs-50 added padding on top and bottom respectively. The latter two didn't override paddings set by p-xs-100 class, which was generated after the two.
I addressed the issue by creating two scss loops:
First generates universal margins and paddings
Second generates margins and paddings on one side at a time
What specific areas of your project would you like help with?
I am not particularily happy with my typography, and there are definitely more techniques and tips I could use to improve upon scss.
What are you most proud of, and what would you do differently next time?
I learned a lot about setting up a project from scratch in one environment and connecting it to a git repo. I gained some solid understanding on how to correctly set up git, conflict resolution, and more about the package.json file and how those dependencies affect my project. It was also a good challenge setting up SASS/browsersync and learning more about how those tools interact.
What challenges did you encounter, and how did you overcome them?
Had a bit of a challenge getting SASS set up to compile my styles, ended up being node version conflicts. Also ran into a small hurdle getting my git repo connected to a secondary device, after setting it all up on a different device.
What specific areas of your project would you like help with?
Responsiveness? I didn't really see much of a difference between the desktop and the mobile design files, although I may be mistaken here...
Hi @samlucchese, your code and solution looks good but sadly it has some few issues. Don't worry though as those issues are very easy to fix and are done by everyone learning (including me).
My Tips and Feedback
Use a code formatter such as Prettier to make your code more readable. Those indentations in your .scss file is nasty.
Don't use Sass if you aren't even using the features of it. Nesting is already supported by most browsers and it seems like that is the only reason why you are using Sass.
Never ever set typography-related properties in px!See why
Use a CSS reset! What a CSS reset does is that it makes your styles more consistent across devices and you won't have to fight against browser defaults. I reccomend using Andy Bell's or Josh Comeau's CSS reset. I use the second one if you'd ask me.
Don't declare useless properties like width: 100%. width: 100% can be useful sometimes but there is no need to set it in the body since it is a block-level element which means it will take up the maximum space possible.
Use min-height: 100vh instead of height: 100vh. Using height will make it unresponsive and the content will be cut off at smaller screen sizes. Using min-height gives it more room to grow and the content wouldn't be cut off unlike height.
Use the <img /> instead of using a div with a background-image. It may look like the same but it is inaccesible since you don't have alt text for it. Screen readers won't see an image aswell.
Keep CSS specificity as low as possible. Nesting increases it and it makes your CSS harder to read and harder to override later on. You can mitigate this by using a methodology such as BEM.
Update your code and I will continue the feedback.
What are you most proud of, and what would you do differently next time?
I am proud of how I managed the layout just using CSS flex-box
What challenges did you encounter, and how did you overcome them?
The most difficult challenge in my opinion is where I have to organize the layout on the laptop's width. fortunately, I can solve the challenge by dividing the elements
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
Hello everyone!
I’ve just completed the Blog Preview Card challenge using the CWrap framework, which I’ve been working on for some time. CWrap is a microframework designed for web developers and those learning web development. It offers features like:
👶 Low entry level – Perfect for beginners
✨ Automatic CSS generation – Less time spent on styling
🔍 Autocompletion – Code faster and more efficiently
👀 Preview-based manipulation – Real-time feedback as you build
This challenge was a great opportunity to showcase CWrap’s capabilities. Check out my solution and let me know what you think!
Isn't CWrap just dragging content like Wordpress or other no-code tools? I think its still faster to code it yourself instead of clicking and selecting the property in CWrap. Could see more potential to it though
What are you most proud of, and what would you do differently next time?
I'm proud of the responsive design and smooth hover effects using Flexbox. Next time, I'll focus on improving accessibility and adding more refined media queries.
What challenges did you encounter, and how did you overcome them?
One challenge was centering the content perfectly, which I solved using Flexbox. Another was ensuring responsiveness, addressed by testing and adjusting the layout for different screen sizes.
What specific areas of your project would you like help with?
I'd appreciate feedback on improving accessibility, particularly for screen readers, and suggestions for optimizing the responsive design across various screen sizes. Additionally, any tips on enhancing the hover effect interactions would be helpful.
don't use the global selector for everything. see why
replace the .container div with a main tag instead. more info can be found here
never ever set font-sizes and typography-related properties in px. see why
wrap the social-links inside a list item. put all of the list items in a list. pretty self-explanatory to see why you would use lists for this. applies to other stuff too but quite a common pattern indeed.
the image should have better alt text. profile picture describes nothing and you can use "Close-up image of [name]". sometimes you dont need to set an alt text to it as it is just purely decorative
consider self hosting your fonts for better performance. using google fonts is slower and worse for privacy as it violates gdpr laws. it may not be an issue for this site but on larger, enterprise websites you can get sued for that.
avoid descendant selectors if possible as it increases the specificity which makes your css harder to override in the long run. for exampl .social-links .btn:hover is an example of descendant selectors
take a look at the bem methodology
use min-height on the body instead of height. try using it on smaller devices and you can see that the content gets cut off and you are unable to scroll
the .container div in your css does nothing at all. it is already being centered by the body. i don't see why you would need to use flex properties here. remove the flex properties and merge the styles with your .profile-card element. this doesn't need a media query at all. you can just use padding instead of centering the element in .container
Hi @EllyMarc, your code and solution looks good but it has some few problems. Don't worry as these issues are really quick and easy to fix. Don't be demotivated by this since most people have done the same issues you did (including me!)
My Tips and Feedback
Consider self hosting your fonts instead of importing it from Google Fonts. Using Google Fonts is slower and it also violates GDPR laws which is bad for privacy. This isn't really an issue for sites like this but lawsuits could happen on larger, bigger enterprise websites. I use this handy tool to help me self host my own fonts.
Use a CSS reset. What it does is that it basically makes your CSS more consistent across browsers. You don't have to do anything since you just have to copy and paste it inside your CSS and you are done. I reccomend using Josh Comeau's or Andy Bell's CSS reset as that is what most people use. If you ask me what CSS reset do I use, I prefer using Josh's one.
Never ever set typography-related properties in px. Line-height, font-size, letter-spacing and the like. See why
No need to set useless CSS properties Using width: 100% is useless since the body element is already a block level element which takes up all of the space possible.
Use the rem unit in place of px. You would typically use the px unit for smaller stuff such as borders, outlines, shadows and the like. Use the rem unit for the rest. Using px doesn't scale with the user's set font-size inside the browser's setting nor zooming in.
Never ever set fixed-widths! Using width: 620px on the main element makes it not responsive. Widths don't shrink nor grow unless you use a fluid units like vw, vh or %. What you need is max-width: 38.75rem paired with width: 100% as it is centered by flex in the body and will only take up the space it needs in this case. 1 rem = 16px btw. You should use the fr unit on grid also instead of px units.
Don't overuse nesting in CSS! It makes your code harder to read and it also increases the specificity which makes the styles harder to override. You can mitigate this by using a naming convention such as BEM. The only thing with BEM is that you will need to apply a class to every element which is often verbose. You would only use nesting for media queries and pseudo-classes & pseudo-elements such as :hover, :focus, ::after and etc. You can learn more about nesting here. It's about Sass but it still applies to native CSS.
Colocate media queries in the selector itself. For example:
instead of this
.element {
background: red;
}
@media (min-width: 400px) {
.element {
background: blue
}
}
do this
.element {
background:red
@media (min-width: 400px) {
background: blue
}
}
Code it mobile-first instead of desktop-first. Self-explanatory. When you code your website, start on mobile first instead of desktop. So that means you will be using min-width inside your media queries. The reason why you should go mobile-first is because there are typically less styles to override on the media queries leading to less CSS. There are some exceptions for this though such as hamburger menus.
That is all. Don't be ashamed by this since most people have done the same mistakes as you did before. Don't be overwhelmed also and treat this as like a checkbox and do them 1 by 1. Do all of the things I said and update your CSS before moving on to the next challenge. Have a nice day and have fun coding!
What are you most proud of, and what would you do differently next time?
What I am most proud of is that? it was easy for me to put the basic when it comes to the HTML. Not only that, but I also found myself that it's easy for me to get used to using Tailwind CSS.
Things that I may would do differently next time is that instead of using hardcode html, maybe I'll use. something like Astro build framework. Maybe adding some Java script. and a dark theme.
What challenges did you encounter, and how did you overcome them?
The only challenge that I'm not going to lie that I had to use some. documentation about it was the shadow box.
What specific areas of your project would you like help with?
Well, if there is anything that can be improved from my work, I would love to hear it and I would love to have some criticism about this.
Hi @drxdesign, your code and solution looks good but it has some few minor issues. Don't worry! Most of these issues are really easy to fix and are often done at this level. I used to do the same mistakes aswell in the past.
My Tips and Suggestions
Use TailwindCSS via their NPM package. Using their CDN lacks their other features such as their arbitrary values. Therefore, you can remove the x </button>. For sighted people, it works fine. For unsighted people, they don't understand the meaning of x.
Replace the first div with a main tag. Tag is self explanatory. Main content. A site should have atleast 1 main tag
Consider self-hosting your fonts instead of using Google Fonts. Using Google Fonts is slower and also violates GDPR which is bad for privacy. You shouldn't really worry about this for now but in larger enterprise websites, you could get sued for that.
That is all. Don't feel demotivated by this as it is part of our learning. You can treat this as a checkbox and do them one by one. Have a nice day and have fun coding!
