Skip to content
OverviewSolutions
23
Comments
21
Corvida Raven
@SheGeeks

All comments

  • Bruno Banoczi-Cs•40
    @L4r4TWSubmitted 2 months ago
    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
    @SheGeeksPosted 2 months ago

    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
    1
  • Kadir Yıldırım•260
    @kadiryildiriSubmitted 3 months ago
    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

    2
    Corvida Raven•680
    @SheGeeksPosted 3 months ago

    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
    0
  • Corvida Raven•680
    @SheGeeksPosted 3 months ago

    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.

    1
  • Sandrine Cazenave-Peyrasson•40
    @Sandrine-CPSubmitted 3 months ago
    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
    @SheGeeksPosted 3 months ago

    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
    0
  • Brian•90
    @brianlagrandaSubmitted 3 months ago
    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

    1
    Corvida Raven•680
    @SheGeeksPosted 3 months ago

    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
    1
  • Corvida Raven•680
    @SheGeeksPosted almost 2 years ago

    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.

    1
  • Kacper Kubacki•30
    @kacperoniSubmitted almost 2 years ago

    My third challenge so far. Feel pretty good with flexbox, learned more about box-shadow, margins and paddings. Not sure if I used h1, h2, h3 tags properly please let me know!

    Summary challenge made with flexbox

    1
    Corvida Raven•680
    @SheGeeksPosted almost 2 years ago

    Congrats on completing this challenge Kacper! A note for your question about headings, they should always be listed in order from h1 down to h6. Your h3 tag for the result title should actually be h1. The results count can be wrapped in h2 or you can wrap it in a p tag and add a class in CSS to style it like a heading. Here's an class example:

    .result-count{
font-size: 2rem;
color: #fff;
/* any other styling you want */
}

    Headings are labels for sections of a site and used to establish hierarchy with h1 given the most importance. The title of a website is usually wrapped in h1. However, article titles might be wrapped in h2 or h3 depending on other elements on the page. Bigger text does not always have to be a heading.

    I would also suggest using another measurement besides vh as your default sizing measurement for everything. px, rem, or em, would be more appropriate. You want to use a measurement like vh more intentionally, like when creating a hero section on a page and wanting it to take up the entire screen.

    Hope this feedback is helpful and congrats on finishing the challenge.

    0
  • Edoye•170
    @DoyeDesignsSubmitted almost 2 years ago

    Can I put the header and footer tag inside the grid container/wrapper?

    Should the div container be a main or div tag with a class main?

    If I were to animate the hamburger menu icon using CSS how do I still give it the function to open and close when clicked on?

    Any feedback is very much appreciated

    I built this landing page using CSS grid

    1
    Corvida Raven•680
    @SheGeeksPosted almost 2 years ago

    Nice work on completing this challenge Edoye!

    To answer your questions, your header should remain outside of the grid container/wrapper and body, but your footer should be included within body. Whether you want to include it in the container/wrapper is up to you and the design you wish to achieve, but it's not necessary.

    You should use main instead of div with a class of main. It's the same thing, but using main is semantically correct and accessible.

    I suggest searching google for code examples of animated hamburger menus with CSS only because there are many ways to accomplish this. You'll find plenty of code snippets to examine and choose what works best for your code.

    Marked as helpful
    1
  • Corvida Raven•680
    @SheGeeksPosted almost 2 years ago

    Add a class of rounded-# replacing the number sign with any number from 0-9. If you're going to apply this to the image instead of the div, you may need to remove the existing border-radius styling on the image. You can find more documentation on this here.

    I like the way you incorporated your attribution into the layout. I would go with a lighter/paler blue than the QR code and slightly smaller text than the rest of the card to create some visual hierarchy with your attribution.

    Hope these suggestions are helpful and nice work. Keep coding!

    Marked as helpful
    0
  • Wedrussowo•80
    @WedrussowoSubmitted almost 2 years ago

    Hi!

    This is my solution of NFT preview card component, with the Frontend Mentor.

    I started to use flexbox so often, I don't know if it's proper. Please let me know, after reviewing the code ;)

    After this project I started to:

    • understand better process of matching the picture to the container
    • feel more comfortable with the clamp function
    • also started to feel more comfy with the scale, translate, positioning

    Don't know if there is maybe better idea to achive hover effect(the eye, and cyan background color) on the NFT picture. If you have one, please share it with me!

    Any words on how to improve the code and simplify it are welcome. Thank You!

    NFT card with the little avatar-hover effect

    1
    Corvida Raven•680
    @SheGeeksPosted almost 2 years ago

    Great work on achieving the design, Wedrussowo! Here are a few tips I have regarding your code that I hope can be helpful now and down the road.

    As a rule of thumb, header should always be outside of the main tag. It's best practice to put it right above main. The code you've written in header would be more appropriate for a div. Header is for nav links and introductions. This is an easy fix in your code - just change header to div. It shouldn't break anything to make this simple change right now.

    Take some time to dig into semantic HTML structures for best practices. Here's official documentation about main with a code example and a here's a visual of a typical webpage structure with these tags. This challenge doesn't really require a header, but other challenges will.

    As for your flexbox concerns, you can remove Flexbox on the .icon-view class and create a new ruling specifically for the icon with the following values to center it again:

    position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: unset;

    When using absolute positioning, you don't need flexbox. You may have to unset the width on the icon to reduce its size because you applied max-width:100% to all images in your header within .main-picture img. If you only target the first image instead of all images you won't need width:unset.

    It's not uncommon to use Flexbox a lot. I find that the better I structure my code, the less I have to turn to flexbox. Maybe in a future challenge you can also practice using CSS Grid, which is just as powerful as flexbox.

    Hope the feedback and links are helpful. Keep coding! :)

    Marked as helpful
    0
  • Corvida Raven•680
    @SheGeeksPosted almost 3 years ago

    I'm not sure about best practices with opacity, but I used that property as well to get the effect . Alternatively, you could try using visibility instead.

    Marked as helpful
    1
  • Arthur Roberts•410
    @arfarobsSubmitted almost 3 years ago

    A little bit more challenging with the hover effects.

    I found that the shadow was hard to make I couldn't get that right.

    Any feedback would be great (especially on correct practices whilst coding).

    //corrected some of my accessibility mistakes. 03/02

    NFT preview card component using flex box

    2
    Corvida Raven•680
    @SheGeeksPosted almost 3 years ago

    The box-shadow was a little tricky as well, but I think you did a great job on it.

    0