Skip to content
OverviewSolutions
13
Comments
11
Itoro (Celine) James
@CelineJames

All comments

  • Itoro (Celine) James•200
    @CelineJames

    well done, it looks quite identical.

  • ortiz-antonio•270
    @ortiz-antonio
    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
    @CelineJames

    well done, keep up the work

  • P
    Rupali•890
    @rupali317
    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
    @CelineJames

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

  • Itoro (Celine) James•200
    @CelineJames

    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.

  • Nitr0Skay•100
    @Nitr0Skay
    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
    @CelineJames

    welldone

  • P
    MAGENE Sem Joel•320
    @Jomagene
    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
    @CelineJames

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

  • Itoro (Celine) James•200
    @CelineJames

    Welldone! However just for a correction, that I was as well given when I submitted my solution. You can use flex box to position and center things vertically and horizontally on the body. ‘Body { Min-height: 100vh; Display: flex; Justify-content: center; Align-items: center; }’

  • Cintia Vicente•80
    @cintiavic
    What are you most proud of, and what would you do differently next time?

    I think it looks pretty much like the provided design

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

    spacings between elements

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

    Recipe page using HTML CSS flexbox and grid

    1
    Itoro (Celine) James•200
    @CelineJames

    Perfect!!! i must commend your work, welldone. did you have access to the figma file?

  • Maian Lucas de Jesus Oliveira•120
    @MAIAN-HUNTER
    What are you most proud of, and what would you do differently next time?

    grid responsive

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

    responsive containers

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

    grid responsive

    social-links-profile-main

    #accessibility
    1
    Itoro (Celine) James•200
    @CelineJames

    well done you could make use of flex box to center items horizontally and vertically. an advice i got from someone here as well, try body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; }

    Marked as helpful
  • Sadeem•60
    @sadeemmuk
    What are you most proud of, and what would you do differently next time?

    I will try to practice different kind of template such as landing page and using flex and grid.

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

    Challenges that I countered are The width of each element and how to set the similar one as in the sample but kicked it off I organize them.

    It is easy project I worked with responsive design and style.

    #accessibility
    1
    Itoro (Celine) James•200
    @CelineJames

    well done, try using the figma starter pack or the style guide. it will help.

  • Ibtehaj Ali Mirza•200
    @Ibtehaj-Ali-1
    What are you most proud of, and what would you do differently next time?

    Frontend Mentor - QR code component solution

    This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

    Table of contents

    Note: Delete this note and update the table of contents based on what sections you keep.

    Overview

    Screenshot

    Links

    My process

    Built with
    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    What I learned

    I learned a lot about CSS Flex property, margins & paddings.

    Author

    QR code Component

    #accessibility
    1
    Itoro (Celine) James•200
    @CelineJames

    job welldone

    Marked as helpful