Skip to content
OverviewSolutions
5
Comments
4

Professora Bianca

@ProfessoraBiancaBrazil40 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

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

    Professora Bianca•40
    Submitted 2 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•40
    Submitted 4 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•40
    Submitted 6 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•40
    Submitted 6 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•40
    Submitted 6 days ago
    1 comment

Latest comments

  • ChrisTariah•80
    @ChrisTariahSubmitted 22 days ago
    What are you most proud of, and what would you do differently next time?

    I am happy about the level of similarity I was able to achieve between my solution ang the original design, and the minor detail I was able to style.

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

    The major challenge I faced while designing my solution was trying to separate sections and design some details, for example: the numbers on the table. Designing the table was also a bit challenging, I spent a lot of time trying to get the bottom border on my rows, without any results, before I figured out that the table borders need to be collapsed first.

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

    My design is not quite perfect, you will notice that the links do not align with the headers like in the original design any suggestions on how I can fix that, I tried using margin, padding and text align.

    Recipe Page Design

    1
    Professora Bianca•40
    @ProfessoraBiancaPosted 2 days ago

    Hey @ChrisTariah ! I liked a lot your solution! Congrats!

    I also had a lot of problems with this challenge...

    Some things I discovered:

    To make the dots align with the headers, you can use the

    ul::before { padding: 0; margin: 0; }

    or

    ul::marker { padding: 0; margin: 0; }

    I don't remember witch of them helped me, but you can test it and find out :D

    And juuuuuust a little thing:

    When we test the responsive design, the image doesn't take the full width of the <main> seccion! Neither the border-radius is set to 0. (It was hard to do it, but you should give it a try).

    Anyway, congrats and good coding!

    0
  • Dorm-24•40
    @Dorm-24Submitted 4 days ago
    What challenges did you encounter, and how did you overcome them?

    I didn't find anything difficult. But I think my font sizes and margins aren't perfect.

    Social links profile with flexbox

    1
    Professora Bianca•40
    @ProfessoraBiancaPosted 4 days ago

    Hey, Dorm! Your solution is really good!

    I noticed that you didn't include the cursor color change effect when we hover the links. Why? Did you choose to not include it? Or it was hard to implement?

    Anyway, I really liked your design!

    0
  • Professora Bianca•40
    @ProfessoraBiancaPosted 6 days ago

    Hey! Your solution is really good! The one thing I would change is the placement for the cursor type.

    It's on the .card class, so it makes the cursor imediatly change to pointer the moment we hover over the card.. It's the same for the color change of the title.

    The idea of making the shadow move... WOW. Amazing!

    I just think that the cursor change and the color change would be better if they were bound only to the title and not to the card itself.

    0
  • Professora Bianca•40
    @ProfessoraBiancaPosted 6 days ago

    Very nice

    0