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
OverviewSolutions12Comments41

All comments

  • Karim• 590

    @Galielo-App

    Posted

    div hell, you should learn about semantic HTML

    0
  • Melvin• 210

    @MelvinMelonGit

    Submitted

    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

    @Galielo-App

    Posted

    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

    @Galielo-App

    Posted

    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

    @MojtabaMosavi

    Submitted

    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

    @Galielo-App

    Posted

    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

    @Galielo-App

    Posted

    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-93

    Submitted

    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

    @Galielo-App

    Posted

    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

    @EehabArbash

    Submitted

    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

    @Galielo-App

    Posted

    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
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    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

    #framer-motion#react#styled-components#next

    16

    Karim• 590

    @Galielo-App

    Posted

    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-p

    Submitted

    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

    @Galielo-App

    Posted

    Awesome build!

    0
  • Karim• 590

    @Galielo-App

    Posted

    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

    @Enoah35

    Submitted

    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

    @Galielo-App

    Posted

    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

    @Enoah35

    Submitted

    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

    @Galielo-App

    Posted

    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
  • Camille• 40

    @camillecalas

    Submitted

    Hey Everyone,

    If someone got some tips for the menu, I'd love some :)

    Blogr Landing Page

    1

    Karim• 590

    @Galielo-App

    Posted

    Hello, you forgot the background of the hero!

    happy coding :)

    0
  • Karim• 590

    @Galielo-App

    Posted

    hello, awesome build!

    I would suggest you save your data in the local storage, so when you refresh the page you still have your todos. Maybe this article will help you.

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

    0
  • Syed Ali Mansoor• 460

    @alimansoor-create

    Submitted

    Hey!

    How did you guys tackle the problem of moving the profile image up and making it overlap with the background pattern? I used transform: translateY() but it seems very finicky.

    Is there any better solution, using perhaps different markup, or maybe a better CSS layout?

    Profile card component using HTML and CSS

    3

    Karim• 590

    @Galielo-App

    Posted

    Hello Syed.

    Sure, the cleanest way is using a negative margin value. margin-top: -52px; This should work for you.

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

    1
  • Karim• 590

    @Galielo-App

    Posted

    wow, your javascript is so clean!!!!!! I'm going through advanced javascript right now and I learned a new way of validation from you. Using regex and match to then activate a function is an awesome idea. Good job!!

    1
  • Karim• 590

    @Galielo-App

    Posted

    Hello Asmaa,

    Amazing job, but here a few things:

    • the button looks good, but you should definitely add a cursor: pointer to make sure the user knows that it is clickable.
    • I would as well add a cool animation on the button to make the transition between colors more smooth, here the code: transition: color 0.3s ease, background-color 0.3s ease
    • in the tablet version, it looks a little bit buggy, try to change the media query from 800px to 1025px.

    happy coding and to support me please upvote my comment :)

    1
  • Karim• 590

    @Galielo-App

    Posted

    hello, you did an amazing job :)

    0
  • Sven• 295

    @Sven72

    Submitted

    Hi all, I am interested in:

    1. How to declutter my JS?
    2. How to prevent the content of the page from "jumping"? When in mobile (light) mode switching to darkmode, appears s a divider between "Dark Mode" and "Total Followers". This divider is only visible in darkmode. Due to the class ".visible_divider" which is append via JS.
    3. The switcher / Toggle Buttons after reload does not switch to the right but stays on the left. (Dark Mode side) Best and stay healthy

    Flexbox + Grid + Question related to JS

    2

    Karim• 590

    @Galielo-App

    Posted

    hello Sven!

    here a few things:

    • About your js, I would put most of the variables inside the function, take a look at this article on why global variables suck
    • your content is jumping because you're removing the <div id="divider" class="visible_divider"></div>, don't remove it! just add visibility: hidden; opacity: 0; and you're done.
    • Because you're reloading the page without saving in the memory that the user changed to another mode. Memory management in javascript is a little bit advanced, so make sure you know javascript well before getting into it. But here you have an article about memory management.

    happy coding and if I was helpful please upvote my comment.

    1
  • Martin• 95

    @Martingf56

    Submitted

    This is my solution, I have a question which is a better metric for padding. Rms or percentages?

    Flexbox and vanilla css

    2

    Karim• 590

    @Galielo-App

    Posted

    Hello Martin,

    Never use percentages for paddings, it's just uncontrollable and you will struggle a lot with it. Use percentages on widths or heights.

    REM or EM, that's the question, I personally think it's better to use EM when you need padding inside a button, in this case, I would go with EM. But if it's the padding of a card or an input, then I would go with REM.

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

    1
  • Karim• 590

    @Galielo-App

    Posted

    Hello Yolanda,

    Awesome build, but I would change some things:

    • on the element container inside your style.css you wrote align-items: center; and justify-content: center; but you have a display: grid. That's incorrect because align-items: center; and justify-content: center; are a display: flex; property, and not a grid one.
    • inside your container, I would put a max-width: 1150px so it will not expand through the entire screen. but then it will not be centered, so add a margin: auto as well.
    • now your container is attached to the top, no problem, easy fix. Go to your body element and add
        display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;

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

    1
  • Karim• 590

    @Galielo-App

    Posted

    Hello Mateus, I would change a few things in your code:

    • in your .review card don't use height, use min-height so you can prevent it from causing things to overlap.
    • for make things more responsive, make sure to use percentages on widths. On your @media (max-width: 445px) .rate {} put the width at 100%, and in your @media (max-width: 445px) .review you should put the width at 100% as well.
    • now your website is way more responsive!

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

    1
  • tomthestrom• 165

    @tomthestrom

    Submitted

    What do you think about absolutely positioning within the elements in the <section class="today">? Should have done it w flexbox? Regarding BEM, it would have been more ideal to use a shared class between the cards in the general overview and the cards for today. Anyway, first challenge completed.

    Mob first Social Media Dashboard

    1

    Karim• 590

    @Galielo-App

    Posted

    hello Tom,

    well, you can do it with position absolute, but there is a better option. look at this example:

    <article class="media-today">
    <div class="uppear-area>
          <h3 class="media-today__heading">Likes</h3>
          <object class="social-icon" type="image/svg+xml" data="images/icon twitter.svg">
            Icon Facebook
          </object>
    </div>
    <div class="bottom-area>
         same thing here
    </div>
 </article>

.media-today {
    display: flex;
    flex-direction: column;

    .upper-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

   .bottom-area {
       same thing
    }
}

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

    1
  • Karim• 590

    @Galielo-App

    Posted

    hello, explain the error please :)

    2