Skip to content
OverviewSolutions
23
Comments
21
Corvida Raven
@SheGeeks

All 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.

  • Corvida Raven•680
    @SheGeeks

    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.

  • Corvida Raven•680
    @SheGeeks

    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
  • Corvida Raven•680
    @SheGeeks

    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
  • Corvida Raven•680
    @SheGeeks

    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
  • Corvida Raven•680
    @SheGeeks

    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
  • Corvida Raven•680
    @SheGeeks

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

  • Corvida Raven•680
    @SheGeeks

    First, great work on this challenge. I like the way you kept everything centered even when the screen size is beyond the scope of the challenge. Also, nice comments in your code. This made it very easy for me to see where I can help and inspired me to be more proactive about this in the future.

    Suggestions

    The background svg for this challenge was easier for me using flexbox, though it did take me a while to figure out how to apply the repetition of the pattern in the same way as the design. Feel free to peruse my code on this challenge for inspiration.

    Regarding the box-shadow on the button, one way to quickly make and see changes to your code is to use Dev Tools in your browser. In this view, you can select the box-shadow property for the button and change the values in real-time by holding the up or down arrow keys or typing in a new number. In fact, any time you need to make uncertain changes to values Dev Tools can save you time and frustration.

    For the small space at the bottom on desktop, try changing this style on your image container for media query set to min-width: 1400px or remove it if it won't cause any problems:

    .img-container img:nth-child(2) {
    display: inline; 
}

    The inline property seems to be causing that gap. This value doesn't recognize size properties like height and width, which you need for an image to fill its parent container. Changing it to display: block will force the image to take up 100% width by default. Let me know if that works for you.

    Marked as helpful
  • Corvida Raven•680
    @SheGeeks

    Hi Riyana! Great work on this challenge.

    For empty :invalid inputs, you may want to look into combining :invalid with another psuedo-class. This article is a helpful reference for accomplishing this: https://www.stefanjudis.com/notes/target-non-empty-but-invalid-input-element-with-css/

    Also want to note that I don't see a mobile image when viewing your work from my phone. Shows on desktop just fine.

    Marked as helpful
  • Corvida Raven•680
    @SheGeeks

    Could you clarify what "tags" you're referring to?

    Great work on this challenge! I think the checkbox approach typically ends up being an accessibility nightmare, which your report mirrors. Since you used this approach, I would review the accessibility errors and fix them where you can.

    Feel free to check out my code on this challenge for a different approach and inspiration.

    Marked as helpful
  • Corvida Raven•680
    @SheGeeks

    For the HTML validation errors you're receiving, change section to div. Section tags should come with a heading (h2 and up) immediately after the opening tag for accessibility. When this doesn't happen you'll receive these kind of errors. Div tags don't have this requirement, which is why I'm recommending switching tags.

    This challenge is primarily about positioning elements. I spent time researching how each position property worked to better inform which one I should use and where it worked best. Feel free to take a look at my code on this challenge for inspiration.

  • Corvida Raven•680
    @SheGeeks

    Following up via Slack on the dynamic sizing comment:

    You might want to look into the min-width and max-width properties to help with this issue.

    Additionally, I’d recommend Kevin Powell’s course, Conquering Responsive Layouts, for more practice with responsive design. It’s free, but only one new module per day is unlocked. You can sign up now and just wait a few days or a week to begin with more unlocked modules instead of having to wait. Up to you, but the course is really informative and the modules are short while still getting the lesson across.

    https://courses.kevinpowell.co/conquering-responsive-layouts

  • Corvida Raven•680
    @SheGeeks

    Nice work! Only problem I have to note is that everything is cut off when viewing the page in landscape orientation on a mobile device (Firefox mobile browser). Things are too big and in turn getting cut off.