Skip to content
OverviewSolutions
13
Comments
11

Itoro (Celine) James

@CelineJames200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Itoro (Celine) James•200
    @CelineJamesPosted about 1 month ago

    well done, it looks quite identical.

    0
  • ortiz-antonio•270
    @ortiz-antonioSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I plan to break down my components further to improve reusability. I'm not entirely comfortable maintaining separate components for the success dialog and confirmation page rather than reusing a single component.

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

    In this project, I'm experimenting with UnoCSS and design tokens while implementing a progressive enhancement approach for form validation. This involves starting with HTML5 native validation and extending functionality with JavaScript

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

    Any recommendations or suggestions would be greatly appreciated.

    Newsletter signup form: Eleventy webc, UnoCSS

    #accessibility#eleventy#cube-css
    2
    Itoro (Celine) James•200
    @CelineJamesPosted about 2 months ago

    well done, keep up the work

    0
  • P
    Rupali•870
    @rupali317Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am able to craft the tooltip's arrow using css tricks. Border width help determine the dimension of the arrow. 0 dimension is crucial in achieving the look along with making the adjacent borders as transparent. Removing the adjacent borders instead of making it transparent will not function as everything will be invisible especially when the dimension is set as 0.

    .tooltip-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: var(--space-s-1) solid transparent;
  border-right: var(--space-s-1) solid transparent;
  border-top: var(--space-s-1) solid var(--color-neutral-5);
}
    What challenges did you encounter, and how did you overcome them?

    Creating the tooltip's arrow using CSS was relatively challenging. I took inspiration from resources and I understood the nitty gritty details about how an arrow is created using 0 dimension approach and relying on border properties.

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

    What do you think of the accessibility of my solution? (especially related to summoning and dismissing the tooltip)

    HTML code snippet

    
  


   ...

    JS code snippet

    function toggleShareButtonAttributes() {
  if (tooltip.classList.contains("invisible")) {
    shareButton.removeAttribute("aria-describedby");
    shareButton.setAttribute("aria-expanded", "false");
  } else {
    shareButton.setAttribute("aria-describedby", "tooltip");
    shareButton.setAttribute("aria-expanded", "true");
  }
}

    Created the article preview component using vanilla JS

    #accessibility
    1
    Itoro (Celine) James•200
    @CelineJamesPosted 7 months ago

    Well done, I have also learnt something from your shared code snippets, Thank You.

    1
  • Itoro (Celine) James•200
    @CelineJamesPosted 7 months ago

    welldone, although the line-height in your heading seem to be too much, and the grid gap is smaller, overall you have an excellent result.

    0
  • Nitr0Skay•100
    @Nitr0SkaySubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    This one I followed the Kevin Powell's tutorial for Begginers: https://www.youtube.com/watch?v=JFbxl_VmIx0

    Four Card Feature Section

    1
    Itoro (Celine) James•200
    @CelineJamesPosted 7 months ago

    welldone

    0
  • P
    MAGENE Sem Joel•320
    @JomageneSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully implementing the black transparent overlay using the ::before pseudo-element instead of an absolute positionised div. I'm proud of utilizing SCSS variables to streamline my styling process and using nested styles. I used flex box but Next time, I would explore advanced layout techniques like CSS Grid to handle complex designs more efficiently.

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

    One of the main challenges I faced was getting the black transparent overlay to appear correctly over the image. I was accustomed to using an absolutely positioned div, which required matching the height and width with the image dimensions each time it changes. I overcame this by using the ::before pseudo-element on the figure with top: 0, bottom: 0, left: 0, and right: 0, ensuring the overlay was positioned correctly over the image.

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

    I would appreciate feedback on how to further optimize my SCSS, especially regarding best practices and responsive design. Additionally, any tips on improving accessibility throughout the project would be valuable.

    Responsive product preview card using sass and flex box

    #accessibility#sass/scss
    1
    Itoro (Celine) James•200
    @CelineJamesPosted 8 months ago

    Wonderful replicate, and it is exactly the same. i have no contribution to make, welldone.

    0
View more comments