@Adnan0-IM
Latest solutions
Tip Calculator App using SvelteKit and Tailwind CSS
#svelte#tailwind-cssPSubmitted 5 months agoAny and all feedback is welcome!
Article Preview Component using SvelteKit and Tailwind CSS
#svelte#tailwind-cssPSubmitted 8 months agoTestimonials Grid Section using Tailwind CSS
#parcel#tailwind-cssPSubmitted 8 months agoI feel like even though I followed the design spec and properly calculated my rems, it feels like the cards still don't match the width like in the design. I tried adjusting the grid gap and the grid container width, but I still couldn't get the paragraphs to line up exactly like the design. I'm not sure what my next step would be unless it is changing the root font size and adjusting my rems based on that change.
Latest comments
- P@JYLN
Overall, your project looks great! Here are a few things I noticed that may be improved:
- You didn't use the provided logo for the project. I'm not sure if that was intentional or not, but just wanted to mention it. Even so, there may be work that can be done to the text to make it look closer to the provided logo.
- You may consider using a form with form input elements for better accessibility for users and semantics within the code.
- The labels for the inputs are a bit hard to read, you may consider setting their weight to bold so they stand out a bit more.
- Your bill and number of people inputs shift the layout when focused. You may consider adding styles to help prevent any interesting layout movements when the the inputs are focused.
These are just a few things I noticed. Great job!
- @hamidriaz1998P@JYLN
This looks great! Here are a few things I noticed that you might improve on:
- In some portions of your code, you have some sizes that are in static pixels rather than a intrinsic size. For example,
max-w-[500px]on the dashboard container element andtext-[18px]for the heading of the cards. These static pixel sizes will cause the layout to be inconsistent if a user zooms in on your page or uses a different default font size in their browser. Consider converting these to rems. - In Firefox (at least), the background that is set for the icons is creeping around the corners of the background of portion of the card that has text. You may consider reducing the height of the element that contains the icons to keep this from happening.
- You're selecting the dashboard container element using a class, while the class isn't being used for any styling. I would think that this generally isn't best practice. Consider changing this to an ID for the element instead to use within the query selector of your JavaScript.
- While you have breakpoints for most of your container elements, you don't have any for the text so there is a lot of unnecessary white space due to the fact that your font sizes aren't scaling with the layout. You may consider going back through your code and adjusting font sizes at some of the same breakpoints you have within your code.
- The icon SVGs within the headers of the cards are decorative. You may consider setting the alts of the SVGs to an empty string due to this.
- Within your JavaScript code at line
43, you can accomplish saving the data from the fetch without creating a separate empty variable. To accomplish this, you can simply returndataJsonin the last .then chain, and then set the variable to the whole fetch operation. Just something that might help consolidate your code a little bit.
Overall, great work!
Marked as helpful - In some portions of your code, you have some sizes that are in static pixels rather than a intrinsic size. For example,
- @lauraamiaaWhat are you most proud of, and what would you do differently next time?
I added some JavaScript validation to the form. In addition to showing the success message, I have also added a loading spinner to simulate processing time. The success message now dynamically displays the actual email address that the user typed into the input field, giving a more personalized confirmation.
The validation is fairly simple at this stage, relying on basic client-side checks using regular expressions to ensure the email format is valid. In the future, I plan to explore more robust validation techniques, such as integrating API calls or database connections to check if the email already exists or to handle server-side form submissions. This would also allow for more advanced error handling and feedback.
What challenges did you encounter, and how did you overcome them?I am still learning Tailwind CSS, and realised if the classes are not compiled in the output, they are not being read correctly. I am working with adding and removing classed using JS for error messaging. So I had to add some in the safelist of the Tailwind config.
P@JYLNThis is great! I especially like the loading spinner addition to the project. Here are a view things I noticed that you could potentially improve on:
- The form should not include the
novalidateattribute for a few reasons. The client side validation improves accessibility for those using screen readers, provides instant feedback to users if values are incorrect or missing if required, and still provides validation for your form if JavaScript is disabled in the browser or fails to load. - You may consider setting the form button's
typeattribute tosubmitas it will improve accessibility within the form and avoids ambiguity with the form's default behavior. - You may consider setting the focus state of the form button to the same or slightly differing styles as the hover state so as to provide accessibility to keyboard users so it is clear they have navigated to the submit button.
- You may consider setting
min-hon your main element rather thanhas when the mobile layout is in landspace, if the vertical space is narrow, the image overflows the top and becomes mostly not visible. - You may consider writing slightly more descriptive and on-topic alts for your images as to improve accessibility with the images. Also, decorative images should have an empty alt. In the case of this project, the check mark within the success modal and within the list of the main text is more than likely decorative and wouldn't take an alt.
- As far as your repo is concerned, I would recommend that you don't ignore the tailwind config file, as if you were to need to clone this repo to another machine, unless you remember your tailwind config, trying to develop more on this project will result in errors. Also, I would recommend that you do ignore
.DS_Storefiles as they are non-essential and create unnecessary clutter within your repo.
Overall, great work! You replicated the design very well.
- The form should not include the
- @Rahmonbek-0001P@JYLN
Great start! Here are a few things I noticed that you might improve upon:
- The code in your repo (i.e. your HTML markup and Tailwind utility classes) doesn't match what's being compiled and shown in your preview site. You may consider updating the code in your repo so that you can receive substantial feedback on your practices within your actual source code, rather than what's being compiled for the browser.
- Consider publishing your code for challenges in separate repos rather than a monorepo. A monorepo might get a little hard to handle when it comes to managing revisions.
- When clicking the share button on mobile screens, when you overlay becomes visible, there's a strange layout shift with the card that might not be beneficial to UX. You may consider playing with padding and maybe reorganizing parent elements to get your overlay to line up more precisely.
- Your share icons within the tooltip and mobile overlay should be encompassed by links (even if for the example they don't redirect anywhere) as an img is not inherently an interactive element.
- Your share icons are rendering strangely, as if they are being squished. Instead consider the use of an aspect-ration utility class or allowing the icons to be responsive so that they maintain their aspect ratio.
- You're missing the Manrope font that was specified for the design. Look over the style-guide to ensure you are using the correct resources.
- Your tooltip's arrow and body doesn't appear to be aligning correctly with the share button. You may try playing with the margins you have set on this to get it closer, you might even look into JavaScript libraries that use a floating UI concept that will assist you with this automatically.
These are just a few things that might help make this project stand out more and conform to the design requirements a bit more. Great work overall, however!
Marked as helpful - P@hikawiWhat are you most proud of, and what would you do differently next time?
I'm proud of the entire thing as a whole, this was a step up in difficulty compared to previous challenges for me, and also proud of my inability to double check, see below lol.
What challenges did you encounter, and how did you overcome them?I thought I had to align the two images for hero left and right well to scale up even if it's two separate images, until I realized there's the combined image in the assets folder also. I also had trouble putting the background image in for the footer, until I realized I was misspelling the css property.
What specific areas of your project would you like help with?I saw on a few notes about shorthand properties and the / in css, I dont know what it is, it seems very specific on what it does on specific properties, and MDN docs weren't exactly easy to understand.
P@JYLNThis looks great! Good work! Svelte is an awesome framework, I've had a hard time getting into Astro though.
The only thing I can say that may help you in the future, for the buttons in the hero, you can use flex-wrap rather than using flex-col and flex-row with a breakpoint to produce the same result of the column/row layout for the buttons.
Good work!
Marked as helpful - @MahdyrllP@JYLN
This looks great! I noticed some things you might look at improving:
- The breakpoint for the single column grid and 3 column grid is too small. When resizing the browser, content is overflowing the cards that only span 1 column and words are breaking at one line a piece. Also, the quotation SVG on the first card ends up floating over the user information content. It's happening generally around where some tablet portrait sizes exist. You may consider breaking into the single column layout so that your layout is more consistent.
- You have your text sizes set to static pixels, which will cause issues on users that have have their browser settings set to a different font sizes than default. Consider using rems or ems to better your UX.
- On line 28 of your commentComponent, you are using these utility classes:
sm:pl-[10.5rem] sm:pr-[10.5rem]. Since both values are the same size for left/right padding, you can use this class:sm:px-[10.5rem]to help clean up the amount of class names you have set within your markup. - Within your
index.cssfile, you are setting border-box for box-sizing on all elements. This isn't necessary, as the pre-flight for Tailwind CSS already accomplishes this. You may refresh yourself on the Tailwind docs about it's defaults to help reduce redundant code within your base.
Overall, great work!
Marked as helpful
