All solutions

What are you most proud of, and what would you do differently next time?

• I learned how to use BEM methodology for CSS.

What 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.

What challenges did you encounter, and how did you overcome them?

• 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

What specific areas of your project would you like help with?

• 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

What are you most proud of, and what would you do differently next time?

• I learned about the css to hide the spin button of input type number in different browsers
• I also learned how to apply different border radius to the div element. This was the result of many hit and trials
• I also learned about how to apply multiple linear gradients to create the background effect like the design

What challenges did you encounter, and how did you overcome them?

• Creating the border radius of the result div was challenging. As per design it should be 16px on left corners and 999px on right corners. But when 999px is applied it removes the border radius of left corners. So, it was many hit and trials. And finally found out that 100 to 150 px works for right corners.

• Also creating the background gradient of the top element was also challenging, finally figured out that we can lay one gradient on top of other to create the effect

What specific areas of your project would you like help with?

• feedbacks are welcome, especially regarding the accessibility

What are you most proud of, and what would you do differently next time?

• I learned about different aria attributes which will make screen readers aware about the state changes within the app
• aria-live, role="alert", role="status" were helpful to let screen readers know what is happening when they click button or there is an error submitting a form
• another important thing I learned regarding the popup within the app is to trap focus within the opened dialog box, so that keyboard users and screen readers have an idea on where the current active element is
• using the calc method was really helpful to figure out how to place the on hover border on nav links
• I learned a lot about how to build image slider
• I learned how to duplicate first and last item in the image list to create infinite slider
• And building the lightbox using the clone of image gallery was really fun

What challenges did you encounter, and how did you overcome them?

There were many items , popups and image slider to be included in the app. Making this app with a11y concerns were bit challenging. So, I divided the app into smaller components and worked on them individually and applied a11y related features on smaller components first. Then applied those same to the image sliders, light box modals etc.

What specific areas of your project would you like help with?

• Any feedback specially regarding the a11y are welcome
• I am learning on how to make web apps accessible to all users, so feedbacks are welcome

What are you most proud of, and what would you do differently next time?

• I learned about different aria attributes and its use cases
• I learned about the transition CSS property that I used for opening and closing the nav menu
• I also learned about how to set and remove focus on the element programatically using tabindex

What challenges did you encounter, and how did you overcome them?

I had some issue with remove focus on nav links when nav is not visible on mobile devices. Then I found out that settings tabindex = -1 will not focus the element and this can be done using JS. And for screen readers we need to set aria-hidden attribute to true.

What specific areas of your project would you like help with?

Any feedback is welcome, especially regarding the a11y

What are you most proud of, and what would you do differently next time?

I have learnt how to make accessible forms by

• making the form accessible using keyboard
• using autocomplete attribute and different tokens for different input types
• use of different aria-describedby attribute to describe more on what the input field is about and how to input values
• hiding redundant data from screen readers using aria-hidden attribute
• use of aria-invalid attribute to announce field is invalid and the error message based on aria-describedby
• how to make the toast message or modal accessible to the screen readers
• the use of aria-live, role="alert" and aria-atomic attributes help annouce the success message of toast in the solution

What challenges did you encounter, and how did you overcome them?

I had some issues using aria-invalid attribute and removing error messages when user starts filling forms

• I set the aria-invalid="false" on load in all the input elements, and when there is an error on submit then I changed attribute aria-invalid="true" so that screen-readers announce the input is invalid and error message is read out
• similarly when user starts typing on the input field which has error message, then the error-message disappears

What specific areas of your project would you like help with?

Is my solution accessible? How can I improve the a11y of the solution.

What are you most proud of, and what would you do differently next time?

• I learned about the details element which is semantic html tag for creating accordion.

• I also learned how to hide the default triangle icon of details element on webkit based browsers(Safari) using ::-webkit-details-marker selector

What challenges did you encounter, and how did you overcome them?

• I had some issues with accordion sections kept open even if the other sections are opened.
• In Chrome and Safari using the same name attribute on details element helped solve this issue.
• But in Firefox it doesn't work that way. It can only be done using javascript. But for this solution I tried not to use any JS.
• So, for future development I will add the JS to fix that issue

What specific areas of your project would you like help with?

Any feedbacks are welcome

What are you most proud of, and what would you do differently next time?

• I tried to make this app with accessibility in mind.
• I learned about the importance of alt attribute, figcaption element, legend element etc. and how it makes the web app accessible to all users who uses different technology to access the web.
• I used web components to build both the form and thank you card. I find it easy to separate the required HTML, CSS and JS for each component.
• And I used history API to share the state between two cards. Also used history API to show form card on back button press.

What challenges did you encounter, and how did you overcome them?

