Latest solutions

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

I'm proud that I used JS

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

I have a little difficulty using functions. I don't know when to create one or not.

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

I'd like some help with functions. I know how to use them, I just don't know when to create one.

I'm open to any suggestions for my project.

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

I can do the project and also make it responsive.

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

plan for how to start the project and how to arrange the content properly.

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

Need reviews for the project and also help me to write compatible codes. also review about the responsiveness.

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

I proud of practice my flexbox skills and the next time I'd like to use css grid.

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

I found it a little difficult how to layout the html but by trying different approaches I did it.

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

Maybe in future projects, but any feedback is highly appreciated.

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

Ability to speedruning my life by stay up 4nights straight

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

I learned how to do the progress bar by using div, and span to put the fill in the bar

To see how you can add code snippets, see below:

HTML

CSS

To be able to do the circle indicator inside the progress bar, I used the pseudo-code ::after.

I included the code snippet of the value for the span::after.

    /* Add the indicator to progress bar fill */
    .progress_bar span::after{
        content:'';
        background-color:var(--PaleBlue);
        height:inherit;
        width:1rem;
        right: 20%;
        position:absolute;
        border-radius: 50%;
      }

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

Adding the tip to the quota box is a bit challenging for me so I did use for now a CSS Clip Path Generator.

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

I used this project to teach some of my students CSS.

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

I did not encounter any challenge.

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

None for this project

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

Hello FrontendMentor!

Just finished this challenge, please take a look :)

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

Responsividade, superei com mobile first.

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

This was a little challenge to get back to frontend development as I'm mostly a backend developer now.

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

It wasn't difficult for me to create this challenge, I really liked doing it.

No fue nada difícil para mi hacer este desafió, me gusto mucho hacerlo.

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

I was thinking of using a min-height or padding for the main, but I liked how it turned out with the padding property.

Estaba pensando en usar una altura mínima o un relleno para el principal, pero me gustó cómo quedó con la propiedad de relleno.

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

Padding and min-height

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

Practising some grid with autofill.

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

Some problems can be found on the Instagram gradient, but with ::before everything got solved.

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

I don't know if the top background is static or not, but I can't find any way to make it relative to its position and having the width of the parent element (body). Some recommendations??

Any other suggestions are welcomed.

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

i'm proud to say i was able to enjoy myself while doing this!!

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

centering the div, i looked at older projects and figured out how to implement that solution on this one

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

i'm just confused as to why the page has a scroll even though the container is not occupying the whole height

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

Very proud of the outcome of my first React project, and I was able to accuratly reproduce the design provided.

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

I have some trouble with React hooks which I need to focus on more.

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

proud I have managed to build a responsive component using some CSS properties I dint know about at first. I have learned a lot in this project, especially for the CSS part.

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

The biggest challenge was that, when I resized the screen to mobile view, the whole component would seem to overflow than the design I was using. I struggled with it at first. After some googling, I decided to start from mobile view then going up.

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

Based on my previous problem, support on mobile-first flow concept and media queries would be of much help.

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

I did it

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

None

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

Margin vs padding ?

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

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

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

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

The thing I'm most proud of is having been able to use Git since I had no idea what it was and in the process of setting it up I thought I was gonna have to upgrade my laptop due to a lack of storage space, but I ultimately found I way I could use it without having to do any etreme changes to my setup.

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

This is the firs challenge on the learning path and honestly I'm still not sure how this whole thing works. For example, the style guide stated thet I shoulde use a certain color for the background of the page, however, that specific shade of gray was much darker that the one shown in the example jpg provided, so I was unsure about wether or not I should have strictly stuck to the design guidelines or if I could take the freedom to do deviate from it in order to better match the example design. I ultimately ended up using an online color picker to better match the design example.

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

I feel like even for such a simple project my CSS ended up using way too many selectors and rules, so I'm only wondering if there was a cleaner, more concise way of doing it. Other than that, I have no specific questions.

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

creating css code to minimize the lines

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

center align the card

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

more practice in coding

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

Nothing

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

Nothing

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

Any help is welcome)

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

Happy with the layout and enjoyed brushing up on SCSS. Next time I would stick to a naming convention.

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

Creating the chevron underneath the share menu "bubble". I used the ::after pseudo element and styled it like this:

::after {
    content: "";
    position: absolute;
    bottom: -11.8px;
    width: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #48556a;
}

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

Semantics, accessibility, readability.

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

Revised Grid layout. Will improve the grid structure next time.

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

Had some difficulties setting the contents of grid items while managing the widths of each grid item on different screen sizes while main div was centered. To avoid this, instead of centering the div, I added a translateY of dynamic viewport height which will push the div to some extent to make it look centered.

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

managing the content sizes while main div was centered and screen sizes were changing.

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

This was my first try at responsive design, and my first attempt at media queries! I tried to complete the challenge with a mobile-first approach, which led to minimal changes in the desktop version.

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

Responsive design is definitely easier said than done... I felt like I was constantly checking different device sizes as I was honing in the right styles for the desktop version.

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

I'd love to know if there are ways to better streamline my code.

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

I am happy with the speed in which I completed the challenge. I also am happy with how I though through the problem/applied CSS strategies that I learned based off of a previous challenge.

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

My biggest challenge was probably centering the entire card - I had to think through how to go about centering a section within the body of an html page.

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

So I'm not able to see the image on the live site for some reason and I'm not sure why. I would also love to know whether or not the way I styled the page and structured the HTML is in line with best practices/accessibilty.

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

I am most proud of how much I have learned and how much easier this project was.

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

The different display properties and spacing were a challenge.

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

Any constructive criticism would be beneficial.

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

I'm just proud of the fact that I completed this project using React, Vite and TypeScript. the jump from plain HTML / CSS / Vanilla JS. to using all of this tooling was a bit overwhelming but after completing this project. I can see the myriad of benefits of using React and Typescript.

Vite seemed to be the best choice when it comes to choosing a bundler. that is because of it's speed and the ton of features it comes with.

I wouldn't do anything different next time. I'd like to practice this tooling as much as I can before jumping to fullstack frameworks like Next.js or Remix.

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

Since this is my first time using React + TS and Vite. I struggled on how to structure the components and CSS. I made each component along with it's types into their separate files.

As for the CSS I used only two files imported into the main JS entrypoint. I thought about using CSS modules however since I'm used to doing my work into a single CSS file and this project seemed small enough to do it I went with that approach.

I used BEM to assign classes to the different elements of my components and used a single CSS file to style them.

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

I would like to know if I should have used CSS Modules or used separate CSS files for each component?

I would like also to know how other developers think about the structure of my components, hooks and their types. and if they are readable and understandable.

Thank you for viewing my solution!

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

In this challenge I learned more about using HTML's 'picture' element, the CSS unit 'vw', and also using the ::before psuedo-selector. I have not used either very much in previous projects.

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

Positioning the hero images took a second, but using 'vw' and Flexbox I was able to achieve the desired results.

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

I would appreciate any tips/recommendations on improving my code quality. Thanks!