Looking to hire developers?
@CodePapa360
@shinhosuck
Submitted
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.
@CodePapa360
Posted
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! πβ€οΈ
@gHoSTeCHs
Submitted
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.
@CodePapa360
Posted
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! π
@phojojo
Submitted
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.
@CodePapa360
Posted
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!
Marked as helpful
@anacatarinafg
Submitted
@CodePapa360
Posted
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!! πβ€οΈ
@tizerk
Submitted
Any feedback/thoughts are greatly appreciated!
@CodePapa360
Posted
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! πβ€οΈ
@johnmaizo
Submitted
Hello guys; any advice/feedback is welcome. Thank you so much!!
@CodePapa360
Posted
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!πβ€οΈ
Marked as helpful
@sommzy
Submitted
@CodePapa360
Posted
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! πβ€οΈ
@adarsh-gupta-2002
Submitted
I'm struggling in building responsive designs please give me some resources for it , so I can learn.
@CodePapa360
Posted
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! πβ€οΈ
Marked as helpful
@kumarmash
Submitted
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.
@CodePapa360
Posted
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! πβ€οΈ
Marked as helpful
@EmmanuelGoncalves2020
Submitted
@CodePapa360
Posted
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! πβ€οΈ
@cmdavis21
Submitted
Are there ways to improve/simply my HTML and/or CSS code?
@CodePapa360
Posted
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! πβ€οΈ
@amoorihesham
Submitted
Please Rate It..
@CodePapa360
Posted
Hi Amr_Heshamπ Great job on completing this challenge! π₯³
You could improve the accessibility of the website by adding proper alt attributes to images, using semantic HTML tags, and providing proper focus management using tabindex and :focus pseudo-class. This will ensure that users with assistive technology are able to navigate the website properly.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
@riccardosmile
Submitted
@CodePapa360
Posted
Hi @riccardosmileπ 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.
webkit and moz for certain CSS properties. This can add extra lines of code and make the CSS more difficult to maintain. Instead, consider using a tool such as Autoprefixer to automatically add vendor prefixes to CSS properties as needed.-webkit-transition: background-color 0.4s ease-in-out;
-moz-transition: background-color 0.4s ease-in-out;
transition: background-color 0.4s ease-in-out;
info and text it could be more specific to what they represent like price-info or description-text which can make the code more readable and easier to understand..info{
display: flex;
justify-content: space-between;
margin-top: 1.2rem;
}
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
@riccardosmile
Submitted
@CodePapa360
Posted
Hi @riccardosmileπ 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.
One area that could be improved is the usage of CSS classes. Instead of applying styles directly to HTML elements, it is recommended to use CSS classes and apply the styles to those classes.
Consistently formatting the code makes it more readable and easier to maintain. Use a linter and a code formatter to help you keep the code consistent.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
@EuniceSp
Submitted
Feedback welcome
@CodePapa360
Posted
Hi Eunice SepΓΊlvedaπ 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.
It would be beneficial to use CSS class naming conventions such as BEM (Block-Element-Modifier) for improved readability and understanding of the HTML and CSS code. For example, .card-orange class can be .card__orange, .learn-aqua class can be .learn__aqua.
Consider using CSS variables to make it easier to update the styling of the page.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@riccardosmile
Submitted
@CodePapa360
Posted
Hi there!π 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 more consistent and semantic class names: Having consistent and semantic class names, that describe their purpose makes the code easier to understand and maintain. It would be helpful to use common prefixes or suffixes for classes that relate to specific elements, like .card__image, .card__plan, .card__text, etc.
Add alt attributes to images: Images should have an "alt" attribute that describes their contents. This will make the site more accessible and will also be useful in case the image doesn't load.
<img src="illustration-hero.svg" alt="illustrative hero for the card" class="image">
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@MitiaElodie
Submitted
@CodePapa360
Posted
Hi Elodieπ Great job on completing this challenge! π₯³
Overall, it seems to be well-structured and easy to understand. However, there are a few areas that could be improved:
background-color: $light-grayish-magenta;
color: $very-dark-magenta;
border-radius: 10px;
margin-bottom: 15px;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
You could make use of a class for each rating container to improve the maintainability of the code.
The SVG files for the star icons are being repeated multiple times within the HTML file. It would be more efficient to use a single file and reuse it multiple times with CSS.
There's some classname which is not self-explanatory, you could make use of more informative classname to improve the readability of the code. such as social-proof__rating-container could be something like social-proof__review-details as it holds the rating details.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@HelloImAron
Submitted
@CodePapa360
Posted
Hi HelloImAronπ Great job on completing this challenge! π₯³
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@welderessutti
Submitted
Hello everyone!
I'm studying HTML and CSS for 2 months and it would be a pleasure to receive feedback on my first challenge here.
I have very difficulty aligning boxes into the container. I still donΒ΄t know which type of alignment boxes is better, using box-sizing border-box, display flex, or position relative/absolute. But in this case, I didn't use any of those.
I hope this is ok. I appreciate your attention.
@CodePapa360
Posted
Hi Welder Ressuttiπ 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.
.attribution class for the text at the bottom of the page. It would be better to use semantic HTML elements like footer instead of a class to describe the text. Also the # in the <a> tag in the .attribution class should be replaced by a proper URL<footer>
<p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://welderressutti.com">Welder Ressutti</a>.</p>
</footer>
.css file and link it on the HTML using the link tag. This would allow for better organization and make it easier to maintain the code.Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@MilosDikic
Submitted
@CodePapa360
Posted
Hi MiloΕ‘ DikiΔπ Great job on completing this challenge! π₯³
.text h2 selector and the .text p selector to format the heading and the paragraph, you could add a class to the heading and paragraph elements in the HTML, and then use that class as a selector in the CSS. This would make the code more readable and maintainable.html
<div class="text">
<h2 class="card-heading">Improve your front-end skills by building projects</h2>
<p class="card-paragraph">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
.card-heading{
margin-bottom: 20px;
color: hsl(218, 44%, 22%);
font-weight: 700;
}
.card-paragraph{
color: hsl(220, 15%, 55%);
margin-bottom: 20px;
font-weight: 400;
}
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@EdilsonRicardo
Submitted
I had a problem putting the cart icon inside the button.
@CodePapa360
Posted
Hi Edilson dos Santos Ricardoπ 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.
One suggestion for improvement would be to use CSS classes and ID's more effectively to target specific elements on the page, instead of using tag selectors everywhere. For example, instead of using main h1, use .product-title . This can make the CSS more maintainable and easier to understand.
Using width and height properties on elements to control layout is not a responsive design best practice, it's better to use max-width and max-height properties. Using max-width and max-height allow elements to be flexible and adapt to different screen sizes and orientations.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@barshay
Submitted
How can I improve my writing and what are the recommended next steps?
@CodePapa360
Posted
Hi Shay Barneaπ 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.
@import rule to import a font from Google Fonts, consider using the link element in the head of the HTML file. This will reduce the number of HTTP requests made by the browser and improve performance.<link href='https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap' rel='stylesheet'>
.card:first-child and .card:last-child selector, consider using the :first-of-type and :last-of-type pseudo-classes. This will ensure that only the first and last card elements are selected, regardless of whether or not they are the first and last child elements of the container..card:first-of-type {
border-radius: 10px 10px 0px 0px;
}
.card:last-of-type {
border-radius: 0px 0px 10px 10px;
}
@media(min-width: 930px) {
.card:first-of-type {
border-radius: 10px 0px 0px 10px;
}
.card:last-of-type {
border-radius: 0px 10px 10px 0px;
}
}
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ
Marked as helpful
@captainakaps1
Submitted
All Feedbacks are welcome. Thank you for taking a look.
@CodePapa360
Posted
Hi Bright Senyo Akakpoπ Great job on completing this challenge! π₯³
I would like to share a suggestion with you.
--body-font-family variable and use it in the font-family property: body {
font-family: var(--body-font-family);
}
This would allow you to easily update the font family for the entire page by changing the value of the --body-font-family variable in one place.
Overall, this is a very well done solution to the challenge. Great job!
Hope I'm Helpful! π
Keep up the good work! πβ€οΈ