Skip to content
OverviewSolutions
22
Comments
235
Anna Leigh
@brasspetals

All comments

  • Vanza Setiaβ€’27,775
    @vanzasetiaSubmitted over 2 years ago

    Hello Everyone! πŸ‘‹

    It has been a while since I submitted the last solution. That's because I had an exam and my internet connection was down. πŸ˜…

    Anyway, it feels good to be able to submit another solution. This is my first challenge for doing a two-page website. It's also the first time I create a map. Luckily, the Leaflet quick start guide is easy to follow.

    I have several questions:

    • On the location page, there's a map image. The alternative text for it is "Map of Modern Art Gallery". I don't know that it is enough for screen reader users. Maybe, I should explain the location in great detail like "Modern Art Gallery map. It's located at 99 King Street near International Tennis Hall of Fame..." (?). I think that would be overly descriptive. So, is telling the screen reader users that it is a map of "someplace" enough?
    • Still on the location page, I am not sure about the HTML markup. There are these texts, "99 King Street", "Newport", "RI 02840", and "United States of America". So, my question is, should I put each text as its own paragraph or I wrap the text with one paragraph element and then use span to move each text to seat on its own line? (Or am I just overthinking about this πŸ˜†)
    Like this?

<div class="area__wrapper">
  <p class="area__street">99 King Street</p>
  <div class="area__details">
    <p class="area__city">Newport</p>
    <p class="area__state">RI 02840</p>
    <p class="area__country">United States of America</p>
  </div>
</div>

Or like this?

<p class="area__wrapper">
  <span class="area__street">99 King Street</span>
  <div class="area__details">
    <span class="area__city">Newport</span>
    <span class="area__state">RI 02840</span>
    <span class="area__country">United States of America</span>
  </div>
