Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions20Comments16

All comments

  • Corvida Raven• 570

    @SheGeeks

    Posted

    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

    @kacperoni

    Submitted

    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• 570

    @SheGeeks

    Posted

    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

    @DoyeDesigns

    Submitted

    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• 570

    @SheGeeks

    Posted

    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• 570

    @SheGeeks

    Posted

    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

    @Wedrussowo

    Submitted

    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• 570

    @SheGeeks

    Posted

    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• 570

    @SheGeeks

    Posted

    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

    @arfarobs

    Submitted

    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• 570

    @SheGeeks

    Posted

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

    0
  • HYDROCODER• 555

    @HYDROCODER

    Submitted

    I used css grid for this challenge. The mobile first went easy but I found it difficult to place things in the desktop approach; I was able to do it properly once I used some properties of css grid like align-self. I couldn't do a few things properly: applying the background svg in desktop version in a good way, **box-shadow for the button **(I was tired of finding the correct values for box-shadow so I skipped that) and in desktop version I couldn't shrink the outer container properly, so there is a small space left at the bottom of the image in desktop version, although it is faintly visible I need to find a way to fix it. There is an accessibility issue with the images. So, feedback in these areas as well any part you think can be improved would be helpful.

    Mobile-first and responsive base-apparel-coming-soon design

    1

    Corvida Raven• 570

    @SheGeeks

    Posted

    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

    1
  • Riyana Gueco• 495

    @rngueco

    Submitted

    Hey!

    I wasn't too sure what to put in the JavaScript validation side of this project, but I removed the required attribute for the email input element to prevent the :invalid styles from firing right at the start and did that check on the JavaScript side instead.

    Aside from that, a simple pattern matching using the regex seen from MDN's docs.

    I consider myself a JavaScript newbie, so please advise or give feedback. 🙏

    Thanks!

    Update: I have updated my solution based on feedback. The email field is now required, but the error message will not fire unless the user has focused and then removed focus on the field. Additionally, validity is now being checked before form submission, returning the appropriate error message based on whether the email input is empty or invalid. In case of user bypassing the required field and submitting an empty input anyway, an extra validation step is still checked on form submit.

    Base Apparel coming soon page with HTML, Sass, and JavaScript

    2

    Corvida Raven• 570

    @SheGeeks

    Posted

    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

    1
  • Tyson W• 305

    @Tyson-Wellings

    Submitted

    Hey! I made a small change to the layout where I had the accordion container expand as the accordion expanded. To make the accordion expand on click I used an input check box to trigger changes. I have seen other solutions on stack overflow to similar problems use <a> tags too. Would love to hear explanations for why <a> tags may be better for this purpose. If any feedback comes to mind please do not hesitate to write it down as it helps me develop my programming skills :)!

    Responsive FAQ with collapsible sections HTML & CSS only

    1

    Corvida Raven• 570

    @SheGeeks

    Posted

    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

    0
  • Corvida Raven• 570

    @SheGeeks

    Posted

    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.

    0
  • Corvida Raven• 570

    @SheGeeks

    Posted

    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

    1
  • Corvida Raven• 570

    @SheGeeks

    Posted

    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.

    0
  • Mardiya• 55

    @Mardiya07

    Submitted

    Hey guys🖐😊. I tried my first frontend mentor challenge with the 3 column card. Please take a look at it and give me feedback on what you think. What you think i could do to improve, omit or even better practices you think i should take up. I am open to all of them. Thanks in advance.

    A 3-column preview card component

    2

    Corvida Raven• 570

    @SheGeeks

    Posted

    Hi Mardiya. Great work on completing this challenge!

    One thing I would suggest is increasing the line height of your text using line-height.This will add a little more space between the lines to match up with the design.

    I second most of Fola's suggestions with some additions and differences:

    1. You do need a meta description in the head of every webpage, but I wouldn't worry too much about SEO. I would encourage researching website header information and semantic html markup, as a lot of SEO practices are tied to these basic building blocks.

    2. For button versus a tag, if the button takes you somewhere else, it's a link and you should use the a tag. If the button is for submitting information, use button.

    Lastly, can vouch for Kevin Powell's videos as well. He's really good with explaining concepts in a simple way to understand.

    Again, great work! I think adding all of your CSS to an external stylesheet is one of the biggest improvements you start making to your solution. It'll be good practice, allow you to "see" what's going on with your CSS more easily, and manage it better as you get more feedback and grow in your understanding. Keep going!

    2
  • Corvida Raven• 570

    @SheGeeks

    Posted

    Great work here Lucas!

    I second Rayane's suggestions and would add adjusting your character spacing on the button so that the letters aren't so spread out. You can use decimal values instead of whole numbers if that helps (i.e. .1ch).

    Some of your HTML and accessibility issues from the report can be reduced by switching the section to a div or by adding a visually hidden heading to section. As noted in the accessibility area, using aria-label attributes on your inputs would take care of the lack of labels neccesary for those who need assistance browsing the web. Take some time to look into web form accessibility to get a better understanding of why you're getting these particular errors and how other options to resolve them. There are easy solutions to implement without changing your code.

    Your form validation is great! The only thing I would suggest adding is to also validate when someone tries to submit an empty form. If I do this on your solution, no error messages appear, though they should.

    Last thing, you added an outline to the inputs to signify when someone is entering information. However, the challenge also requests that outline be applied to the hover states of all interactive elements. You have a hover state for your button. I'd add one for the input fields too and use the same styles that you have for active input fields.

    Again, great work and really impressed with your form validation!

    2
  • Corvida Raven• 570

    @SheGeeks

    Posted

    Nice work on your second challenge!

    One suggestion for getting the background to match the design is to replace the linear gradient with just the pink color (rgb(255, 122, 122)) listed in the style guide. Adjusting your margin-top values could help bring both sections down a bit more. The "try it free" text is a little hard to read. Wouldn't hurt to make it a little bigger for readability.

    One thing missing is the hover states for your inputs. Check the design files for more info on this. Easy to miss, but this step is part of the challenge as well and very easy to add.

    0