I dont know the logic of password generate, so just use ChatGPT, it provide me super complex function, so i decide to break it to simple object
What specific areas of your project would you like help with?another challange for today! welcom any comment and idea to help me better ! thank you
Hi Tran,
Great work on this project! Your solution for the slider gradient inspired me to refactor my own implementation, as I initially built it from scratch to resolve the same issue. It was quite a challenge to handle. 😄
I also noticed that you're using the SVG icons as plain code. However, on smaller screen sizes, they appear to be clipped at the bottom right. I encountered the same issue until I discovered that importing the SVG file as a mask, rather than using it as plain code, helps resolve this. This approach allows you to change the icon's color on hover or in response to other events using the background-color property.
Here's an example of how I implemented it:
HTML:
<button type="button" id="generate-password-btn" class="generate-password-btn" aria-label="Generate a new password" > Generate <i class="arrow-icon" aria-hidden="true"></i> </button>
CSS:
.password-settings .generate-password-btn .arrow-icon {
width: .875rem;
height: .875rem;
aspect-ratio: 1;
-webkit-mask: url("../assets/images/icon-arrow-right.svg") no-repeat center;
mask: url("../assets/images/icon-arrow-right.svg") no-repeat center;
background-color: #18171f;
}
.password-settings .generate-password-btn:hover .arrow-icon {
background-color: #a4ffaf;
}
I am easily learn html, css, bootstrap but through practical i got some errors and new ideas but i solve errors through research in research i got new stuffs.So this is i proud of and next i improve my speed , thinking , etc..
What challenges did you encounter, and how did you overcome them?I encounter challenges with margin , padding and center a div etc.I overcome through varies research i am really happy when i overcome my challenges
What specific areas of your project would you like help with?the specific area is center the card and align the social media link boxes.
Hi @Sakthi, great work on completing your first project! 👏
I noticed you're using Bootstrap for the layout—good choice! However, I believe the code can be streamlined a bit for simplicity. Here’s a suggestion:
<div class="m-auto d-flex align-items-center vh-100" style="max-width: 25rem">
<div class="card text-center w-100 p-4">
<img src="images/avatar-jessica.jpeg" alt="Profile Photo" />
<h5 class="mt-3 mb-0">Jessica Randall</h5>
<p class="mt-2 text">London, United Kingdom</p>
<p class="mb-3">"Front-end developer and avid reader."</p>
<div class="d-flex flex-column" style="gap: 1rem">
<a href="#" class="btn">GitHub</a>
<a href="#" class="btn">Frontend Mentor</a>
<a href="#" class="btn">LinkedIn</a>
<a href="#" class="btn">Twitter</a>
<a href="#" class="btn">Instagram</a>
</div>
</div>
</div>
Give it a try and compare the results to understand the differences and the reasoning behind these changes. Let me know how it works out! 😊
its nice, responsive and it has some simple animations
What challenges did you encounter, and how did you overcome them?responsiveness and breakpoints
What specific areas of your project would you like help with?i need help, in my local host it looks perfect but as soon as i uploaded to gh pages the width of the card changes, also the distance between the card and top and bottom and a scroll bar apears. Why does it happends?? the code its the same but online looks diferent
Hi @Ricarddo, Nice work you have done!
I think the issue you are facing is due to unnecessary media queries and how you handled the sizing of the card width with vw.
I have made some changes to the css file in your repo, hope you have a look at it.
The biggest challenge for me during this project was working with data. To understand how various mechanisms work, I had to spend a lot of time reading documentation. Each new piece of knowledge helped me better grasp the structure of the data, its flow, and how I could process and display it. It wasn’t always easy, but patience and determination allowed me to gradually understand the key concepts. Through this process, I learned not only how to solve specific problems but also how to search for the necessary information in technical documentation more effectively.
What specific areas of your project would you like help with?I would like to know if the code I wrote is good and follows best practices. I hope I managed to apply the right solutions and avoid potential mistakes. I want to grow as a programmer, so any feedback or suggestions regarding my code would be extremely valuable to me. I believe that this will help me further improve my skills.
Hi @LesSyl, you're doing a fantastic job so far—great work on the design!
I have a few suggestions that could help make the design more responsive and streamline the code:
display: grid on the .wrapper, you can simplify:grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
by using:
grid-template-columns: repeat(auto-fill, minmax());
This adjustment can reduce the need for media queries, making the design more adaptable.
Wrap the grid container inside a <div> and assign it a max-width along with a width of 100%. This helps maintain a consistent layout across different screen sizes.
You can also remove the fixed widths and heights from the cards to enhance flexibility.
Lastly, it's possible to remove:
grid-column: 3 / 4;
grid-row: 1 / 2;
from the cards, while keeping it applied to the user-card.
1. Help with Issue - Border-bottom for Nutrition I need support in adding a border-bottom to the Nutrition table. I've tried multiple methods but none have worked. Any suggestions or tips would be greatly appreciated!
2. What I’m Most Proud Of This is my first major webpage, built solely using my knowledge and research. At first, the project was overwhelming, but breaking it down into smaller tasks made it manageable. I’m proud of focusing on small details like margins and starting to apply the "DRY" (Don’t Repeat Yourself) principle in my code.
3. What I Would Do Differently Next Time Next time, I’ll focus on making the page responsive from the beginning, ensuring it works across different screen sizes. I also want to improve the organization of my code and write cleaner, more reusable CSS.
What challenges did you encounter, and how did you overcome them?Understanding padding, margin, and specificity was overwhelming at first. However, after checking it in the developer tools, I understood why specificity plays an important role and how to manage it with coding. Browser developer tools have truly become my best friend in resolving these issues.
What specific areas of your project would you like help with?Border-bottom for Nutrition. I need support in adding a border-bottom to the Nutrition table. I've tried multiple methods but none have worked. Any suggestions or tips would be greatly appreciated!
The border issue can be solved by giving the <table> border-collapse: collapse;
Am proud of the fact that I was able to complete the work with without any help on the CSS styling.
I will like to improve on the time of delivery next time.
What challenges did you encounter, and how did you overcome them?I had a little challenge with the table and how to align the data in it and how to remove the table border outside the data.
I got a little help from google and some friends. I used flex in the table to overcome that.
What specific areas of your project would you like help with?The tables, how to align the data in it and how I can achieve this project without the use of flexbox.
Also after making my code go live using github, the Omelet image refuses to displace on the live site, how can I remedy that?
Hi @okorieiky, good job!
I handled the table section without using flexbox like that:
/* Table Styles */
.recipe__nutrition__table {
width: 100%;
border-collapse: collapse;
}
.recipe__nutrition__table tr{
border-bottom: 1px solid var(--color-stone-150);
}
.recipe__nutrition__table tr:last-child{
border:0;
}
.recipe__nutrition__table tr:not(:first-child):not(:last-child) td {
padding-block: var(--spacing-150);
}
.recipe__nutrition__table tr:first-child td {
padding-block-end: var(--spacing-150);
}
.recipe__nutrition__table tr:last-child td {
padding-block-start: var(--spacing-150);
}
.recipe__nutrition__table td {
width: 50%;
padding-inline: var(--spacing-300);
text-align: left;
}
.recipe__nutrition__table td:last-child {
color: var(--color-brown-800);
font-weight: 700;
padding-inline-start: var(--spacing-100);
}
You can take a look at the final solution here
I'm more used to:
Different screen size have a different font size and padding size. Currently, I set the size by using media query for each different screen size. Maybe there is more efficient way besides using media query.
Sometimes I found it hard to choose the correct name class for the block of BEM. But I think maybe by exercising and doing more project will make me get used to it.
What specific areas of your project would you like help with?Is there a more efficient way to set the font size and padding size for different screen size besides using media query to set it one by one to match the design from the figma file?
Hi @Harta, Nice work!
For dynamic sizing, you can use css clamp() function instead of media query...It allows you to specify a preferred value that is constrained by a minimum and a maximum.
Hi @Sherzod, Nice work!
By testing the code, I noticed that the <form>'s validation override the js logic ... you can pass novalidate attribute to the <form> to disable the default validator.
beside, you can use regex to enhance the validation logic to handle more cases.
I’m most proud of how I implemented interactive hover states for all the elements on the page. It was important for the user experience, especially because these states enhance accessibility and interactivity. I also feel good about the use of Flexbox for layout.
I will focus on writing the code efficiently next time.
What challenges did you encounter, and how did you overcome them?Using correct CSS properties were challenging and required a lot of researching and understanding but in the end, it taught me lot of researching and understanding skills. I'm grateful for that!
What specific areas of your project would you like help with?I have followed the color code as it is in the design file but still colors are not accurate for the design, please help me fix it.
Hi @Nishanth, nice work so far!
I think colors are fine, nothing needs to be changed except the button borders can be removed.
I have allowed myself to make some changes to your css code to make the design more responsive, please check the pull request on github.
Before modifying the code, to valuing elements, I had used more fixed units, but after reading and reviewing the comments I received, I tried to use fewer fixed units for value setting so as not to run into problems making the project responsive.
What challenges did you encounter, and how did you overcome them?I had a problem with making this project responsive, so after sharing my solution, I modified the project by reading and reviewing the comments I received. Now I have posted my modified code here.
I am very grateful to friends who helped me with their comments.
What specific areas of your project would you like help with?If there is still something that needs to be improved, please let me know with your comments.
Thank you 🙏
Hi @Atiyeh.
You can take a look at my solution and have some insights from Here
In addition, I recommend you to read about clamp() in css; it will help you with the the dynamic font sizing instead of media queries.
I want to know is there anyway better then using position: relative; on logo image cause when the monitor change size image in card still in the same position it not responsive so I think there might be a better way than position: relative;
Hi @DuyDui.
I have handled the card logo like this..
.card{
display: grid;
gap: 2.5rem;
padding: 2rem;
}
.card-logo{
width: 4rem;
justify-self: end;
}
And for the cards container, I used grid instead of flex.
grid system and responsive started to be easy.
What challenges did you encounter, and how did you overcome them?Text sizing is my problem,I was focusing to make the same words in the line.
What specific areas of your project would you like help with?Text sizing
Great job, Sarah! 👏
You've done an excellent job handling the grid layout—well done!
I have a few suggestions that could help refine your code and enhance its functionality, particularly around the text styling.
1- Centering the Component:
Since there’s only one component that needs centering inside the viewport, you can simplify this by applying min-height: 100vh and display: grid to the <body> and adding place-items: center. This approach will achieve the desired centering effectively.
2- Responsive Design:
For the media query, consider lowering the breakpoint value to something smaller than the <main>'s max-width. This will improve responsiveness across different screen sizes.
3- Cards Layout:
With the cards using display: grid, you might notice some unwanted spacing between their children. To address this, try adding align-content: start to the cards.
4- Paragraph Styling:
To improve the text appearance, remove the padding around the paragraphs. Additionally, increase the line height of the second paragraph to around 1.3 for better readability.
Test
What challenges did you encounter, and how did you overcome them?Test
What specific areas of your project would you like help with?Test
Nice work Corey!
I didn't create the desktop version of share links as I didn't find it reasonable, but you reviewing your solution makes me want to do it :D
I love how I finally managed to put the text inside the cards in the top left corner and the icons in the bottom right corner.
What challenges did you encounter, and how did you overcome them?I struggled so much with positioning of the little details, like text and icons, but eventually figured it out doing some research.
What specific areas of your project would you like help with?I very happy with the mobile site but with the desktop site I have not managed to make it look just like the design. How do I bring the central 2 cards closer together? I have tried adding more rows and adjusting their star and end rows but it did not work.
Hi Wajahat.
for the Desktop version, you can fix it like this..
.cards{
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
align-items: center;
}
.supervisor {
grid-area: 1 / 1 / span 2 / span 1;
}
.team-builder {
grid-area: 1 / 2 / span 1 / span 1;
}
.karma {
grid-area: 2 / 2 / span 1 / span 1;
}
.calculator {
grid-area: 1 / 3 / span 2 / span 1;
}
but you will encounter farther issues because of the styles you give to the cards like margins and absolute positions, the browser inspector tool will help you find what causing the issues.
Need suggestions on how to make the last section fit the length of the grid.
Hi Ademuyiwa👋🏻
I see that you tried to make use of flex to complete this challenge, it could be done with it but it will be more complicated.
I recommend you watching this Kevin Powell Grid tutorial, he is coding the same challenge using grid ; would be a great help to improve your code and overcome the challenges you are facing.
And good job so far👏🏻
I started coding desktop first and than I had big troubles in making changes for mobile design, so I had to start the grid system from scratch thinking mobile first, and I went smoother. So I guess I'll always go mobile first from now on.
What specific areas of your project would you like help with?When I used to work as a frontend dev I only used Flexbox ignoring the existance of grid, so now I find it a bit hard to understand it because it can do so many things in so many ways that guys pls help me. Anyway, I guess I just need some more practice, but if you happen to read my code and any suggestion comes to your mind, I appreciate you hitting up. Thanks anyone, keep coding hard!
Nice work, Vincenzo👏 You have done a great job so far!
I have reviewed your code and there are two improvements you can do.
While you already using display:grid for the <main> on large screens, you don't need to change it to flex with column direction for small screen.
For the cards shadow, instead of using ::after to create it you can use box-shadow property...something like that.
box-shadow: 0px 15px 30px -5px #color;
just raw css
What challenges did you encounter, and how did you overcome them?scaling issues. open to suggestions
What specific areas of your project would you like help with?scaling of the elements while the page is zoomed
Good job for reaching this level, Ramche.
I recommend you watching this Kevin Powell tutorial, he is coding the same challenge using grid ; would be a great help to improve your code and overcome the challenges you are facing.
