Skip to content
OverviewSolutions
7
Comments
6
Professora Bianca
@ProfessoraBianca

All solutions

  • Javascript... Here we go again!

    Professora Bianca•100
    Submitted about 14 hours ago

    Hello again! 👋

    This time, I had a much easier time using grid!

    I also gave it another try at Javascript coding for this project. I think it's pretty neat!

    Even though it could be done in CSS, I thought it would be nice to practice doing it in JavaScript.

    Cool Stuff: I added some animations. Feel free to explore and find out what I did ! 😁

    A problem: I wasn't able to access the 1.png/2.png inside the images folder when coding the Javascript. That's why the images are outside the folder... 😥

    Some questions:

    • How can I access images inside a folder in Javascript?

    • How can I improve my codes?

    • Did you liked the cool stuff I added? What would you do differently?

    2 comments

  • Usage of PICTURE element in HTML

    #pure-css
    Professora Bianca•100
    Submitted 2 days ago

    Hello again! 👋

    This project was built using display flex, BUT:

    At first I tried to do it with the grid display, creating 2 columns and 6 rows.

    | image colum | text colum|

    | image | text1 |

    | image | text2 |

    | image | text3 |

    | image | text4 |

    | image | text5 |

    Then I had a lot of dificulty organizing and managing the texts through the rows of the grid.

    It felt too complex for something that could be easily achieved by using flex.

    Also, it took me a while to get the <picture> element to work properly.

    As you can probably see, the image has a fixed width in CSS. This makes the responsiveness not work well.

    The problem: When I tried using % or rem , the image would either get too large or too small, never the size I needed.

    Cool Stuff: I added some animations beyond just the color change of the <button>. Feel free to explore and find out what I did ! 😁

    Some questions:

    • Is flex really the best option here?

    • How can I better fit the image so that responsiveness works?

    • When I added the animation to the price, the <span> was also animated, and I couldn't make it stop. Any advice?

    1 comment

  • 911 what's your emergency? HELP I HATE LISTS AND TABLES!!!!

    Professora Bianca•100
    Submitted 6 days ago

    And so... It was HELL.

    É de cair o c* da bunda!¹

    ¹Famous brazilian expression

    I had a lot of problems with this design.

    (as you can probably see in the .CSS file)

    At first, what appeared to be simple was a hell of a challenge. Like the lists:

    • I wasn't capable of making the wraped text to align with the begining of the paragraph.
    • I had difficulty adjusting the line height of the text vs the list + list gap.

    (but I learned how to do it... maybe?!)

    • The alignment of the markers (and color of it) vs text was a very hard thing too.. I did make it but maybe it isn't the best way of doing.

    Note: I didn't used some colors offered by Frontend Mentor... Was it my fault or there where more colors than needed?

    Don't even make me metion the table at the bottom

    It would be really helpfull some tips and tricks to make a better CSS code.. Mine is a complete junk!

    ALSO:

    I tried to use the clamp() but it didn't work properly.. I can use some advice too!

    3 comments

  • First time without the Figma design file..

    Professora Bianca•100
    Submitted 8 days ago

    Based on reviews of previous challenges I've made from Frontend Mentor, this time I focused on making my HTML structure a tittle bit cleaner and also add the "alt" texts for the images.

    This challenge is the first one that I make without a Figma design file, so I had to do my build only from my interpretation and understanding of a .png printscreen offered by the Frontend Mentor.

    I've used a mix of flex and grid displays through the design, but I admit that I don't fully understand the difference between the two of them. In general, I use what I think it's going to work...

    1 comment

  • First time trying Javascript.. GitHub didn't liked it. (Vercel WIN)

    Professora Bianca•100
    Submitted 9 days ago

    It was very hard to deploy this challenge on GitHub Pages...

    After getting help from Frontend Mentor users, I managed to make the CSS work, but the Javascript still doesn't..

    Anyway, I think it was pretty close this time :)

    -UPTADE

    Uploaded the files to Vercel and.... IT WORK'S!!!

    2 comments

  • First time trying Javascript

    Professora Bianca•100
    Submitted 9 days ago

    It was very hard to deploy this challenge on GitHub Pages...

    After getting help from Frontend Mentor users, I managed to make the CSS work, but the Javascript still doesn't..

    Anyway, I think it was pretty close this time :)

    -UPDATE

    Got it working on Vercel!!!!

    2 comments

  • CSS grids

    Professora Bianca•100
    Submitted 9 days ago
    1 comment