Skip to content
OverviewSolutions
12
Comments
41
Karim
@yasssuz

All comments

  • Karim•590
    @yasssuzPosted over 3 years ago

    div hell, you should learn about semantic HTML

    0
  • Melvin•270
    @MelvinMelonGitSubmitted over 3 years ago

    Hi there! Thanks for viewing my solution :)

    I have a few questions:

    1 - I spent most of my time struggling to fit the image into the card itself. May I know when do I use "auto", "inherit", or use a hard-coded value for the length or width of an image - (in order to fit it into the parent div)?

    2 - I treated the avatar image, text and arrow as a single flexbox container. Is there a way I can align the avatar text without using a negative margin?

    3 - How may I improve my code?

    Thanks for replying!

    Article Preview Content with HTML, CSS & JavaScript

    1
    Karim•590
    @yasssuzPosted over 3 years ago

    Hello Melvin.

    Awesome build, here the answers to your questions:

    • It's better if you use max-height: 100%. The inherit keyword specifies that a property should inherit its value from its parent element. If the parent element had a different value, your code would look totally different.
    • Yes you could. Inside class="avatar" create another div an put inside the h2 and the img. This should work perfectly.
    • You did a very good job, your code is nice and clean. I would just suggest using BEM for naming your classes. This article will help you to get started.

    Happy coding and please upvote my comment :)

    1
  • Karim•590
    @yasssuzPosted over 3 years ago

    Hello Ugo!

    Awesome build, just a few tips:

    • Your background is repeating on bigger screens, this is happening because the image is not of the same size. A simple solution would be to add background-repeat: no-repeat; background-size: cover;. This will stop your background from repeating and will make sure that your background is the same size as your screen without stretching it, it's contained automatically.
    • I strongly suggest using unordered lists for semantic reasons. Use ul on id="todoList" and for all the children use li.
    • U should not use a percentage width on your class="to-do", this is making your main content look very small on smaller screens. I suggest using 550px instead of 35%.

    Please upvote my comment if I was helpful and happy coding :)

    Marked as helpful
    1
  • Mojtaba Mosavi•3,760
    @MojtabaMosaviSubmitted over 3 years ago

    This one toke a bit more time than I expected but this happens always. I would really appreciate it if you share your toughts about any of the following qestion.

    1. I dicided to exclude the hero section from the main, is doing so in any inappropriate or bad practice ?

    2. Should all the typografi for components be written in the same file as for the rest of the page ?

    3. In the testimonials section, the first testimonial has quoate icon on top of it the needs to be partially underneth the testimonial, I tried with z-index but for some mystrious reason it didn't work, how can it be fixed ?

    4. What tool do you use for measuring font-size in you projects ?

    5. You guys who always get the measurment aspect of the design right, I would appreciate if you share some of your tips/tricks.

    Happy coding :)

    fylo-dark-theme-landing-page-master

    2
    Karim•590
    @yasssuzPosted over 3 years ago

    hello!

    Sure, here are my opinions:

    • The best semantically speaking Html structure IMO is this:
      <header></header>
  <main>
    <section></section>
    //all of your sections should go inside a <section> nested inside main
    <section></section>
  </main>
  <footer></footer>
    • No, they don't. I prefer to keep them in another file so it is easier to maintain.
    • For me is actually working fine, but I would suggest using ::before with position: absolute (make sure the parent element is position: relative).
    • I usually use Figma or sketch.
    • If you're not a pro member, you will still have the jpeg of each page of the project. So open Figma, drop them inside your workspace, and create blocks to measure height and width.

    Please upvote my comment and happy coding :)

    3
  • Karim•590
    @yasssuzPosted over 3 years ago

    Hello, Sebastian!

    Awesome build, just a few things about your js:

    • For loops are ok, but in javascript we really like using forEach and map, look at this example:
    //your for loop
  for (i = 0; i < radios.length; i++) {
     radios[i].addEventListener("change", openPledge);
  }
//with forEach
  radios.forEach(radio => radio.addEventListener("change", openPledge))

    Trust me, this will make your code easier to write, read and maintain.

    • You don't need a openMenu() and a closeMenu(), u can use toggle and have a compacted, quality code. Look:
      function handleMenu() {
      document.querySelector(".nav-list").classList.**toggle**("open");
     document.body.classList.**toggle**("overlay");

     mobileMenu.childNodes[0].src = "./images/icon-close-menu.svg" ? "./images/icon-hamburger.svg"  :  "./images/icon-close-menu.svg";
  }

    For any question or suggestion feel free to ask :)

    Upvote my comment if I was helpful and happy coding :)

    1
  • Aurora Sirigu•130
    @Auro-93Submitted over 3 years ago

    Hello everyone! This is my second Frontend Mentor challenge. I'm a beginner, so any suggestions or comments are welcome! Thanks so much!

    Edit: I can't understand why only the first section of my solution appears in the "Design Comparison". In the preview of the site, however, everything seems to work correctly.

    SCSS, Flexbox, Grid Layout, vanilla Javascript

    1
    Karim•590
    @yasssuzPosted over 3 years ago

    Hello Aurora!

    Awesome build, just a few tips for the javascript:

    • You're executing an event listener the first time the window loads. In this case, your javascript is pretty small, so you shouldn't have performance problems. But this is something that you should try to avoid. A solution would be form.addEventListener('submit', () => ...), this will execute the code only when the form is submitted.
    • Is a very good practice to make each function to do something different. I strongly suggest isolating each function, here is an example:
      function validateField() {
    const pattern = (regex here)
    const inputValue = input.value

   inputValue.match(pattern) ? validField() : notValidField() 
  }