Whenever there is custom style for input elements like radio , checkboxes etc. I always choose the way of creating extra div and styling that with the CSS. And then hiding the actual radio buttons. It works but comes with downside as I have to make that div behave like radio button. In this solution I found out that using appearance: none CSS property I can add custom CSS to radio button itself. It was so helpful and straightforward

What specific areas of your project would you like help with?

Any feedback is welcome.

What are you most proud of, and what would you do differently next time?

• Built this app using basic routing based on Regex filtering
• history API based state management
• I tried to make routing work with this Single page application without using any libraries.

What challenges did you encounter, and how did you overcome them?

There were many challenges to build this multipage app without any routing libraries or full stack framework. Like when you refresh a page on any URL except the root URL, then it will redirect back to root page. I deployed it on Github pages and on refresh it always shows 404 page. So, I needed to add 404.html which will redirect to the homepage. But it was good learning experience.

What specific areas of your project would you like help with?

Open for feedback

What are you most proud of, and what would you do differently next time?

I learned how to,

• Pass the text to the custom web components. And this was possible by adding element in the CustomCheckbox component.
• use CSS pseudo selector :nth-child to show the strength meter bars and apply colors to it. I had some idea about passing number to nth-child which selects the corresponding child of an element. However, the use of :nth-child(-n + 2) was new to me, and it was really helpful for this case.
• set internal states to the custom web components and make use of those pseudo selectors in CSS to apply different styles.
• use RegExp constructor method to match the generated password and calculate the strength.

What challenges did you encounter, and how did you overcome them?

I had some issue making the custom range slider.

• Adding CSS to the built in input['range'] was too time consuming and it was not looking like in the design. So, I decided to make custom range slider.
• To make it work I had to handle events like mousedown, mousemove and mouseup. - And based on the width of the slider track and screen position of the thumb, we need to calculate the left or right movement based on how much the thumb was dragged across.
• And then I calculated the percentage of the movement to set value based on the max attribute of the default range slider.
• Similar, events listener for touch enabled devices were also done using touch events like touchstart, touchmove and touchend.

What specific areas of your project would you like help with?

Open for feedback

What are you most proud of, and what would you do differently next time?

• Used customized built in elements. Created TipCalculator custom web components using section built it element.
• Created separate module for validation of form that takes input element and checks the validation based on the added attributes.

What challenges did you encounter, and how did you overcome them?

I had issue with the button getting selected when Enter is pressed on input element after input value. This is normal form behaviour, when Enter key is pressed the first button on the form gets selected. To get around this issue I had to add keydown event on all the input element on the form and prevent default behaviour on Enter key press.

What specific areas of your project would you like help with?

Open for feedback

What are you most proud of, and what would you do differently next time?

• I tried using web components to build this project.
• Encapsulating HTML, CSS and Javasript into one component and making it reusable made me try web components.
• And important thing was I can use any class names in this component and it will not affect the styles of main page.
• However, CSS variables defined in main file were accessible which was very helpful. I didn't have to redefine it in my component's CSS.

What challenges did you encounter, and how did you overcome them?

• I had decided to use web components, but I was not okay with adding css in javascript files.
• Finally, I found a solution that vite provides to import css inline as strings. That way I was able to create separate css files and import it into my components javascript.

What specific areas of your project would you like help with?

Open for feedback

What are you most proud of, and what would you do differently next time?

I got to learn about,

• The aria-live attribute to make my form more accessible. This is announce the error messages who is using assistive technologies.
• Creating gradients and different configurations related to it.
• FormData and how it can be used to get user input from the form. It's really neat and handy feature.

What challenges did you encounter, and how did you overcome them?

Since there was only one input element of type email, I tried to use Constraint validation API to validate the form. And I tried to use :invalid , :focus:invalid pseudo states of input in CSS. As I have required attribute present in the input, it set the :invalid state for the input element on page load. So, invalid state related CSS was always showing in my app. So, to fix that I remove :invalid related CSS and used .invalid class instead to handle valid and invalid states from JS.

What specific areas of your project would you like help with?

Open for feedback

What are you most proud of, and what would you do differently next time?

• I got to learn about the css transition, transform and transform-origin property.
• I also got to learn about how to use CSS borders to create triangle shapes.
• I learned how to add event listeners and toggle share links block based on user interactions.
• I've also used window.innerWidth to decide on which share links styles to use for which screens. And update the viewPortWidth variable based on window resize so that screen size is updated and corresponding share link block is shown.

What challenges did you encounter, and how did you overcome them?

• managing styles for popup item in both desktop and mobile layout was a bit challenging
• I've used position property along side some calc() functions to make the popup work

