@huaxel
1 Info is Power & should be free 2 Access to computers—and anything which might teach you something about the way the world works—should be unlimited 3 Corps & Gov cannot be trusted to guarantee your privacy or to benefit ordinary people. Understand Computers & Networks or be enslaved by them
Latest solutions
3-column preview card component
Submitted 9 months agoResponsive design, I'm going to do a deep dive and learn as much as I can. Always open to suggesting.
Preview Card Componet
Submitted 9 months agoWant to learn best practices to mobile first and responsive design.
Latest comments
- @nemoanderson
I learned a few things from your project and would like to incorporate it into my next project or even update my blog preview card project. Keep up the good work and I'm sure you will master your craft.
The only thing I can add at my level of skill is you could shorten your H1 hover focus and active is with :is.
and example .add-to-cart-btn:is(:hover, :focus) { background-color: hsl(158, 36%, 20%); }
Check it out I hope this is helpful.
Marked as helpful - @Mhista-FortuneWhat challenges did you encounter, and how did you overcome them?
Initially, I was having issues with the desktop view; especially using flex to display both the container container the text and the button. In the end, I was able to figure out a way.
@nemoandersonhey buddy,
great job on your project. Let's make alt tags on pictures required on all or projects. If you don't want to come up with alt tags on your own, let the AI do it for you.
Semantic HTML is something you should get in the habit of using also. It's a small project but just think of this as an element of your wide webpage you are working on.
Using heading for styling is a no no. When working with headings don't skip the order. For the product category just use a paragraph tag and style it how you like.
With the picture element you don't need to hide the photos, use the media attribute to set the picture for the desktop.
Try to avoid using pixels for fonts, let's keep responsive design in mind.
I hope you keep these in mind when developing in the future or if you already are, improve this project.
Keep it up, you are on the right track.
- @moxymorangaWhat are you most proud of, and what would you do differently next time?
I am proud of the time spent, I think that coming back to styling would take me longer to finish the challenge. I am also proud of solutions found, how to properly set the styling and the html structure.
What challenges did you encounter, and how did you overcome them?The proper html hierarchy was a challenge. From the first output to the final result, I had to add some sections to ensure that everything was working properly.
Another challenge was the styling for the bullet points and list.
What specific areas of your project would you like help with?Ensuring that the website is optmized for different screen sizes.
@nemoandersonHey buddy,
Looks like your first project. Congrats on the start on your journey. It's best practice to put your CSS in a separate file. When the code grows, it's hard to find things. I know this is short but always work as it's not. It was a lot just finding your HTML.
Try using Use Semantic HTML, and add fall back Fonts. The @font-face declarations do not include fallback fonts in case the custom fonts fail to load.
Hope that helps, good luck.
- P@edwardcjianken1@nemoanderson
I cannot see your live site for it does not exist at this time. I put your studied your code and it looks good so far. Just to make sure my mental visuals were right, I added your code into a CodePen.
Since you are local hosting fonts, you don't need the links in your codes head of your HTML. Check your web dev tools, you will see errors because of it.
Your code looks very good, keep up the good work
- @husniddinjabborov-web@nemoanderson
Hey buddy,
The colors and fonts are provided by the style guide. It helps to create ":root" element with variable for code you repeat like colors so it's easier to change it one time instead of finding all the colors and changing them. Get in the habit now because when there is more code, it will get frustrating.
When it comes to fonts, local host them to optimize. When downloading fonts, it's best to convert them to WOFF2 format. Keep it up, you on the right track.
- @PeterMaingi-devWhat are you most proud of, and what would you do differently next time?
I'm proud I completed my first project on time without looking for any external solutions, and next time I will try to accomplish my project in a set time limit to boost my productivity.
What challenges did you encounter, and how did you overcome them?So far none
What specific areas of your project would you like help with?Layout and alignment
@nemoandersonHey buddy, I cannot see your code but you need display flex in your life. Once you get the hang of display flex and grid, you are better than 99% of developers.
display: flex; justify-content: center; align-items: center;
Adding color in background is a easy as background-color and the color they provide.
Alignment is the next thing to make your better than 99% of developers.
Keep on keeping it, the hardest part is the start.