//then you create these functions that will render error and stuff

    For any question or suggestion feel free to ask :)

    Upvote my comment if I was helpful and happy coding :)

    1
  • JeebaLeepa•40
    @EehabArbashSubmitted over 3 years ago

    Hello, For this challenge, I may not have solved it pixel to pixel, but I've added some CSS animations to spice things up, please tell me what you think and what I can improve. Thanks.

    Static Job Listing Using React

    1
    Karim•590
    @yasssuzPosted over 3 years ago

    Hello!

    Awesome build, just a few tips:

    • Your App.js in wrapping the entire web app. This can make your code harder to read and to maintain, consider creating components (I strongly suggest doing that with .filters-bar-list, .jobs-list, and job-filters).
    • Having your entire application in one file is causing unnecessary re-renders. A solution to that would be creating components as I said before and isolating them to make them re-render only when necessary (learn about memo, useCallback and useMemo).
    • Take a look at your Html issues reported by front-end mentor!

    For any question or suggestion feel free to ask :)

    Upvote my comment if i was helpfull and happy conding :)

    2
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted over 3 years ago

    Hello, everybody! 👋

    This is my 30th solution on Frontend Mentor! 🎉 (And my first Guru level challenge submission.) 😎 This was definitely a tricky challenge, but I got to learn and try out many new things! 😀

    I used React and Next.js to build the site, styled-components to style it, Formik (and Yup) to handle the forms in this challenge, and Framer Motion to add some page transitions and animations. 😄

    There were quite a few things I had to learn in order to complete this challenge, and I'm not sure if I did them all correctly. 😥 Looking back, there are a few things I wish I would have differently, but it's a learning experience! 🙂

    If anyone could share some resources on how to manage and organize larger projects like this, I'd really appreciate it! 👍 Lots of resources that I find only focus on specific things (like creating a popup or using certain features of a tool) and not so much how to approach and think about an entire app. 🙃

    If you'd like to learn more about my project, see the README in my Git repo (where I also list a few quirks in my solution).

    Feedback welcome and appreciated! 😊

    Happy coding! 😁

    BTW, click on the sidebar avatar for the attribution.

    Invoice App | React, Next.js, styled-components, Formik, Framer Motion

    16
    Karim•590
    @yasssuzPosted over 3 years ago

    Hey ApplePieGiraffe!

    I'm working on the same project and I will submit it in a few days. Your build is awesome, it's very responsive and reactive. However, using react dev tools, I saw that a lot of re-renderings happening on your application, mostly from components on your Invoice page. So I started looking at your code and I saw that you're not using memo or useCallback on your functions and components. What's happing is that every time the state of your parent element changes, all the components are going to re-render again, even if they don't need to re-render. If possible, I would like to copy your repo and create a solution for this problem. Let me know if I can, and maybe, we could work together to solve this problem!

    Thanks for your time and happy coding :)

    1
  • Daniel•310
    @daniel-g-pSubmitted over 3 years ago

    Definitely one of the toughest challenges I've done, any feedback related to the functionalities and animations of the page are much appreciated :)

    Crowdfunding Product Page

    3
    Karim•590
    @yasssuzPosted over 3 years ago

    Awesome build!

    0
  • Karim•590
    @yasssuzPosted over 3 years ago

    Hello Jack!

    CSS Grid and Flexbox are awesome features. But remember:

    • flexbox: when you're working with mono-dimensional layouts, for example, a navbar. Because you could put a space between the logo and the nav, or you want your logo at the left, nav in the middle, and buttons on the right and you can do that with just a line of code justify-content: space-between;
    • grid: when you're working with bi-dimensional layouts, in fact, It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts. Grid Layout lets us properly separate the order of elements in the source from their visual presentation.

    Happy coding and please upvote my comment if I was helpful :)

    0
  • Go Ushiyama•135
    @Enoah35Submitted over 3 years ago

    Attempted 3 times. Two attempts, I have started from desktop design and then use @media query for mobile. But I could not figure out some of the elements to appear as shown in the screenshot. So on my last attempt I started making from mobile layout which I found much easier for this project.

    Used Flexbox for the testimonial and the rating sections. But the layer itself has been made using Grid. Checked with my mobile the webpage and it is responsive. Included screenshots for the Desktop and Mobile version using Firefox snapshot.

    As usual any comments, advices, critiques is welcome!

    CSS Grid, CSS FlexBox and SASS

    2
    Karim•590
    @yasssuzPosted over 3 years ago

    Hello Ushiyama!

    Awesome build, but I would change somethings:

    • Your mobile version looks ok, but the elements are attached on the left and right, you can solve this by adding a margin: 20px; inside the .social-panel .
    • after 375px until 1200px your layout just die. This is because the computer layout will not work on a screen of small size. Change your media query from 375px to at least 1050px.

    happy coding and if I was helpful please upvote my comment :)

    0
  • Go Ushiyama•135
    @Enoah35Submitted over 3 years ago

    Attempted 3 times. Two attempts, I have started from desktop design and then use @media query for mobile. But I could not figure out some of the elements to appear as shown in the screenshot. So on my last attempt I started making from mobile layout which I found much easier for this project.

    Used Flexbox for the testimonial and the rating sections. But the layer itself has been made using Grid. Checked with my mobile the webpage and it is responsive. Included screenshots for the Desktop and Mobile version using Firefox snapshot.

    As usual any comments, advices, critiques is welcome!

    CSS Grid, CSS FlexBox and SASS

    2
    Karim•590
    @yasssuzPosted over 3 years ago

    Hello Ushiyama!

    Awesome build, but I would change somethings:

    • Your mobile version looks ok, but the elements are attached on the left and right, you can solve this by adding a margin: 20px; inside the .social-panel .
    • after 375px until 1200px your layout just die. This is because the computer layout will not work on a screen of small size. Change your media query from 375px to at least 1050px.

    happy coding and if I was helpful please upvote my comment :)

    1