What specific areas of your project would you like help with?

Any feedback and comments are welcome.

What are you most proud of, and what would you do differently next time?

I got to learn about object-fit, object-position, block-size property for images. It helped me a lot to layout images and match the design for all the layouts.

What challenges did you encounter, and how did you overcome them?

I had hard time figuring out how to lay the hero and footer image. In the hero image I tried different things,

• I use transform scale, translateX to move the images in hero section
• It worked fine, but in CSS I have to add lots of calc() functions and tweak to pixels to match the design. I since I used scaling it messed up with the horizontal size, so I have to use overflow-x hidden.
• So, I had to redo it using object-fit and object-position property. And it fixed the overflow issue and I didn't have to tweak the pixels to make it work.
• And then the footer image messed up. I've used object-fit to cover, so the image zoomed up. Then I found another solution to use block-size to fit the image aspect ratio.

What specific areas of your project would you like help with?

Open for feedback or comments

What are you most proud of, and what would you do differently next time?

I learned about the html element and elements for semantically representing image and its caption.

What challenges did you encounter, and how did you overcome them?

I had some issues to put the quotation mark svg image behind the text. I found out that to make the z-index work we have to set CSS position propery in that element.

What specific areas of your project would you like help with?

Open for feedback and suggestions.

What are you most proud of, and what would you do differently next time?

• I had a chance to learn about CSS Grid in detail,
• I learned about grid-template-areas in this project.
• I also learnt how to use grid-column and grid-row for the same layout.
• But use of grid-template-areas was clean and easy to understand.

What challenges did you encounter, and how did you overcome them?

I had some difficulties to show the top border on each section.

It was not matching with the design. I used border-top, it was rounding as per the border-radius CSS Then I used ::before pseudo element to add the top colored bar, now the pseudo element was covering the border-radius Then I found out that I have to set "overflow: hidden" to clip the child elements to fit within parent's border radius

What specific areas of your project would you like help with?

Feedbacks are welcome.

What are you most proud of, and what would you do differently next time?

I got to learn about HTML elements like

I've use PostCSS and its different plugins

learned about how we can separate CSS into different files and import into the main CSS file. used mixins which helps us to reuse CSS without repeating in different places. used nested CSS And to build this postcss I've used 'Vite'. It is very helpful tool for development and also for deployment of production build to Github pages.

What challenges did you encounter, and how did you overcome them?

• I followed mobile first layout and used flexbox to card component.
• then for desktop view I changed the flex direction to row and used flex: 1 to both image and product__info component
• this worked fine in Chrome and Edge, but firefox and Safari was giving issue
• later I figured out that I have to give 50% width to element to take the half width of the card element, even though I have already set flex: 1 to img element

What specific areas of your project would you like help with?

• Any feedback is welcome

What are you most proud of, and what would you do differently next time?

I got to learn about

• pseudo elements like ::before, ::after and ::marker
• table elements and different accessibility best practices when using this element

What challenges did you encounter, and how did you overcome them?

Most challenging part was styling the list styles. Used pseudo elements and CSS counter elements to overcome them.

What specific areas of your project would you like help with?

• is my HTML semantically used ? I was not sure what element to use for the "Preparation time" block. I thought about using the blockquote as per the design, but it felt like it doesn't fit with the blockquote's description. So, used section element.

What are you most proud of, and what would you do differently next time?

Learned about

• semantic HTML
• mobile first development approach
• CSS Flexbox.

What challenges did you encounter, and how did you overcome them?

While using Flexbox, some browsers didn't support flex-gap. So, tried to use margins on the element instead. But later figured out that some old versions of those browsers doesn't support that.

What specific areas of your project would you like help with?

I am using media queries for responsiveness. Is there a way to do it without media queries?

What are you most proud of, and what would you do differently next time?

I got to learn about

• CSS grid layout
• media queries
• background-* properties
• hover states on the element

What challenges did you encounter, and how did you overcome them?

It was challenge to match the blog image in the mobile layout. Mobile design was showing the scaled version of the image. Then we used background-image to fix that issue.

What specific areas of your project would you like help with?

• does my work statisfy the accessibility guideline
• use of pseudo states - is this the correct way to use it

What are you most proud of, and what would you do differently next time?

Learned the use of Google Fonts and CSS variables

In our future, we are planning to use PostCSS and Vite to improve our development process

What challenges did you encounter, and how did you overcome them?

Difficult to match the design per pixel.

Used CSS like line-height and letter-spacing to almost match the design.

What specific areas of your project would you like help with?

• Is semantic HTML used properly?
• Is my html following accessibility guidelines?
• I am not using any classes for this project, I've used element directly in CSS. What do you suggest for the future projects?