I am proud of the way I used flexbox
What challenges did you encounter, and how did you overcome them?Had some trouble centering the white layout
What specific areas of your project would you like help with?I would like help centering the layout.
Hi @JF451
Excellent work creating this 3 column preview card! Your HTML is semantically correct after I tested it using The W3C Markup Validation Service 👏⭐👏
To help you to center the layout, I would encourage you to use height: 100vh; in the body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; // Add this in
}
With this implementation, the body stretches to fill the full height of the screen, which allows align-items: center and justify-content: center to position the content right in the middle of the screen. So overall, height: 100vh; creates enough vertical space for centering to work.
I hope this helps 🙏
Happy coding :) 🚀🚀🚀
Spacing bullets and text content in <li> elements. I'm currently also working through freeCodeCamps CSS course, and stumbled upon the solution there.
What specific areas of your project would you like help with?Was my choise for semantic HTML OK? I'm trying to work on my accesibility-skills.
Hi @klhaug
Your solution is an excellent depiction of the orginal recipe page! Nice work!⭐👏⭐
I just picked up one semantic issue when I tested your code using the The W3C Markup Validation Service:
Here is the error:
<div class="table-row">
<p>Fat</p>
<p>22g</p>
</div class="table-row"> <!-- Invalid closing tag -->
Basically in your closing </div> tag, you are using an attribute class="table-row", which is not allowed. You only need to use it in the opening <div> tag.
Therefore you can simply remove the class:
<div class="table-row">
<p>Fat</p>
<p>22g</p>
</div>
This was just one HTML syntax issue, otherwise, you really did nail this challenge! 🚀🚀🚀
Happy coding :)
Handle different cases when dealing with the calculator logic instead of just printing error.
What challenges did you encounter, and how did you overcome them?Handling the different cases in the calculator was a bit challenging and I encountered it by trying again and again
What specific areas of your project would you like help with?Any feedback will be highly appreciated!
Hi @moustafaessam
You did really well creating this calculator app using React and TypeScript! The mathematical operations work as expected and the styling is on point. 😁🙌👏🌟
I have just a few suggestions (Header.tsx):
Just a reminder, the convention for function names is to use camelCase for functions and methods. So, the recommended naming would be handleThemeNum (rather than HandleThemeNum).
I noticed there’s some repeated logic for determining the pointerEvents and buttonAvaliable prop for each button. It might be a good idea to simplify this to make the code a bit cleaner and easier to maintain.
Perhaps you can store the themes in an array and loop through them to generate the buttons. This will help eliminate the redundancy for the button rendering and styling.
// Array of theme numbers
const themeButtons = [1, 2, 3];
Next, instead of repeating the condition for each button, you could map over the array of theme numbers and create the buttons dynamically.
<StyledToggleNumbersContainer>
{themeButtons.map((num) => (
<p key={num}>{num}</p>
))}
</StyledToggleNumbersContainer>
<StyledButtonContainer>
{themeButtons.map((num) => (
<StyledButton
key={num}
onClick={handleThemeNum}
style={{
pointerEvents: themeNum === num ? "all" : "none",
}}
buttonAvaliable={themeNum === num ? "true" : "false"}
/>
))}
</StyledButtonContainer>
This is just something to keep in mind as this approach could reduce redundancy and make it easier to maintain if you need to add more themes in the future.
Otherwise, great work completing the calculator solution!
Happy coding :) 🚀🚀🚀
I'm proud of the fact that I managed to implement a page according to the design. Next time I would use BEM naming more to avoid styling plain html tags such as p, ul, li etc.
What challenges did you encounter, and how did you overcome them?It was difficult to make consistent paddings for different elements. Also hard to maintain readable and clear css file
What specific areas of your project would you like help with?How to maintain clean CSS file for the whole project
Hi @DeKapito
I have to say, this was very well done ⭐ The use of CSS variables for colors, fonts, and spacing helps ensure consistency across the entire project, making it easier to make updates later. This makes the code much cleaner and easier to maintain 👏
I think you've done a great job with the CSS! To take it to the next level, I would suggest exploring SCSS. It allows you to take advantage of features like variables, nesting, and mixins, which can make your styles even more flexible and maintainable.
Here is an example of using mixins. Simply, mixins allow you to create reusable blocks of code in SCSS. In the example below, the @mixin defines a box-shadow mixin that takes a parameter $shadow and applies it to the box-shadow property. @include is then used to apply the mixin wherever needed, passing the specific value for the shadow. This helps avoid repeating code and keeps it modular.
@mixin box-shadow($shadow) {
box-shadow: $shadow;
}
.recipe-picture img {
border-radius: 1rem;
@include box-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
You can learn more about SCSS here: SCSS
Otherwise, nice work completing this solution! 🚀🚀🚀
Happy coding :)
I am happy I was able to make the text of the webpage responsive without using media queries. It was an opportunity for me to learn something new.
What challenges did you encounter, and how did you overcome them?Make the svg image fit its container
I change the default display value from inline to block.
Make text responsive without media queries
I used the clamp() function.
What specific areas of your project would you like help with?I would like to know if apart from the clamp() function, there is another way to make the text of a webpage responsive without media queries.
Hi @MartheAudrey
Great work completing this blog preview card! You have done well capturing the layout ⭐👏⭐
To answer your question: You can make this card component responsive without using clamp() or media queries by utilizing Bootstrap's grid system and flexbox utilities. This is just something that you could consider exploring.
For instance, you can use the card component in Bootstrap, which automatically adjusts its content based on the screen size. You can also use classes like card-title, card-text, and text-center to manage text layout and responsiveness. This approach eliminates the need for custom font scaling or media queries.
You can learn more about using the Bootstrap card component here: Bootstrap Card
Otherwise nice work completing this solution! 🚀🚀🚀
Happy coding :)
Next time, I won't underestimate any challenge, no matter how easy it seems. Because of my arrogance, I was in a hurry to finish it so I could jump on to a new challenge, and I messed everything up, so it took a lot longer than it should
What challenges did you encounter, and how did you overcome them?Working with pseudo-elements to create a small triangle below the share button and center it, as padding wasn’t included when using left: 50% and translateX(-50%). I had to experiment with different values manually.
What specific areas of your project would you like help with?General layout in HTML and JS Also, if you have any other suggestions, please feel free to comment. I will be happy to listen to and apply every advice
Hi @MihailoSparic01
Excellent work on creating the article preview component. I commend you on managing the display and hiding of the "share" section when the share icon is clicked. It enhances the interactivity of the component. ⭐👏⭐
One aspect I recommend is adjusting the preview card to be centered on the page, as it's currently slightly above the center. To achieve this, you can modify the CSS for the body element:
padding-top: 16rem; to prevent the card from being pushed down.justify-content: center to horizontally align the content within the flex container, keeping it centered across the page.align-items: center to vertically align the content, ensuring the card is centered from top to bottom.height: 100vh to ensure that the body takes up the full viewport height.margin: 0 to remove any default margin that might offset the card.body {
background-color: #ecf2f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
Otherwise, well done completing this solution! 🚀🚀🚀
Happy coding :)
Any suggestions or tips are more than welcome. thank you everyone!
Hi @jarthurofv
Excellent work creating the stats preview card! It is close to the original design ⭐👏⭐
Here are some tips you can consider:
Currently, the breakpoint is set at 600px (max-width: 600px), which causes the card details to be hidden on medium-sized screens. Try changing the breakpoint to 768px to ensure the content remains visible and adjusts well as the screen size decreases.
Remember to always include the alt attribute for images. It improves accessibility by helping screen readers describe the image content to visually impaired users and also provides context if the image fails to load.
Otherwise, nice work on completing this solution! 🚀🚀🚀
Happy coding :)
when I finished my Media Querie
What challenges did you encounter, and how did you overcome them?the right positioning of all elements
What specific areas of your project would you like help with?Just have a look at my code and if you have any suggestions I'm here.
Hi @PxMach
You did very well creating the product preview card! It includes most of the key elements of the design 👏👏👏
There is one aspect that I noticed:
Based on the design provided, the <h1>Gabrielle Essence Eau De Parfum</h1> and <p class="reduction">$149.99</p> should have the font-family "Fraunces"(https://fonts.google.com/specimen/Fraunces) but this is not reflecting on the page.
You can import the "Fraunces" font into your stylesheet:
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600&display=swap");
You can then apply the "Fraunces" font-family to the <h1> and <p class="reduction"> elements such as:
h1, .reduction {
font-family: 'Fraunces', serif;
}
This is just something to try to make the different fonts stand out a bit more and to align more closely with the original design.
Otherwise, excellent effort!🚀🚀🚀
Happy coding :)
Any advice and comment would help. Thanks :)
Hi @thentrsfs
Awesome work creating the product list using React and Tailwind CSS! The cart functionality works perfectly, updating the total as expected 👏⭐👏
Here are some suggestions you can consider:
Consider creating a reusable CartItem component to handle the rendering of each item in the cart, along with its properties (such as name, price, quantity etc.). This will reduce redundancy in the Cart and OrderConfirmed components and make your code more maintainable.
Regarding code style, the indentations are a bit deep. Following the Airbnb JavaScript Style Guide, I recommend using 2 spaces per indent level for cleaner, more readable code.
As a shortcut, you can install the Prettier extension to automatically format your code each time you save the file. You can follow these steps to install and set it up:
Otherwise, nice work completing this solution! 🚀🚀🚀
Proud that i'm quicker writing html & css.
What challenges did you encounter, and how did you overcome them?nothing really.
What specific areas of your project would you like help with?if there's a suggestion to do something differently (better), please write a comment below.
Hi @HassanArafa-dev
Nice work using HTML and CSS to create the social links profile! You've done a great job with the layout.🙌👏⭐
I have one recommendation: Currently you have using internal CSS. I would encourage you to separate HTML and CSS into different files. You can create a "styles.css" file and place your CSS code in there.
By keeping HTML and CSS in separate files, you follow the separation of concerns principle, which enhances code organization and readability. This approach allows for easier maintenance and scalability as your project grows. When styles are in a separate CSS file, they can be reused across different pages, promoting consistency and reducing duplication.
You can follow this same principle when you use JavaScript. This ensures that your JavaScript code is kept in a separate file rather than being embedded directly in your HTML. This keeps your code modular and easier to debug, test, and maintain.
Otherwise, well done completing this solution! 🚀🚀🚀
I’m proud to have meticulously followed design guidelines and implemented responsive design principles, ensuring seamless functionality across all screen sizes.
What challenges did you encounter, and how did you overcome them?I faced challenges making it responsive on tablet and smartphone screens but overcame them with the help of ChatGPT.
What specific areas of your project would you like help with?As mentioned in previous two solutions, these are the areas I need help with.
Hi @alok-38
Awesome work creating this social links profile card. It is quite close to the actual design 👏👏👏
To answer your questions:
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png" />
b. The font-size variables (--fs-500, --fs-600) are declared but not used in your code. Therefore, I would suggest removing them to create cleaner code.
c. Some selectors like "*" and html are repeated in both CSS files. I would suggest combining them into a single location. From a personal point of view, for small projects, I typically use one CSS file if the styles are simple. This consolidates the styles for specific elements. However, for larger projects, I would separate the styles for better maintainability, separation of concerns, and reusability.
Otherwise, great effort completing this solution! 🚀🚀🚀
I used CSS variables for the first time. Makes the code more maintainable.
What challenges did you encounter, and how did you overcome them?I wasn't sure how to space the <p> elements properly. I used a combination of line-height and margin-bottom. Not sure if this is the cleanest solution though.
Should the social links be in a <nav> element or is <div> fine/correct?
Hi @valen-webd 😁
Nice work on creating the social links profile. It looks very close to the original design! 👏👏👏
To answer your question: You'd typically use a <nav> tag for site navigation, but since these are social links for connecting with the person rather than navigating the site, a <div> is semantically correct in this case.
I also validated your HTML using the W3C Markup Validation Service and no errors or warnings were detected ⭐. You can check it out for yourself here: The W3C Markup Validation Service
One suggestion I can provide for future reference: If you're building an online CV or personal site, wrapping the links in a <nav> with an aria-label would improve semantic meaning and accessibility. For example:
<nav class="social-links" aria-label="Social media links">
<a href="#">GitHub</a>
<a href="#">Frontend Mentor</a>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</nav>
Otherwise, excellent effort here!
Happy coding :) 🚀🚀🚀
I am actually proud of how I structured the project in terms of react, since this was my first time working with react properly on my own.
What challenges did you encounter, and how did you overcome them?Honestly there were no big challenges I faced since I am quite used to working with html, css, js. The only small challenge I faced was how to structure my app in terms of react components.
What specific areas of your project would you like help with?I would love to hear what others think about how I structured the app, and if it is any good.
Hi Jan! Excellent work on creating this product summary using React. For your first time using React, you nailed it! 👏👏👏
Your app is structured fairly well, and I love how you’ve defined separate components, this makes the code modular and reusable. The transformJSON function is also a clean way to handle your data. Plus, the use of the pages folder and the App.jsx file for organizing high-level page structure vs. UI components is a great best practice. This organization will make your project easier to scale and maintain as it grows.The structure is great overall!
As some stretch feedback, you can explore using props for more flexibility.
Here’s an example: The Button component currently has "Continue" hardcoded as the text. You can pass the button text as a prop to make it adaptable for different contexts.
Button.jsx
import "./Button.css";
// Function receives text as a prop
export const Button = ({ text }) => {
return <button className="card__button">{text}</button>;
};
MainPage.jsx
// Pass values to the Button component as a prop
<Button text="Submit" />
<Button text="Next" />
This is just a small insight which can make your Button component more reusable, allowing the same component to display different content based on the prop value passed to it.
Keep up the great work! Happy coding 😁
I was able to build the page in record time, leveraging Flexbox and CSS media queries to accurately reproduce the visual design.
What challenges did you encounter, and how did you overcome them?Using the picture element to serve up the correct image based on the screen width as well as its position and alignment.
What specific areas of your project would you like help with?Ensuring I follow modern HTML & CSS coding conventions and best practices.
Hi there! Excellent work here. Your product preview card resembles the original design!
Here are some tips for the future: In terms of code style, in your HTML file, you can consider wrapping long lines to improve readability. Generally it is a good practice to wrap lines that exceed 80-100 characters.
To make things easier, you can install the "Prettier" extension in VS Code which will help you to automatically format your code each time you save your files. You will however need to set this extension up. You can refer to this resource which provides some insight: How To Format Code with Prettier in Visual Studio Code
You can also refer to the HTML/CSS Google Style Guide which offers some insight into some best practices to follow when writing your code: Google HTML/CSS Style Guide
Otherwise, well done completing this solution!
This was an exciting yet challenging assignment. Since I understand flexbox better, I decided to use it and was not disappointed. My only challenge so far is making the article image as it is in the model. But I hope to learn more as I build.
What challenges did you encounter, and how did you overcome them?Making the article image appear as if pushed to the right by the article details div.
What specific areas of your project would you like help with?The article image.
Hi there! Great work on creating this article preview component! Your design is very close to the screenshot. I have also tested your code and it is responsive to different screen sizes 👏👏👏
To answer your question about making the article image appear as if pushed to the right:
I hope this makes sense and helps :)
Happy coding 😁
I've become faster in uploading my projects, man😎.
What challenges did you encounter, and how did you overcome them?I don't have the innate talent in uploading, have to continue believing in repetation rather than the talent😁😁.
What specific areas of your project would you like help with?ANY FEEDBACK regarding ReactJS dude because I am a newbie in the library😫.
Hi Marzia! I understand that you're new to learning ReactJS, but I have to say, you did a fantastic job with this one. The design is well executed and really captures the expected look of the 3-Column Preview Card Component 🌟😁🌟
While reviewing your code, I noticed one area where you could improve in the future:
In the Product.jsx file, when I hovered over .img.src, .img.alt, .heading and .description, I received an ESLint warning about missing prop validation. This means the props passed to the Product component are not being validated, which is an important aspect of ensuring type safety.
In the past, PropTypes were commonly used to validate props. However, modern React development often moves toward TypeScript, which provides a more robust type system with static type checking. This gives stronger guarantees about your data's types, reducing runtime errors and improving code quality in larger applications. Check out this old React doc which supports this: Typechecking With PropTypes
If you're up for a challenge, I'd suggest exploring TypeScript. It might seem a bit more complex at first, but it will help you level up your React skills and make your code even more reliable as you grow.
Otherwise, great work! Happy Coding :) 🚀🚀🚀
I am proud of utilized CSS variables to define colors, spacing, border-radius, and typography. This improves code maintainability and reusability by avoiding hardcoded values and ensuring consistency across styles. I'll try to learn more about naming convention in HTML next time.
What challenges did you encounter, and how did you overcome them?One challenge I encounter was adjusting the color of list item bullets. I researched online and found that ::marker could help with this, so I learned from the MDN documentation.
What specific areas of your project would you like help with?I'd like feedback on whether my use of HTML semantics and CSS structure is appropriate. I'm open to any suggestions for improving my code.
Hi there! Great job on creating this recipe page! You've done an excellent job replicating the design, and it closely matches the screenshot 👏👏👏
Regarding your question about the appropriateness of your HTML semantics and CSS structure, they are spot on. I didn't find any errors or warnings when evaluating your code with the relevant validators. However, for future reference, you may want to consider using the following validators:
Otherwise, fantastic work! Happy coding :) 🚀🚀🚀
To use semantic HTML and I would add using grid-template-columns to make it more responsive if there is more than one card.
What challenges did you encounter, and how did you overcome them?Units of measurenment and using the relative measure of rem.
What specific areas of your project would you like help with?Have our semantic HTML evaluated.
Hey Jhanpiere! Outstanding work on the QR Code Component! It adapts well across different screen sizes 🌟🙌🌟
I have one suggestion in response to your question about having your semantic HTML evaluated:
Visit the The W3C Markup Validation Service and go to the "Validate by Direct Input" tab. Here, copy and paste your HTML in the empty input field and click the "Check" button. Your code will be evaluated for any syntax errors, missing tags, or incorrect usage of HTML elements, helping to ensure that your markup follows best practices and is fully compliant with web standards.
Based on your HTML which I tested, one warning was returned, namely: "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed."
According to HTML best practices, each <section> element should have a heading (like <h2>, <h3>, etc.) because it provides context, improves accessibility, and helps search engines better understand and index the content.
However, in this case, since a heading is not required, you can change the <section> tag to a <div> tag because a <div> is a generic container with no semantic meaning, making it suitable when no specific section heading is needed.
For instance, you could modify your code like so:
<main class="main">
<div class="cards-container">
<!-- The rest of your code -->
</div>
</main>