Skip to content
OverviewSolutions
23
Comments
21

Corvida Raven

@SheGeeksAtlanta, GA680 points

Known for talking tech in plain English at SheGeeks.net, sharing my love for birds under @BirdingWhileBlack on Instagram, and designing/developing websites.

I’m currently learning...

React and MongoDB

Latest solutions

View more solutions

Latest comments

  • Bruno Banoczi-Cs•50
    @L4r4TW
    What are you most proud of, and what would you do differently next time?
    • I am most proud of the responsive design, a was able to create
    • Next time I want to make the CSS more structured
    What challenges did you encounter, and how did you overcome them?
    • The bigest challange was to make the header image full width on mobile phone. It was hard, because the element a placed the image inside has a padding, and I spent a lot of time to figure out how to make the image full width, without removing the padding on mobile device. ChatGPT and a lot of trial-error helped to overcome this problem. Here is the solution:
    /* Remove border radius on mobile screens */
@media (max-width: 768px) {
  /* Adjust the breakpoint as needed */
  .container {
    border-radius: 0; /* Remove border radius on mobile */
    margin: 0;
    padding-top: 0;
    /* box-sizing: content-box; */
  }

  .container img {
    border-radius: 0;
    width: 100vw;
    height: auto;
    margin-left: calc((-100vw + 100%) / 2);
    /* margin-left: -32px; */
  }
}
    What specific areas of your project would you like help with?

    • In the "Instruction section" the numbers wont change to Outfit font family. I don't know why.

    • In inspection mode (FireFox developer edition) if I change the view to "Galaxy S20 Android 11" and "Galaxy S10/S10+ Android 11" there is a few pixel wide stripe at the right, and looks like the page is a bit wider than the screen. I don't know why.

    Responsive recipe page

    2
    Corvida Raven•680
    @SheGeeks

    Congrats on completing this challenge. It seems you have fixed the issue of the instruction list numbers matching the correct font. Kudos to you on that!

    One thing I would suggest as a bonus action is to orient your media query towards bigger screens (desktop) rather than overriding your existing code to fit mobile screens. In doing so, you won't have to override anything, you will simply add to the existing code within the media query.

    Writing code from a mobile-first standpoint will always make transitioning images and other elements to bigger screens much easier and often uses less code.

    Marked as helpful
  • Kadir Yıldırım•380
    @kadiryildiri
    What challenges did you encounter, and how did you overcome them?

    I had a problem when centering 2 divs. I couldn't put the first div in the center, the 1st div was at the beginning and the 2nd div was at the end. By adding the 3rd div I was able to solve the problem.

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

    Is my use of Flexbox correct? What can I do for better placement?

    Blog preview card- Using Tailwind

    #tailwind-css
    2
    Corvida Raven•680
    @SheGeeks

    You definitely used flexbox correctly to center the card and structure the card contents.

    I noticed you're using an absolute value (px) to set the width of the card. When you need an element to be adaptable, like the width of this card, it's best to avoid giving it an absolute value.

    For a better approach set the card width to 100% (width: 100%) to always take up the available space in width and give it a max-width of your absolute value ( max-width: 384px) to limit how big it can grow.

    With these changes, your card will always take up the maximum amount of available width space no matter what screen size, but never more than 384px. In my solution I think I also set a min-width to prevent it from going below a certain size. That's optional though.

    Marked as helpful
  • Corvida Raven•680
    @SheGeeks

    Great work on making this almost pixel perfect replica!

    One thing I would suggest to improve what you created is to try applying a simple hover transition or animation on the buttons. Even the simplest of transitions can give your solution a little extra pop.

  • Sandrine Cazenave-Peyrasson•40
    @Sandrine-CP
    What are you most proud of, and what would you do differently next time?

    I am proud of the result that seems close the original design. I discovered Figma dev mode tool which helped me a lot. It needed some adjustments to be more responsive with percentage instead of fixed padding for the card position. I am also proud of the html structure and how I organized my style files with one file to manage css reset (I grabbed this from a feedback on my previous challenge : very precious, thank you).

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

    I had hard time with the position of the card to make it centered in both versions mobile and desktop. I've tried first with Figma's elements such as padding but didn't work well, not responsive at all. So I changed for percentages and max-width which seems better.

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

    I created a separate css file for the styleguide with variable which sounded like a very good idea. Unfortunately, in my index.css file, I couldn't have the full list of variables, even with @ import the styleguide.css file : I couldn't solve this even after installing css intelissense extension and reboot VS Code, so I opened the styleguide file to copy-paste the needed variables, not efficient at all : any tip on this would be much appreciated. I also had some difficulties with the .title (HTLM&CSS foundations text) in mobile version to make it wrap and I discovered the white-spacing : nowrap. It works, combined with font-size but I am not sure it is the best option...

    responsive blog preview card

    1
    Corvida Raven•680
    @SheGeeks

    Great progress on this challenge Sandrine. I believe you're on the right track and tackling this project with the right mindset.

    I was able to copy and paste all of the variables from the style-guide stylesheet into your index.css file right under the @import statements and they worked. I'm not sure what error you might have experienced, but I encourage trying again. Be sure to put them under the @import statements. If it works this time around, you can remove the import statement from the top of your index.css file.

    A tip for your future projects, try writing all of your styles in the same document for small projects like this. The reset stylesheet is fine as a separate file, but the styles you create for projects should typically be together in their own stylesheet.

    Hope this feedback is helpful. Kudos on the progress and keep going!

    Marked as helpful
  • Brian•90
    @brianlagranda
    What are you most proud of, and what would you do differently next time?

    I'm proud of my pixel-perfect solution thanks to your Figma design. It was very easy to tackle this challenge with all the tools provided.

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

    I think it wasn't a big challenge for me since I have a few years of experience. But I want to take the path of complete learning, you never know when you will find new techniques to solve a problem.

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

    I don't know if the html tags I used are the most accurate for this challenge.

    Pixel perfect solution using Flexbox and Custom Tailwind CSS

    #react#tailwind-css#accessibility
    1
    Corvida Raven•680
    @SheGeeks

    Congrats on reaching pixel-perfection with this challenge, Brian! 🥳

    Regarding the HTML tags, you should always use them in chronological order starting with h1. You can change your h2 into an h1 or you can add an h1 element and visually hide it. The latter can be taken as a bonus challenge to implement in an accessible way. 😉

    Otherwise, your solution is pretty solid. Keep going and happy coding!

    Marked as helpful
  • Corvida Raven•680
    @SheGeeks

    Hey Nikkehtine. I would suggest changing your background-color for the overlay to something like hsla(178.1, 100%, 50%, 0.5). You're missing the alpha value for your color. You can adjust the last value in the color code to adjust the transparency. Any value under 1 will give you a transparent effect.

View more comments