Latest solutions
Bookmark Landing Page with Tailwind CSS 4
#tailwind-cssSubmitted 3 months agoI want to improve the structure of my code to make it cleaner and easier to maintain. I also want to ensure that I follow best practices in implementing Tailwind CSS, including performance optimization and maintaining design consistency throughout the application. If there are ways to further improve efficiency, performance, or scalability, I am open to suggestions and feedback.
Room Homepage with SCSS
#sass/scss#smacssSubmitted 4 months agoI would like to get some suggestions for you guys, feel free to comment
Latest comments
- @thedanielking@AlfiZain
Great job! However, I noticed that the transition of the hamburger menu doesn’t feel very smooth and has a slight delay. It would be great if the animation could be faster and more fluid.
Also, the animation for the "Features" section takes a bit too long to appear. Reducing the delay would make the user experience feel more natural and engaging.
Overall, it looks really good—just a few tweaks to make the animations feel more seamless! 😊
- @Atomico333@AlfiZain
Awsome, it's look like the design
- @Dadv-a11y@AlfiZain
Nice work
- P@welpmozWhat are you most proud of, and what would you do differently next time?
Assimilating CUBE CSS is more complex than BEM, but I think that CUBE is more reusable and could be more efficient.
@AlfiZainNice work
- @zeeguWhat are you most proud of, and what would you do differently next time?
❤Things I've tried
Accessibility
- Used
aria-controls
,aria-expanded
for Accessibility - Added proper alt text on image button ex.
Expand answer
/Collapse answer
- Tested WCAG evaluation tool on WAVE
- Checked HTML Markup on Validator
Others
- Scored 99% on Google PageSpeed Insights
- Responsive for Mobile, Desktop devices
- Tried smooth transition on buttons
💪Things I should improve
Javascript
- At first, clicking the button to open FAQ, it unfolds well depending on the content. However, resizing the screen display cuts the text area of the answer. I have no idea how to solve this😂
Please let me know if there are any areas of improvement! Thanks :D
@AlfiZainnice work
- Used
- @JunbolWhat are you most proud of, and what would you do differently next time?
- creating all the logic in Javascript to do the seletion of the buttons dynamically using the forEach method.
- Using javascript to add the logic to make the modal panel show up
What challenges did you encounter, and how did you overcome them?// Show the modal on submit button click mySubmitBtn.addEventListener('click', (e) => { e.preventDefault(); // Prevent form submission // 🚩Ensure a rating has been selected before proceeding if (selectedRating) { // Update the modal content with the selected rating myRatingSelection.innerHTML = `You selected ${selectedRating} out of 5`; // this // Hide the rating panel and show the modal myRatingPanel.style.display = 'none'; myModal.style.display = 'flex'; } else { // 🚩don't forget to add an alert if the user didn't select a rating alert('Please select a rating before submitting.'); } });
same as above
What specific areas of your project would you like help with?none
@AlfiZainGood work