@danmlarsenSubmitted 26 days ago
P
Mikhail
@mkostrikovAll comments
- @dejuliansrSubmitted about 1 month ago
- @ArfirpoSubmitted about 1 year ago
Hi everybody! 👋
Frontend Mentor - News homepage solution
This is a solution to the News homepage challenge on Frontend Mentor.
Overview
The challenge 🎯
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
Links 🔗
- Solution URL: Github Repository
- Live Site URL: Github Page
My process ⚙️
Built with 🛠️
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Sass - Css Pre-processor
Author 🙋🏻♂️
- Twitter/X - @agus_firpo
- Frontend Mentor - @Arfirpo
- Linkedin - Agustín Rodrigo Firpo
- @kaamiikSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of how I used Astro's component-based structure to create a clean and maintainable form, ensuring accessibility for screen readers and other assistive technologies. This was especially important for elements like radio buttons and checkboxes, which I built from scratch, referencing resources like moderncss.dev to ensure a high level of accessibility and usability.
Next time, I would approach the project using a framework like React to improve code reusability and handle state management more effectively. Additionally, I would refactor some parts of the JavaScript, particularly the validation logic, to make it cleaner and more modular.
What challenges did you encounter, and how did you overcome them?One of the main challenges was ensuring the form was fully accessible. This involved making sure that all the elements, such as inputs, radio buttons, checkboxes, and error messages, could be properly announced by screen readers. To overcome this, I referenced best practices from modern CSS guides and thoroughly tested the form's accessibility using different tools.
Another challenge was creating custom components for form controls like radio inputs and checkboxes from scratch, ensuring they looked modern and were easy to interact with. I overcame this by experimenting with CSS and refining the layout until I achieved the desired design.
What specific areas of your project would you like help with?I'd like feedback on any suggestions on how to improve the accessibility and responsiveness of the form. Specifically, I'd love to hear if there's a more efficient way to manage form validation and toast notifications in Astro or in React for future iterations of the project.
- @danmlarsenSubmitted 3 months agoWhat specific areas of your project would you like help with?
I appreciate any helpful feedback.
@mkostrikovPosted 3 months agoMaybe it was intentional, but there's an HTML element called "detail".
0 - @NikitossikSubmitted over 1 year ago
I made it with event delegation. Pretty good experience
- @jjdavenportSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
First time adding animation to my page, using Z-index so the article apears from underneath the image. The content for the nav image and the article text and link are pulled from an array and appended to the dom.
What challenges did you encounter, and how did you overcome them?The main challenges were the slider animation not the slider itself and making the desktop layout being responsive without overflow on larger viewports.
What specific areas of your project would you like help with?Having my desktop media query dynamically adjust so it takes up 100% of the viewport and having my article height staying fixed so that it does not appear to jump on desktop. There still appears to be some overflow.
- @jjdavenportSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
First time using sass has some nice features compared to regular css. Built the site mobile first and used bem, will be using bem from now on and continuing to build mobile first.
What challenges did you encounter, and how did you overcome them?The main challenge was the desktop site, not quite sure if my layout is correct. Also need to learn more sass features.
What specific areas of your project would you like help with?Any feedback regarding the layout on the desktop site would be appreciated and tips for sass.
@mkostrikovPosted 5 months agoThe parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. .alert { // The parent selector can be used to add pseudo-classes to the outer // selector. &:hover { font-weight: bold; } } https://sass-lang.com/documentation/style-rules/parent-selector/
Marked as helpful1 - @azzykesumaSubmitted over 1 year ago
any feedback is very appreciated
- @StanmancerSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
This is my first web app.
What challenges did you encounter, and how did you overcome them?I struggled to make the calculator work as the necessary values are inputted. I used the
onchangeevent listener to make the calculations as certain values were input.
What specific areas of your project would you like help with?input.addEventListener("change", () => {}I would like to know if there is any way i can make my code cleaner and more efficient.
Any and all feedback is also welcome. Thanks.
- @kevinebenhezerSubmitted 9 months ago
Any feedback are welcome. Thank you!
- @lokesh-webySubmitted 7 months ago