</p>
    • To simplify my second question, is it should be read as one sentence? (Or it doesn't matter πŸ˜†)

    I have created the site without Leaflet JS. The map is an image that has been provided by Frontend Mentor. Here's the link: https://noleaflet.netlify.app/. This might be useful to understand my first question.

    Any questions on the technique that I'm using are welcome! 😁

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! πŸ˜€

    Thanks!

    Art Gallery Website | Leaflet JS

    #accessibility#bem#sass/scss#lighthouse
    3
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Vanza! Another excellent job! πŸ™Œ

    To your questions:

    • I think the alt text is fine, especially since the all the location information is in the next section.
    • When it comes to the HTML on the location page, I think using p tags, as you've done here is just fine. You could change the .area__wrapper div to an address element for slight semantic improvement, but I'm not sure it's necessary.

    Hope your exams go/went well! Looking forward to your next solution!

    Marked as helpful
    1
  • The Burrito Doggieβ€’1,260
    @BurritoDoggieSubmitted over 2 years ago

    Hello everyone.

    I am a kid in 7th grade trying to learn code.

    I finally uploaded my second project!!!!!! ^^

    (On my last project APG helped me, but this time I did this challenge by myself)

    I'm also not a Pro at coding so I'm expecting a lot of correction! πŸ˜†

    Feedback will be appreciated!!!

    My second project on Frotend Mentor

    4
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi Alyssa! πŸ‘‹

    It’s so awesome to see you finally submit another solution! Sorry I’m a bit late to comment (been ill, but better now!). You’ve already gotten some great advice from Tesla Ambassador & Shashree. I agree that instead of the two margins on the image, you could simply add margin: 15px to the card, and then add any extra needed margin/padding for the text to the .paras div. Semantically the first paragraph should be some sort of heading (h1, h2, etc.) rather than a p tag, as Shashree already mentioned.

    The only "new" piece of advice I have is typically it's best not to have a set height for elements, letting the content determine height instead. This helps to avoid overflow issues. For example, try adding more text to the second paragraph, and you'll see that the text will soon overflow the card. However, if you remove the height from the card or switch it to min-height, the card will expand with the text.

    Again, great to see you submit another solution and looking forward to the next one! πŸ˜„

    Marked as helpful
    1
  • Fluffy Kasβ€’7,695
    @FluffyKasSubmitted almost 3 years ago

    Hey guys,

    This is my first React project. Well... there are some part I'm satisfied with and others, less so >.< I'm quite happy with an overall layout, especially the mobile and tablet view. The backdrop filter also looks super pretty (too bad Firefox still doesn't have support for it).

    What I'm not happy out is the layout shifts. Especially in the Crew tab, the content "jumps around" a fair bit. It only happens on the initial load. Tried to find a way around it with some animations but I'm still a bit clueless how to solve it, so if anyone has any idea, I'd be happy to hear it.

    I'd love to hear other feedbacks too on how to improve my work, as usual ^^ Have a great day!

    Space tourism - with React and Framer Motion

    #react#react-router#framer-motion
    2
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Fluffy Kas! I’m a bit late to this party, but…

    I struggled with a similar issue in the tabbed section of my Dine solution. Although we used different tools (React & Framer Motion vs. Svelte), hopefully I’ll be able to help a little here.

    The shifting happens worst on initial load on the technology and crew pages, and unfortunately it also occurs to a lesser degree with every tab change on the crew page.

    For the crew page, I believe the text is shifting due to the change in container height caused by the images all being different sizes. Setting a min-height on the container equal to the height of the tallest image should help prevent this. The crew image shifting looks to be caused by the image flex container changing to the the size of the new image before the old one leaves the DOM. Is there a way you could change your animation to have the old one fade out before the new one loads? I apologize, as I’m not familiar with framer motion. Perhaps you can use a setTimeout function to give the old content time to leave the DOM before the new content enters? Again, another option might be to set a min-height and min-width on the image container so the size isn’t shifting with each tab change.

    To prevent the initial flashing, you have to find a method to pre-load your images. For me this resulted in a major refactor, putting all the content in the DOM (rather than dynamically loaded as you have done here), and toggling display: none along with some animations. However, given your img srcsets are pretty simple, you might be able to use preload or do something similar to this method in React.

    Why do tabbed sections have to be such pain? 😭 Your solution overall is fantastic, though - and the animations on the destination page are great! I really like the subtle rotation of the moons (and Mars!). πŸ™Œ

    Marked as helpful
    1
  • Karol Binkowskiβ€’1,640
    @GrzywNSubmitted over 2 years ago

    Hey!

    I'm really happy with the result :)

    I turned my spaghetti JavaScript code into cleaner and more maintainable OOP import/export module based code. Animations are made using GSAP and ScrollTrigger plugin. If you know SOLID principles or some design patterns and you think I could have done something better - let me know, since it's my first OOP JS project after all. I'll probably code the next one in TypeScript.

    The solution isn't pixel perfect, but it's not that bad. I spent some time working on it, but I thought it wasn't worth it, especially improving "partners" section was hard. (I didn't want to make a modifier class for every image and then compare it to the design, since this section is broken in Figma).

    Feel free to test out things and check out my code. I might have missed something, like I always do. Any helpful feedback is appreciated!

    Mobile-first solution with SCSS && GSAP / ScrollTrigger animations

    #accessibility#bem#gsap#parcel#sass/scss
    3
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Karol! πŸ‘‹ Great job on this challenge! The GSAP animations fun, and I can confirm that the prefers-reduced-motion query does work. Your HTML semantics are solid, and overall it responds great. πŸ‘

    The only thing I noticed is that the logos from 400 - 900px get very stretched and pixelated. I suggest removing flex: 1 from .partners__logo and then adding justify-content: center to .partners. You could then play around with your existing gap property on .partners to get the spacing how you want. At the very least this will prevent the logos from getting HUGE on large mobile and tablet screens.

    Again, nice job on this one!

    Marked as helpful
    1
  • turtlecrabβ€’550
    @turtlecrabSubmitted over 2 years ago

    My first landing page, I really tried to make it very very close to the design in both desktop and mobile view, I think I did well. Tried Figma for the first time, just used the free jpegs inside it, and it went like a breeze! It's so much easier to measure all the stuff there than in Krita(which I used previously).

    Questions:

    • What are the best practices of making a burger button and a menu? I think the method I used is fine, but maybe there are others?
    • I made the tip of the mobile menu and links' bold underlines with ::before css alchemy. Maybe there are better ways?
    • For widths between 375px and 1440px I used my judgements about how the design should respond, does it feel good?
    • I also set max-width of the whole page to 1700px, not sure, maybe should've set wider?

    I'd also appreciate any feedback on html and css, I spent a bunch of time on this simple project and not sure whether it turned good or not, maybe I should've gone for simpler approach with fewer @media queries?

    Responsive landing page using mobile first, sass

    #sass/scss
    1
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi turtlecrab! You’ve done a great job making an essentially pixel-perfect solution! πŸ™Œ

    As for your questions:

    • For the hamburger menu, I would defintely change the .burger div to a button. While the ul is still visible for screenreaders (or it seems to be), the div is not focusable for keyboard users and will only open on click. Using a button will allow the menu to open both on click and when pressing "enter" or "space" if focused. Much more accessible.
    • I think ::before and/or ::after pseudo-elements were definitely the way to go for both the mobile menu menu triangle and the link underlines. Great job. πŸ‘
    • I honestly think it responds great overall, which was definitely not easy for this project. The only thing I noticed is that the egg and glass images start getting cut off from 650px - 767px. Responsiveness is a little easier in this section if you put the images in the DOM (in an img or picture tag) rather than as a background image in an empty div. Another good option might be to make the height of the divs responsive using clamp().
    • I set my max-width even lower than yours. It looks good to me. πŸ‘

    Again, nice job on this one!

    Marked as helpful
    0
  • Christopher Adolpheβ€’600
    @christopher-adolpheSubmitted over 2 years ago

    Hello frontend friends! πŸ‘‹

    This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. πŸŽ‰ This project was an opportunity for me to test new approaches on the way I write my CSS.

    Major challenge(s):

    • I started using Sass maps with @each rules to generate helper classes easily. It is not perfect but I think is a good start.
    • I started using custom CSS properties to better organise my CSS and reduce repetition.
    • Getting the grid as per the design was more challenging than I thought. I initially started with by defining the height of each row for the main content for different viewport widths but I soon realised that this was difficult to maintain. I finally found an efficient solution by using the minmax() function with the grid-template-columns and grid-template-rows properties.

    Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.

    Thanks in advance. πŸ™

    Art gallery website | HTML, CSS, JS

    #sass/scss#typescript#webpack#gsap
    5
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Christopher - Awesome job on this solution! πŸ™Œ The GSAP animations on this are simply fantastic! Between you and ApplePieGiraffe, I think I'm finally convinced to start using it rather than just keyframes. πŸ˜„

    The only small thing I noticed is that from 769-800px the text in the header overflows and gets cut off. Tweaking the transform: translateX() might be the simplest solution. πŸ€”

    Again, great job on this one - looking forward to seeing your next solution!

    Marked as helpful
    0
  • Trevor Merrickβ€’150
    @tmerrick17Submitted over 2 years ago

    I was pretty happy with this one.

    The only thing is I wanted the mobile menu to go back up after I scroll down a little first. Right now, when you push the hamburger, the menu comes down, but when you scroll down, right away it goes back up, I wanted to scroll down say 200px and THEN it goes back up.

    Anyway super fun to replicate and used CSS flex and CSS grid a lot.

    Responsive landing page with mobile menu animation

    #sass/scss
    1
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Trevor! Congrats on completing another solution!

    If you use window.scrollY>=400 rather than window.scrollY=400 in your scroll event listener, it should work. Remember, one equals sign is not "equality" in JS. While using "===" should also work, the behavior you're really going for is to have the mobile menu move back up if the user has scrolled up to or past 400, so I think >= is better used here.

    Marked as helpful
    0
  • Misiuβ€’50
    @misiucodesSubmitted over 2 years ago

    Hi FEM community,

    Who thought what looks like a simple landing page could be so difficult! Some of the areas I struggled with that I would love advice/words of wisdom on are:

    • I coded this using React - any advice on how to structure my files/best practices for this would be great as I continue learning
    • Are there any rule of thumbs for when to use flexbox vs. grid?
    • When it came to making this design mobile-responsive, I really struggled and had to make a lot of media queries. How could I have structured my code better so that I only need to do minimal media queries?
    • What's the best way to have coded the underline styling for the "learn more" buttons so that no matter what screen size, it remains responsive?
    • Not sure about the code for my drop down menu - how can I make it ease out more smoothly when a user exits the drop-down menu?

    Thanks all,

    newbie coder

    Sunnyside Agency Landing Page

    #react
    2
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Misiu! Congrats on completing another challenge! πŸŽ‰

    To your questions:

    • While I’ve been learning Svelte rather than React, I did find Josh W Comeau’s guide to React file/directory structure helpful.
    • Here's a decent article on Flexbox vs Grid. Personally, I tend to abuse Grid and use it for most things. πŸ˜‚
    • When it comes to media queries, I try to stick to two β€œsets” (base styling for mobile, 1 query for tablet, 1 for desktop), but sometimes you’ll have certain elements that need a little extra. πŸ€·β€β™€οΈ Responsiveness for this one is really tricky, and media queries are definitely needed.
    • For the underline styling on the β€œlearn more” links, I find the best way is to use ::before or ::after pseudo-elements. I see you're already utilized a pseudo-element in your mobile menu, so won't get into full instructions. Although if you have trouble getting it to work, please let me know, and I'll be happy to help you out. πŸ˜„
    0
  • Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi Pablo! πŸ‘‹ Congrats on submitting another solution! πŸŽ‰

    That image is tricky. There's a few different ways you could do it. Working with your existing code, you could try increasing the image width percentage. Then add a max-width, so it doesn't get too big on larger screens. For positioning, you could use transform: translateX() with a negative value in order to shift the image left. Something like the code below could work. Note: the vaules I've used are just for the sake of example and would need to be changed to match the design.

    .computer-image {
width: 125%;
max-width: 1000px;
transform: translateX(-300px);
}
    Marked as helpful
    2
  • Martaβ€’630
    @martam90Submitted over 2 years ago

    Hello,

    I do not know why share image does not show up when I want to share the link to my page for example on Facebook. Do you have any idea what might be wrong in my code?

    I will be glad for your answer feedback concerning my project. Thank you.

    Space travel project (Gatsby.js)

    #accessibility#gatsby#sass/scss#bem
    2
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Marta! So good to see you submit another solution! I like the loading animation you added. πŸ˜„

    I’m unsure what is causing the issue on Facebook, since the preview from the link you posted on Slack is working fine. πŸ€”

    However, I think the quotations in the font-family of your body are causing your fonts to show up incorrectly. Switching font-family: "Barlow Condensed', sans-serif”; to font-family: "Barlow Condensed", sans-serif; should fix it.

    Marked as helpful
    2
  • Vanza Setiaβ€’27,775
    @vanzasetiaSubmitted over 2 years ago

    I've done another challenge! πŸŽ‰

    It's hard to find the exact RegEx that I want to validate user inputs. For the email RegEx, I already created by myself so I did just copy-paste from previous solution. For the name RegEx, I created a RegEx where the user's first name and last name should have at least a vowel letter and two characters long. Password RegEx that I wanted was difficult to find. However, I finally found a gist that contains the password RegEx that I wanted.

    I added two new features such as

    • Users are able to toggle the password visibility so they can see what they've typed.
    • Users can see the password length so they don't have to count it by themselves.

    These features were added based on my users' stories.

    I have no questions however, any feedback is appreciated.

    Any questions on the technique that I'm using are welcome! 😁

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! πŸ˜€

    Thanks!

    Intro Component with Signup Form | HTML CSS Sass JS

    #accessibility#bem#lighthouse#sass/scss
    4
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Vanza! πŸ‘‹

    I have no helpful, constructive feedback for you. Just wanted to drop in and let you know that your solution is fantastic! I really love the added features and like how you styled the attribution like the form. Thank you for the link to the password RegEx. πŸ™Œ I also appreciate all the effort you put into your README files (my own are rather shabby...πŸ˜…).

    As always, look forward to your next solution! Hopefully, one of these times I'll actually have some useful input. πŸ˜„

    4
  • Patrikβ€’110
    @Pjurak123Submitted over 2 years ago

    I had some trouble with the border-bottom on navigation items (links), for some reason, the linear gradient on the border-bottom does not work.

    If anyone knows how to fix that I would appreciate it. :)

    Responsive Easy-bank app in React

    #react
    1
    Anna Leighβ€’5,135
    @brasspetalsPosted over 2 years ago

    Hi, Patrik! πŸ‘‹

    I believe you need border-image in order to use a gradient (see code below). You're also only having the border apply to screens 1440px and higher, so you could probably drop that media query down to min-width: 960px, when it changes over from the mobile menu.

    border-bottom: 3px solid transparent;
border-image: linear-gradient(to right, var(--clr-primary-lime-green), var(--clr-primary-bright-cyan));
border-image-slice: 1;
    0