The section with 3 by 4 images kicked my butt. Because of the size of the image, it was a bit challenging. The image looked really bad if the width of the container with the image was greater than 300 pixels. Any ways, overall, how does it look? Any input will be greatly appreciated. Thank you very much.
Hi @shinhosuck,
Overall, you did a great job! The website looks great. However, I have a few suggestions for you.
You should use anchor tags <a> instead of div where a user expects to click.
Example before:
<div class="hero-contents">
<div class="hero-content">
<h3 class="hero-content-title">Hydrogen VS Electric Cars</h3>
<p class="hero-content-paragraph">Will hydrogen-fueled cars ever catch up to EVs?</p>
</div>
Example after:
<a href="#" class="hero-contents">
<div class="hero-content">
<h3 class="hero-content-title">Hydrogen VS Electric Cars</h3>
<p class="hero-content-paragraph">Will hydrogen-fueled cars ever catch up to EVs?</p>
</a>
Overall, this is a very well-done solution to the challenge. Great job!
Hope my suggestions were Helpful! 👍
Keep up the good work! 😊❤️
This was very fun to do. My only struggle was trying to make it a single-page application, which can be quite hard to do with vanilla JavaScript. I am currently learning React, so I will definitely redo it and use React router for the routing. I could have chosen the easy way (using static pages) but I decided to give myself a challenge.
Hi Somadina Amuchie,
Overall, I'm really impressed with your work! The website looks great. However, I did find a few bugs that I thought I'd mention:
Overall, I think the site is very close to completion. Fixing the above-mentioned bugs would put your JavaScript skills to the challenge, but I'm confident that you can do it! 👍
Nicely done. I tested on my mobile and found some performance issues. Other than that, it's nice 👍
I'm confident about the code is doing what it's supposed to but is it obvious what this code is supposed to be doing? Do the names make sense? Any advice is appreciated.
Hi! Congratulations on completing the challenge! I have reviewed your code and overall it looks good, but I noticed a few areas that could be improved. Here are my suggestions:
In your CSS file, you are using position: absolute and z-index: -1 to position the background image behind the text. This is not the best approach as it can cause issues with the layout of your page, especially on smaller screens. Instead, consider using a background property like background-image or background-color to achieve the same effect.
In some places, you have used an asterisk * selector to apply default styles to all elements. While this can be useful in some cases, it is generally better to be more specific with your selectors. For example, instead of using * { margin: 0; padding: 0; box-sizing: border-box; }, you could use html, body { margin: 0; padding: 0; box-sizing: border-box; } to apply these styles only to the html and body elements.
Finally, I noticed that some of your class names are not very descriptive, like btn-primary and btn-secondary. It's always a good practice to use descriptive class names that clearly indicate the purpose of the element they are applied to. This can make your code easier to understand and maintain in the long run.
I hope these suggestions are helpful to you as you continue to develop your skills. Keep up the good work!
Hi Ana Gonçalves 👋 Great job on completing this challenge! 🥳 Your layout looks great.
Here are a few suggestions to further improve your code:
Consider using more specific CSS selectors to avoid potential conflicts with other elements on the page. For example, instead of .card__leftSide .card__image, you could use .card__image--left and .card__image--right, or simply .card__image--left and .card__image--right.
Consider using CSS variables to define and manage colors, fonts, and other common styles. This will help ensure consistency across your site and make it easier to make changes later on
Make sure to follow consistent naming conventions for your classes and IDs. For example, in your main element you have a .card class, but outside of main you also have a .card class. This could lead to confusion or unexpected behavior in your CSS. Consider using more descriptive names like .product-card or .pricing-card instead.
Hope I'm Helpful! 👍
Keep up the good work and happy coding!! 😊❤️
Any feedback/thoughts are greatly appreciated!
Hi tizerk👋 Great job on completing this challenge! 🥳
I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.
.card-container class has a fixed width of 92% and a fixed height of 88%. This could cause issues with responsiveness on different screen sizes. Instead, it could be improved by using a more flexible layout such as using max-width and max-height with a percentage value, or using CSS Grid or Flexbox layout. .card-container {
max-width: 80%;
max-height: 80%;
margin: 0 auto;
border-radius: 10px;
}
.cart-btn class has a fixed padding value of 0.875rem for both the top and bottom. This could cause issues with responsiveness on different screen sizes. Instead, it could be improved by using a more flexible layout such as using padding with a percentage value. .cart-btn {
padding: 1% 0%;
}
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! 👍
Keep up the good work! 😊❤️
Hello guys; any advice/feedback is welcome. Thank you so much!!
Hi John Robert Maizo👋 Great job on completing this challenge! 🥳
I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.
Use of sr_only class: The sr_only class is used on the main heading, but it is not defined in the CSS. It is likely intended to be used as a class for hiding content from screen readers, but without any styles defined, it serves no purpose. It's better to use aria-hidden attribute on the element instead of a class.
Use of nth-child selectors: The use of nth-child selectors in the CSS makes it difficult to maintain and update the styles if the structure of the HTML changes. It's better to use more specific selectors, such as classes, or to use CSS Grid or Flexbox layout to achieve the desired layout.
Use of min() function: The min() function is not widely supported by browsers. It's better to use @supports feature query or a feature detection library like Modernizr to check browser support before using it.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm 👍helpful!
Keep up the good work!😊❤️
Hi sommzy👋 Great job on completing this challenge! 🥳
I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.
The CSS has a lot of repeated styles, it would be more efficient to group similar styles together and use class or id selectors.
The CSS has inconsistent use of units (px, %, vh) and it would be good to use a consistent unit throughout the styles.
In the footer styles, the height property is set to 500px, but it would be better to use min-height so that the footer can adapt to different screen sizes.
There's no CSS reset or normalize stylesheet, it's good to have one to ensure consistent styling across different browsers.
The CSS selectors could be more specific and semantic, like using .header__nav instead of header and .footer__copyright instead of footer to avoid conflicts with other styles.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! 👍
Keep up the good work! 😊❤️
I'm struggling in building responsive designs please give me some resources for it , so I can learn.
Hi Adarsh👋 Great job on completing this challenge! 🥳
It would be beneficial for you to learn more about media queries and how they can be used to create responsive designs. Resources such as the CSS Tricks guide on media queries and the Mozilla Developer Network's guide on responsive design would be helpful.
You should also consider using CSS Grid and Flexbox, which are powerful tools for creating responsive layouts.
Learn more for free here:
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! 👍
Keep up the good work! 😊❤️
While working on this project I found that there is small space below the product image in desktop mode. I tried removing it but couldn't do it. Please guide me how I can remove that space or use my image to cover all the section of its container.
Hi Manish Kumar👋 Great job on completing this challenge! 🥳
You can also try to set the image as a background-image of the container and set the background-size to cover
#container {
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
It will make the image to fill the entire container. Please note that the solution may vary depending on the specific HTML and CSS of your project.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! 👍
Keep up the good work! 😊❤️
Hi Emmanuel Gonçalves👋 Great job on completing this challenge! 🥳
I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.
In your CSS, try to group your selectors and styles by functionality or layout instead of having them scattered around your CSS file. This will make your code more organized and easy to maintain.
Try to use CSS variables for values that are used multiple times throughout your stylesheet. This will make it easier to update and maintain your code. For example, instead of defining the same color multiple times in your CSS use a variable and use that variable wherever you need that color.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm 👉Helpful!
Keep up the good work! 😊❤️
Are there ways to improve/simply my HTML and/or CSS code?
Hi Chyna Davis👋 Great job on completing this challenge! 🥳
I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.
In the CSS file, there are a lot of duplicated or unused styles that could be removed to make the code more concise and efficient. For example, instead of having multiple selectors like .grid-item, .grid-item-1, .grid-item-2, etc, you could use a single selector .grid-item and use CSS to target specific items using their index or id.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! 👍
Keep up the good work! 😊❤️
