Completing the task
What challenges did you encounter, and how did you overcome them?Choosing between flexbox and table how to build a responsive table, went for flexbox.
What specific areas of your project would you like help with?None
Hi,
I've reviewed your decision to use flexbox for building a responsive table instead of a table layout. I appreciate your choice in favor of flexbox.
I would like to suggest prioritizing semantic markup, similar to what you've done with the unordered and ordered lists.
Even when using flexbox, you can still apply styling directly to the table tag, treating it like any other element to maintain semantic integrity.
This approach ensures accessibility and clarity in your code structure.
Here is a solution:
<table> <tr> <td>Calories</td> <td>277kcal</td> </tr> <tr> <td>Carbs</td> <td>0g</td> </tr> <tr> <td>Protein</td> <td>20g</td> </tr> <tr> <td>Fat</td> <td>22g</td> </tr> </table>
table tr {
display: flex;
gap: 1rem;
padding: 0.75rem 2rem;
}
table tr td {
flex: 0 1 50%;
}
table tr td:nth-child(2) {
font-weight: 700;
color: var(--clr-primary-brandy-red);
}
table tr:not(:first-child) {
border-top: 1px solid var(--clr-neutral-white-coffee);
}
Hope this can help!
Keep up the good work!
This time it is a fairly simple exercise in my opinion, so the difficulty may increase a little for the next practice.
What challenges did you encounter, and how did you overcome them?I really didn't find any notable obstacles this time, so I plan to increase the difficulty of the next challenges.
What specific areas of your project would you like help with?I still don't have much experience with these projects, so although I felt that this time it became easier for me to develop this one, I would not like to ignore any aspect or failure, if I were to make it, so I would appreciate it if you would notify me in case of find any errors or have any observations.
Hi,
Well done! I have a few suggestions to enhance your work:
Consider including width and height attributes in the img tag. This can help prevent layout shifts, thereby enhancing the user experience.
It might be beneficial to refrain from using pixels for font sizes, as this can improve accessibility for all users.
Utilizing the nav tag along with the a tags for links could be advantageous.
I hope this can help.
Keep up the excellent work!
Hello,
Great job! I'd like to offer a couple of suggestions:
By the way, nice profile picture!
Keep up the excellent work!
Exploring Figma for the first time has been a delight. It's been an enjoyable journey navigating its features and discovering its potential for collaborative design. Despite being my first experience with the platform, I found its intuitive interface and seamless functionality incredibly empowering.
What specific areas of your project would you like help with?I'm eager to hear feedback on my designs and welcome any suggestions for improvement. Your insights and constructive criticism would be invaluable in refining my work further. Thank you in advance for your time and input!
Hi there,
Great job! I just wanted to offer a few friendly suggestions:
Adding width and height attributes to the img tag can really help prevent layout shifts, making for a smoother user experience. Also, since you've wrapped the img in a picture tag, adding width or pixel density descriptors to the sources tag would be beneficial.
<picture> <source srcset="logo.png, logo-1.5x.png 1.5x" /> <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" /> </picture>
Using the time tag for the published date adds a nice touch of semantic clarity.
<time datetime="2023-12-21">Published 21 Dec 2023</time>
Consider using the figcaption tag for the caption associated with the figure instead of p. It helps with proper structuring.
<figure> <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" /> <figcaption>An elephant at sunset</figcaption> </figure>
Additionally, it might be worth considering steering away from using pixels for font sizes. This small adjustment can greatly improve accessibility for all users.
Lastly, using CSS variables for colors can make your code more readable and maintainable.
I hope this will be helpful, keep up the good work!
I am proud of finding out how to convert the figma drop shadow to css.
What challenges did you encounter, and how did you overcome them?I am quite new to css so found it all quite challenging. I found resources online to learn more.
What specific areas of your project would you like help with?I would be grateful for any feedback that will help me get better at frontend.
Hi there,
Good work! I wanted to share a couple of suggestions with you:
Your CSS is really good, especially considering your experience level.
Keep up the great work!
I have used box model efficiently which gave me some satisfaction.
What challenges did you encounter, and how did you overcome them?It was difficult to use font-family given package and hence I used my system default font-family for the project. Its my second project so it was difficult to make it responsive
What specific areas of your project would you like help with?Need help to make it responsive.
Hi there,
Great job! About the responsive the main concern lies in the fixed width on mobile size set here:
.box { width: 340px; }
Consider setting a range using min() or utilizing media queries to resize the box. Remember, child elements should also scale accordingly with the box.
Additionally, I suggest using an auto formatter like Prettier, as the current indentation in your .css file makes it a bit difficult to read.
Hope these tips come in handy for you!
I am proud of that I accomplished this task very quickly and practised my box model knowledge also I could use css custom properties. I want to use scss and bem next time.
What challenges did you encounter, and how did you overcome them?In this chellenge I struggled with centering the text especially paragraph However, figma helped me to figure out how much padding and margin to set. In addition, I used flexbox to center the div for the first time it didn't work but I googled a little bit and discovered about min-heght should be set to center vertically otherwise it doesn't work.
What specific areas of your project would you like help with?I completed this task quickly and design matched, although, I am having issue with responsivnes in small sizes. Could you help me if it is possible. Thanks
Hi Sagi !
Congratulations on your work! I noticed that adding height and width attributes to the img tag can really help minimize layout shifts, which is awesome.
Also, considering accessibility, it might be beneficial to steer clear of using pixels for font size. I took a peek at your CSS file and thought you might find a lot of value in using an auto formatter like Prettier, it could streamline your workflow.
Another tip I have is to create classes for styling, it not only enhances maintainability but also makes your code more readable.
Keep up the great work!
What I am most proud of is having finished this project, despite its simplicity. I like how simple things can be challenging.
For now, I wouldn’t do anything differently.
What challenges did you encounter, and how did you overcome them?The biggest challenge I encountered was making it responsive, but after much research, I found some ways to do that.
What specific areas of your project would you like help with?I would like you to analyze my HTML and CSS code and give me feedback and tips on how I can improve my code and further enhance my skills. This would help me a lot, and I would be very happy with everyone's contribution.
Hi Flavio !
Congratulations! Adding height and width attributes to the img tag can help prevent layout shifts. Additionally, I suggest creating CSS variables for colors to enhance maintainability and readability. Apart from that, great work!
first time submit
What challenges did you encounter, and how did you overcome them?nothing
What specific areas of your project would you like help with?the height and width ratios
Hey @nourshaaban1 !
Great job overall! Just a couple of suggestions: Adding width and height attributes to the img tag can prevent layout shifts, and consider avoiding using pixels for font sizes for accessibility reasons. Aside from these minor details, well done!
This is my solution for the Age Calculator App.
It was overall easy and enjoyable building this project, however I faced a difficulty regarding functionality:
#day-input every number from 1 to 31 nevertheless there is no validation regarding month restrictions (for example you can type 31 February and it will generate an output). Is there any regex available or do I need to set specific limitations in the JS script?I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!
Hi Petros!
I would recommend using a date library such as Moment or Date-fns to validate if the inputted date is valid, as these libraries have built-in functionality to handle date validations, including checking for valid day and month combinations. This will help ensure that the generated output is accurate and avoids any potential issues with invalid dates, such as 31 February. Keep up the good work, and congratulations on your project!
Hello everyone, I'm excited to share my first Typescript challenge with you! As someone relatively new to Typescript, I would really appreciate any feedback you can provide on how I've approached typing in my code. This challenge was a great opportunity for me to learn and apply Zod for the first time, which was super helpful. Thank you in advance for your time and insights!
Hello Geoffrey,
Congratulations on your work! Here's some feedback on your usage of TypeScript.
Avoid using 'any' unless for advanced stuff like generic: It's recommended to minimize the use of 'any' in TypeScript, as it can weaken the type safety benefits of using TypeScript. Instead, try to explicitly define the types of your variables, parameters, and return values to make your code more robust and maintainable.
Provide function signatures: When typing a function, it's important to provide a function signature, especially when using 'setState' from React. This helps with type inference and makes it easier for other developers to understand the expected input and output types of the function.
Consider using form validation libraries: If you're working with form validation using Zod, you might want to consider pairing it with a form validation library like React Hook Form. This can provide additional functionality and make it easier to manage form state and validation in a scalable and efficient way.
Overall, great job! I hope this feedback is helpful in improving your usage of TypeScript. Keep up the good work!
I am interested if my typescript and react is up to standard to a junior developers! Thank you
Hello Filip!
Great job on the results! If you don't mind, I have a few suggestions for improvement. Firstly, consider leveraging available packages like Moment or Date-fns for handling dates, and a JSON schema along with a validation library for form validation. This can help streamline your code and ensure consistency.
Additionally, it's advisable to minimize the use of setState inside functions, such as in the case of setUserAge within the calculateAge function. This can make the code harder to predict, as calling calculateAge does not indicate that userAge will be updated. It may be better to refactor this logic to improve code readability.
if (validateInput()) {
const age = calculateAge( ...);
setUserAge(age);
}
Furthermore, consider extracting the calculateAge function out of the component, which would make it easier to test using tools like Jest or Vitest. This can aid in writing effective unit tests for your code.
Overall, these suggestions can enhance the maintainability and reliability of your code. Keep up the good work!