P
@aouintihouari
Marc Francis
@marcfrancissAll comments
- @marcfranciss
Impressive solution to this challenge! 💯
- @Jameell-Adjei
Galleria site created with React, TypeScript, SCSS, and Macy.js
#react#sass/scss#typescript#vite#framer-motion@marcfrancissImpressive solution to this challenge! 💯
- @echocode1What are you most proud of, and what would you do differently next time?
it was success trying out react for the first time after a react course
What challenges did you encounter, and how did you overcome them?the issue I had was deploying basically with GitHub since, I haven't deployed a react project before and don't know how it works .but after some research I was able to do it
What specific areas of your project would you like help with?creating components and how to structure my react project well .i will love input on that
@marcfrancissImpressive solution to this challenge! 💯
- @poissonfouWhat are you most proud of, and what would you do differently next time?
I am proud of making the website more accessible by making it possible to interact with the accordion and the tabs section through the keyboard. I'm also happy to have implemented a simple and intuitive solution to create the accordion section.
What challenges did you encounter, and how did you overcome them?I've had issues with the layout jumping when I added hover effects to elements like buttons, because it would add a border to those elements when they previously didn't have them. I solved it by adding a transparent border to those element in their default style.
What specific areas of your project would you like help with?I still struggle to properly name my classes. I've tried to implement a BEM architecture but ended up breaking it a few time because I thought the class names were becoming to verbose. I would appreciate if someone could point out how I could've better name my classes and implemented BEM.
@marcfrancissImpressive solution to this challenge! 💯
- @imandreansWhat are you most proud of, and what would you do differently next time?
I'm proud that I can design the mobile view first. Next time I need to pay attention more to the resolution and the layout.
What challenges did you encounter, and how did you overcome them?It's really hard to make the grid of screen view, so I kept trying till I get it right.
I also had a hard time to build the slide effect when click the arrow button. I solved it by asking claude AI for a code. After I implemented the code, I analyze the code.
What specific areas of your project would you like help with?I think more on the design, because there a lot of things I want to fix on this current design.
@marcfrancissImpressive solution to this challenge! 💯
- @poissonfouWhat are you most proud of, and what would you do differently next time?
I am happy that I was able to utilize pseudo elements to create some of the pages elements, and to also have implemented a mobile first approach. It was also my first time using SASS and I was happy to see how easy it is to use it.
What challenges did you encounter, and how did you overcome them?When I started the project I styled the page for desktop first and found it hard to make it responsive for smaller devices. By using a mobile-first approch, I managed to overcome this issue.
What specific areas of your project would you like help with?I had issues making the creations grid section align with the rest of the design in desktop screens, I would appreciate if someone would point my mistake and give an ideia for making the design work
@marcfrancissImpressive solution to this challenge! 💯
- @porumbachanovWhat specific areas of your project would you like help with?
I tried to use the BEM methodology, would appreciate some feedback if I'm using it correctly.
@marcfrancissImpressive solution to this challenge! 💯
- P@srijanssWhat are you most proud of, and what would you do differently next time?
- I learned new aria roles and attributes to make the game accessible, like grid, gridcell etc.
- I learned how to use aria-live attribute to make the player turn live for screen readers.
- I learned how to use CSS :not() pseudo-class to style the cells that are not occupied by a mark.
- I learned how to use CSS :hover and :focus pseudo-classes to style the cells when hovered or focused.
- I learned how to use CSS :before pseudo-element to add an icon to the cells when hovered or focused.
- I learned how to use CSS variables to set the icon size and position.
- I learned how to use aria-label attribute to provide a label for the grid cells.
- I learned how to use aria-describedby attribute to associate the instructions with the grid cells.
- I learned how to change cell state using data attributes.
- I learned how to use Javascript's map method to render the cells.
- I separated the game logic and data store from the UI components to make the code more modular and maintainable.
- I learned how to use Javascript's every method to check if the game is a tie.
- I learned how to use Javascript's filter method to filter the cells that match the active mark.
- I learned how to use Math functions to generate a random number.
- It was challenging to make the game status, turns, modal data live for screen reader users. Use of aria-live for turns and aria-describedby for modals and menu which points to visually hidden element in the div helped
- I have used header, main and footer inside web-components. Is it a best practice to do it this way ? Does this satisfy the accessibility requirement?
- Any feedbacks regarding a11y are welcome
@marcfrancissImpressive solution to this challenge! 💯
- @lappranti
- P@danmlarsenWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to make a working app without relying on frameworks.
What challenges did you encounter, and how did you overcome them?I recently learned typescript so I had some challenges adjusting to the somewhat stricter rules. But it was mostly enjoyable and a great learning experience.
What specific areas of your project would you like help with?I appreciate any helpful feedback.
@marcfrancissImpressive solution to this challenge! 💯
- P@kaamiikWhat are you most proud of, and what would you do differently next time?
I’m most proud of how I focused on accessibility this time around. I ensured that my components and the hamburger menu in the mobile view were accessible, which is something I put a lot of effort into. If I were to do this project again, I would use a more robust framework like React to handle the state management and interactivity in a more scalable way.
What challenges did you encounter, and how did you overcome them?The main challenge was implementing the CSS layout for the desktop version, especially using CSS Grid and subgrid to achieve the desired design. To tackle this, I broke down the layout into smaller, manageable components and used a combination of Astro's component structure and SASS for styling. I also faced difficulties in making the hamburger menu accessible, so I researched best practices and ensured it worked seamlessly with keyboard navigation and screen readers.
What specific areas of your project would you like help with?I’d like feedback on the accessibility aspects of my project, particularly regarding the implementation of the hamburger menu. I want to make sure it meets all accessibility standards and provides a smooth experience for users with assistive technologies.
@marcfrancissImpressive solution to this challenge! 💯
- P@35degreesWhat are you most proud of, and what would you do differently next time?
I didn't nail the a11y this time but I worked out a decent solution with keyboard navigation and screen reader.
What challenges did you encounter, and how did you overcome them?Lots of reading about a11y form best practices. It was hard to combine what I've learned to this point with how to structure a11y syntax. It's a long process to synthesize the two.
What specific areas of your project would you like help with?more fluent a11y code
@marcfrancissImpressive solution to this challenge! 💯
- P@35degreesWhat are you most proud of, and what would you do differently next time?
I'm proud of working through the solution and some tricky spots like having it expand on clicking the question or the plus-sign in the same function. I'm still struggling with a11y and I'm not fluent in what to do yet.
What challenges did you encounter, and how did you overcome them?Lots of bugs along the way that I worked through with patience and experience.
What specific areas of your project would you like help with?a11y
@marcfrancissImpressive solution to this challenge! 💯
- P@35degreesWhat are you most proud of, and what would you do differently next time?
I'm proud that I took time to work out solutions to the form submission and checkbox responsiveness and pseudo-elements myself. I started with the JS structure but the design and layout was more interesting to me and got me sidetracked. I want to complete the JS first before building the layout in the future. I'm excited with how the animations turned out.
What challenges did you encounter, and how did you overcome them?adding a11y and tabindex functionality was tricky. I was able to get tab entry working but it's not perfect. I have a lot of div headers that I couldn't make any more semantic.
What specific areas of your project would you like help with?The a11y output isn't perfect and and jerry-rigged a lot of it at the end, adding random 'aria-labels'.
@marcfrancissImpressive solution to this challenge! 💯 I really like your flip animation upon submission!
- P@AntonvasilacheWhat are you most proud of, and what would you do differently next time?
- Using reducer and context succesfully.
- Some of the conditional styling felt pretty complex.
- Creating the dark theme using context.
- I had a really difficult bug to pinpoint, where one of the state variables was not updating when changing states - I managed to solve it by logging each state, and found the problem in the conditional rendering of one of the buttons.
- Creating the dark theme took some studying and some trial and error - I used context API, after trying to just change the variables, which didn't really work with the way the app was built.
- Image loading proved to be problematic when doing the production build - I tried locating the images somewhere else, but eventually settled for using the /public folder
I think I could have done a better job of organizing the css classes.
@marcfrancissImpressive solution to this challenge! 💯
- P@AdamullaOsasWhat are you most proud of, and what would you do differently next time?
writing js mostly by myself without any help
What challenges did you encounter, and how did you overcome them?sizing elements on smaller devices
@marcfrancissImpressive solution to this challenge! 💯
I just notice that the password container and the 'Generate' button is overflowing on small-sized screen (375px). Upon checking your css, all I can suggest are to add 'box-sizing: border-box', replace 'max-width' with 'width: 100%' and lastly resizing paddings.
* { box-sizing: border-box; / ... other css / } .password-wrap label input { width: 100%; padding: 16px 16px; Note: 'auto' is invalid when using shorthands like 'padding:' / ... other css / } .settings button { width: 100%; padding: 16px 16px; / ... other css / }Hope this helps you somehow. Cheers!
- P@MattJM1007What are you most proud of, and what would you do differently next time?
Figuring out how to overlay icon and color over the image
What challenges did you encounter, and how did you overcome them?Was difficult to figure out the active state for the big image. but some googling helped to piece together a solution
What specific areas of your project would you like help with?any feedback on the html or css code is welcomed. Is there anything I could have written/structured better? Is there an easier way to do the image's active state?
@marcfrancissImpressive solution to this challenge! 💯 Specially on using semantic html structure.
A little added info would be to add 'position: relative' to your 'section.mainimg' so that the '.overlay' will follow its position.
section.mainimg { position: relative; } .overlay { position: absolute; width: 100%; // same width height: 100%; // and height as .mainimg top: 0; // same position as .mainimg left: 0; border-radius: 0.4rem; background-color: rgb(0, 255, 247, 50%); opacity: 0;Keep coding great solutions!
Marked as helpful - @joaoxavier-profissionalWhat are you most proud of, and what would you do differently next time?
I think i made a solid layout with css and really learned how to work with javascript
What challenges did you encounter, and how did you overcome them?When coding, i wrote the variables inside the functions, wich made my code won't work properly, since the reset button has it's own function and it needed to reset the variables from the inputs.
What specific areas of your project would you like help with?How to handle errors.
@marcfrancissImpressive solution!
I really like your javascript solutions and solid layout. May I only suggest to add placeholder in your input element (eg <input type='number' placeholder='0' />) for the user to have an indicator of what to input.
Keep up the great coding! Cheers! 🍻
Marked as helpful
