Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
socket hang up
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
OverviewSolutions22Comments45

All comments

  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey @evansanchez963 !

    You did it well !

    My main advice would be to be careful about responsiveness on small screens. When screen size is under 550px, your layout begin to break. This is because of images. To fix that bug, you could just add a width: 100% property on some images, like for example, the #article img.

    By this way, your images will never be bigger than their boxes (or divs).

    You did it well with the mobile menu, keep up the good work ! ✌️

    Marked as helpful

    1
  • Shchetkov Maksim• 470

    @ArmsAndArrows

    Submitted

    First time trying to make something bigger than component. I can see that I could make code more clear but for next projects I'll try to consider this experience.

    Also, I stuck for a while on a testimonial card, because screen resizing makes names disalign horizontally. I've tried to find whats going on by looking on other projects. But eventually that happened because of grid gaps. After applying padding-top everything start working as expected.

    Sunnyside Agency Landing Page

    #sass/scss

    1

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey @ArmsAndArrows !

    Good job on this one !

    I react about your description : I think I would have preferred to use flex instead of grid property fro testimonials items. You could try something like that, instead :

    .testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.3rem;
}

    And yes, flex can handle gap property ! 🤯

    Also, do you know that you can set an anchor to hyperlink ? You can try it with your arrow element :

    <a href="#features" class="hero__arrow"><img src="images/icon-arrow-down.svg" alt="arrow icon"></a>

    Just set an ID to your .features section, maybe add a tiny html { scroll-behavior: smooth; } to allow smooth scroll, and your page is now more dynamic, without adding any line of JS ! Pretty cool, huh ?

    Keep up the good work !

    Marked as helpful

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey Eduardo !

    Nicely done, your dark theme is working well !

    Be careful, your responsive solution has some glitches : when screen size is very small (under 350px), your layout begin to break. This is because of using fixed width & height on your .primeiro an .box elements. Of course, nobody have this size layout nowadays, but still, I think it's a good point to think "flexible" ! I would recommend you to avoid these fixed properties when you can, and just play around with paddings & margins.

    As well, it's a tiny detail, but I think it's a better practice to name CSS classes with English language. I struggled too, because of my native language, which is French, haha ! But when coming into big projects, you'll see it's easier to find your way if everything is written in English. I think this advice is valid for every code language you'll meet ✌️

    Keep up the good job !

    Marked as helpful

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey @Aliha7ish ! That's a good solution !

    Be careful, your .main-heading goes behind your .main-header when screen size is under 700 px ! Maybe some padding-top could be added ?

    As well, do your know you can set a link with anchor on your arrow down ? Look at something like that :

    <a class="arrow" href="#features-section"><img src="img/arrow.png"></a>

    You'll be able to scroll down to the next section with this ID, just by clicking on the hyperlink element ! Just add a html { scroll-behavior: smooth; }, and you've got a nice scrolling effect really easily ! Pretty cool, huh ?

    One last thing : I think it's a better practice to put properties like font-size or overflow-x on the body tag, instead of html.

    But it's still pretty good, your responsive is also clean !

    Keep up coding !

    Marked as helpful

    1
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey @VanelleD, good job with that one !

    However, the main mistake for me in this challenge is the use of <img>, instead of setting simple <div> with background-image property in CSS.

    With your solution, you need to fix images sizes, although they're more like "decoration", in the current case.

    For example, in your .gallery section, you could just use background images for each div, and set CSS property with something similar to that :

    .gallery .item {
    background-image: url('/image.jpg');
    background-size: cover;
    background-positon: center;
}

    Maybe a small padding can be added, to set a kind of "minimal height/width".

    With this option, your images are less "important" in term of HTML content, it will be easier to get a cleaner responsive, for example in your .about-img img, when screen size is ≈ 800 px, your .grid will display more naturally !

    But your solution stays good ! Keep coding man !

    Marked as helpful

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey @AdnaanH, good job with this challenge !

    My main advice for this work, would be to avoid to use fixed height and width, like that :

    .aside {
    width: 13em;
    height: 25em;
}

    A better option could be to put your elements inside a components, like with bootstrap's container. I personally designed a small simple .wrapper, which avoid me to use Bootstrap, or whatever. You can try to wrap your .aside & .main-bar is this component :

    .wrapper {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: inherit;
    justify-content: inherit;
    align-items: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    gap: inherit;
    z-index: inherit;
}

    With this solution, your elements will be automatically set to 100% width & height ! I'm using it since more than a year from now, and i never deceived me ! The purpose in to think "flex" !

    Second thing : font is not loading on my computer, think about inherit fonts like this : font-family: 'Arial', 'Helvetica', sans-serif, in case fonts can't be covered in the current page for any reason.

    Finally, not sure about using section inside a main component, but I may be wrong 🤔

    Keep coding, good luck for next challenges !

    Marked as helpful

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey @Ahmad-Akbik-f !

    This is a pretty elegant solution, I liked the way you used data.json for updating datas ! I remember I've been using fetch method to practice AJAX on this challenge a year ago, but your solution is far cleaner and readable !

    I would just suggest you one thing : maybe adapt your grid between 1200px & 575px would be a nice idea ! But I guess you saw it, because of your coding skills ✌️

    Keep up the good code !

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey, nicely done, Raùl !

    Be careful about the responsiveness, a single media query can rework your grid for great display in mobile ! Also, I think your localStorage doesn't work for me, my browser doesn't keep the current theme color in memory.

    However, nice job ! Your React solution was inspiring or me :)

    0
  • Max Kaiser• 300

    @maxkaiser100

    Submitted

    I used a funny work around to un-color the "Daily", "Weekly", "Monthly" buttons. After they were clicked on. You'll note it fails if you click the Daily and then the Monthly directly after. I just couldn't figure out how to un-color them if they weren't the <li> clicked on. Any help would be great here.

    Also, probably would be better if when you initially loaded the page it was already set to Daily - any idea how to do that?

    Otherwise, this was a very challenging one that really stretched my JS abilities. It was also the first time I worked with outside JSON so that was really exciting.

    Time tracking dashboard solution

    1

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey man !

    Have a look on your GitHub, I opened a new pull request ! This time, I mainly focused on fixing your algorithmic problems, to train myself in JavaScript.

    Well, you managed to deal with the .json, congratulations for that ! Also, you seems pretty comfortable with fetch() methods and stuffs. I just tried to reoganize it, to avoid repetition in your code. But that wasn't bad at all !

    The main thing which has bothered me was about coloring the selected text. Usually, we use to manipulate the DOM, and add/remove active classes. By this way, you don't just change the color, but you add a class on the DOM element, so your able to do many things with that, and you can interact with the page itself : make some elements transparents, like a navbar if scroll is on-top, move elements, or other really interesting things about front-end possibilities.

    Beside that, I liked the fact that you tried to generate your page with your JSON object on loading ! It's not the way that I did that when I resolved that exercice months ago, but I found it clever ! The trick that I used to do that here is maybe not the most efficient, but at least, it works...

    Just one last thing : be attentive to HTML errors that FEM calculate for you... It's very important to get a right structure first, before to focus on other langages. Bad HTML semantic has a pretty big impact in SEO, try to get a look to issues, next time !

    Tell me if you learned some stuffs, have a nice day !

    Marked as helpful

    0
  • Max Kaiser• 300

    @maxkaiser100

    Submitted

    Hey -

    This one REALLY pushed me but it was amazing to get the info from API - made me feel like I am really getting somewhere.

    I'm looking for any good ideas on where to learn how to shorten up my code. Like tips so you're thinking more about how to shorten stuff up. My code is very explicit and non-elegant. It works, though!

    Github Search

    1

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey, man ! Nice job on this one ! You did it particullary well with the API exploitation, congrats !

    However, I'm trying to get focus into Git at the moment, mainly PR and stuffs like that... so I when I saw your project posted on Slack, and though about optimization and refactoring, I tried to custom your project on my own.

    Here's some example about what I did :

    • Adjusting your CSS classes names. For example, I replaced userName by 'user-name'. I think that Camel Case doesn't suits to classes names. It's better for JS variables, or CSS-in-JS usecases ;
    • Reducing your reset.css file. I don't use to work with them, but I noticed that your reset was overriding everything. So I just switechd to a more minimalistic one, feel free to keep it or not !
    • Optimizing the responsivity, by adding a @media query. I just tried to get rid of your rem stuffs, and use the power of flexboxes as much as I can ! You must know that, for projects like that, it's more natural to go with "mobile-first-workflow". At the end, you'l write less code while adding your media queries for desktop !
    • I almost left your app.js like it was, since it's perfectly working with the API ! So I just changed your classnames here, again. Same for HTML.

    Hope you'll learn some stuffs ! Tell me if something bothering you, and good luck for the next challeges !

    Marked as helpful

    0
  • P
    Bill Georgopoulos• 200

    @billgeorgop93

    Submitted

    I made this with more advanced CSS by using some properties that I never used them before. I googled a lot and I found the following here: css-tricks.com.

    1. ::after : The ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML.
    2. :nth-child : The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.
    3. em instead of rem : As Jeremy Church said: While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
    4. object-fit: The object-fit property defines how an element responds to the height and width of its content box. It’s intended for images, videos and other embeddable media formats in conjunction with the object-position property.

    Any feedback for improvement is welcome.

    Fylo data storage component /w CSS

    1

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Prety cool ! I was waiting for a kind of API response, but it seems this challenge is static. However, you did a pretty nice job with pseudo elements. Also, responsive is really good !

    My only suggestion would be to go by mobile-first workflow, but I guess it's a choice. Your integration seems pretty strong, so keep coding ! It's already great

    1
  • Ctrl+FJ• 750

    @FlorianJourde

    Submitted

    Big s/o to @Yazdun, who gave me some tips about CSS animations. By the way, I guess I should go through SCSS, since my stylesheets begin to be veeery long ! I'm particulary happy about my .wrapper system, which avoid me to use Bootstrap. I think I'll reuse this .wrapper in the future. Feel free to take it, if you judge it relevant ! Also, this little tool helped me to crop .svg image.

    Place to the questions, now :

    • Can I inherit from upper @media query ? Or is it more secure to inherit from the original one ?
    • If I can't, what would be the best practice to position backgrounds without to use media queries, taking resizing in consideration ? Background-position ?I'm mostyl talking about white sections.

    Hope you'll like it ! I had some fun playing with those kind of "breathing" effect ! I didn't spent much time in the .js, but it seems functional.

    Blogr landing page solution with HTML, CSS, JS

    2

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    I will correct HTML issues tomorrow !

    0
  • Yazdun• 1,310

    @Yazdun

    Submitted

    Hello FEM community ! Here is my first junior challenge and I have some questions:

    • If you're on mac : I've been told my theme switch method doesn't work on mac but I couldn't find out why since I don't have access to any macOS system, so I'll appreciate it if you can inform me about theme functionality.
    • Does animation works properly for you ? and do you have any good resource to learn css animations to share with me ?
    • I spent some time to learn accessibility and I applied what I've learned to this project but I really need some advice on accessibility, any resources or feedbacks regards to accessibility is very valuable to me.
    • What is best tag for alerts and modals in html ? I used div since I didn't know any other tags for them, Is it a good approach?

    AND HERE ARE SOME GOOD RESOURCES I FOUND ALONG THIS PROJECT

    • Here is a very good and straight forward article about applying dark mode using sass.
    • I learned a lot from this video by legendary Kevin Powell, It's very short video but probably you will find it useful if you're struggling with accessibility like me.
    • Here is another great content by Kevin Powell which taught me to add animation to elements on scroll.

    ✅ That's all, I'm looking forward to your feedbacks. If you have any other thoughts about my solution, don't hesitate to share it with me.

    Clipboard landing page

    2

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Pretty cooool ! Those intro and on-scroll animation are just georgious, I'll check your ressources right now, thanks for sharing !

    Just let you know that your dark mode doesn't work properly, even on a Windows OS. Don't know why.

    Then, about animations, don't know if you saw that, but it's animated with Anime.js. Refering to this article, Anime.js seems to be the reference in terms of animations actually. Even if I didn't got much time to involve in animations, I trust in this source cause my senior mentor from my last internship was using Slick.js which is in the list, also.

    Finally, I don't know if it's in the challenge design, but I like your alert message ! Nice touch, your getting better and better !

    Keep going !

    Marked as helpful

    0
  • P
    Ken• 4,915

    @kens-visuals

    Submitted

    This is my fifteenth project on Frontend Mentor 🥳 and I can surely say that I've learned so much with this project, especially in JS part. I've got to admit this is my most favorite project by far. Furthermore, I tried to make it as close to a real life tip calculator as possible, because I wanted to build a tool that will be used by me, my friends, and maybe some other users as well 😅 I really put my heart and soul into this project, and I'm going to keep adding more features and improvements into it as well. I hope you enjoy using it as much, as I enjoyed building it. And if you really enjoy using it, I have a quick tip to help you access it more easily from your phone's home screen. And here's how to do it:

    iOS

    1. Open Safari and go to https://kens-visuals.github.io/tip-calculator-app/
    2. Tap the Share button on the bottom of the page. It looks like a square with an arrow pointing out of the top.
    3. In the list of options that appear, scroll down and tap on Add to Home Screen. The Add to Home Screen dialog box will
    4. Choose a name for the website shortcut on your home screen.
    5. Click Add when you're done. Safari will close automatically, and you will be taken to where the icon is located on your
    6. Now just tap the new "app" or shortcut on your home screen, and it will open the website in its own navigation window.

    Android

    1. Open Chrome.
    2. Navigate to https://kens-visuals.github.io/tip-calculator-app/ to pin to
    3. Tap the menu icon (3 dots in upper right-hand corner) and tap Add to home screen.
    4. Choose a name for the website shortcut, then Chrome will add it to your home screen.

    And as always, if you have some suggestions, make sure to leave them in the comments' section 👨🏻‍💻 Cheers 👾

    P. S. Head over to my GitHub repo of this project for some useful resources for JS 🟨

    Splitter Tip Calculator App with Vanilla JS, SCSS, and BEM

    2

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Well done ! It work fine !

    1
  • Yazdun• 1,310

    @Yazdun

    Submitted

    Hello to my fellow developers ! Here is my solution for base apparel comming soon ! I guess the hardest part of this challenge was staying focused while the hero lady staring into your soul 😐Anyway I have some questions :

    • Do you have any recommendation and good sources for learning accessibility?
    • I always have some trouble with setting svg backgrounds, although they look fine but I'm not satisfied with them, I set them on body tag, but they always look weird to me, is there anything I'm doing wrong or any other approaches that you can recommend me?
    • I didn't like the initial error design so I took another approach for errors in this solution, Do they function properly for you?

    ✅ I'll be happy to know your thoughts and feedbacks on this

    Base apparel coming soon

    2

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hi @Yazdun !

    Well done with that one ! I particullary like the animations in intro ! I'll dig the code later, to see how you did that.

    Then, I don't know much stuff about accessibility, but I can tell you some stuffs about your background properties !

    It's a transparent .svg image, so you can add a background: linear-gradient( 135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%)) property to your body. Unfortunetely, this will remove your background-image (and alterate your animation, by the way). But that being said, I think it's better if your background: url(../../images/bg-pattern-desktop.svg) is on your .showcase container, it seems to be the purpose, on this exercice. After all, your can still keep animation on showcase__logo and showcase__wrap, to don't show there's no background behind showcase__img. Doing that, you'll be closest to the design.

    Then, I liked your error design, with transform: scale on hover, pretty interactive ! One last thing : your color property for .alert .success doesn't work for me, maybe your box shadow neither. It should be closer to the .alert background-color property. Ealier in the year, I read an ebook called Refactoring UI by Adam Wathan. Maybe you already know it, but it's simply a goldmine about UX & UI stuffs. The .pdf is really quick to read, and shows you all the good practise in UX/UI nowadays. I highly recommand it, the design vibes are close to the ones on this website !

    I hope my comment was readable, and you learned something from it ! I didn't digged into your .js file, I trust in you for this competence field..

    Have a great day, keep up the nice work mate !

    Marked as helpful

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Nice job with the animation when clicking on a link ! Is it because of scroll-behavior: smooth ?

    I would suggest to leave the menu-burger close while charging the page on mobile.

    Also, repeating links is pretty hard to maintain. I maybe to stylize an .active class on mobile view is a better solution. If you want some inspiration, here is what I did. Don't forget to disable it on desktop view !

    However, pretty nice job, a lot of work on this one ! Keep coding !

    0
  • bunee• 2,060

    @buneeIsSlo

    Submitted

    Hi it's me, bunee! I really wanted to learn CSS grids, I figured this challenge would be a great start.

    I've learnt quite a bit solving this challenge. As embarrassing as it is to admit, I spent more time centering the testimonials container than learning about grids themselves... Shout out to @tediko, His solution really helped me solve this issue.

    Not to sound cheesy but, I need some good resources on "how to center a div" :')

    Also if you could take a look at my code and give me some feedback, I'd respect it. Also also, Let me know how you feel about the animations.

    Click here to view the Live Site

    Click here to view the Code

    Testimonials Section | CSS Grids | Anime.js | Mobile first

    3

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Godammit, your work is fucking immersive ! It inspire me a lot, I'll definitely have a look to Anime.js, since I love to inject nice UI/UX into my websites ! Saw it two days ago in this article, seems to definitely make the difference !

    1
  • bunee• 2,060

    @buneeIsSlo

    Submitted

    😬Yikes! did this challenge take me a long time to complete... Glad to be finally done with it.

    Acknowledgment

    First off, I'd like to thank @tediko for writing code that's clean and comprehensive. I spent a lot of time studying his Solution to the Calculator app by FEM. This solution forced me to learn a lot of new technologies and concepts that I found extremely helpful.

    Secondly, I want thank @Syafiqjos. I found a very useful way to limit user input from his Solution.

    Some not so necessary Features

    • Added a punny intro animation
    • Flipped some colours around and added a dark theme mode
    • A toggle button to switch between the two theme modes

    Questions

    • What tag would be more appropriate for the intro element in my markup?
    • I'd like to know your thoughts on my javascript code, I found it a bit challenging to stick to the DRY principle.
    • I'm fairly new to webpack, so I'd appreciate it if you could give some tips on writing a better config file.

    Click here to view the Live Site

    Click here to view the Code

    P.S. If you have any questions for me, Please feel free to message me on slack :)

    🧮Tip Calculator | HTML, CSS | Javascript | Anime.js | Webpack

    3

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    A piece of art !

    1
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    I didn't thought about using display: flex with transform: translate property to resolve this exercice, but it works ! Wel done !

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Well done ! The only thing annoying me is that your component is widder in mobile view, than in desktop view. Maybe you could try to play between width, min-width and max-width properties on differents media queries to get a coherent result and a bigger element in desktop than in mobile ?

    Keep coding !

    Marked as helpful

    0
  • Sujan Gamal• 40

    @SujanPasa

    Submitted

    If there is any other ways to make the alignment of the boxes simpler I would love to see them as well as I think the way I have done it is quite messy.

    I used Flexbox for this project

    1

    Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hey mate, nice job !

    About your question, you can use display: grid instead of flex property on desktop. It's really not complicated once you did it one time, have a look :

    #first-card {
  grid-area: first-card;
}

#second-card {
  grid-area: second-card;
}

#third-card {
  grid-area: third-card;
}

#fourth-card {
  grid-area: fourth-card;
}

    ...and then, the magic happen !

    .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
               ". second-card ."
      "first-card second-card fourth-card"
      "first-card third-card fourth-card"
               ". third-card .";
  }

    You can custom your own grids on Layoutit. If you want to see this grid in application, here is my submission.

    Hope this comment helped you ! Have a great day, keep up the good work !

    Marked as helpful

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Hehe, you're the guy who learn me how to use display: grid ! Thanks for following me !

    By the way, nice job ! You're pretty close to the result. I would suggest you to add padding property on your .hero-section on desktop view. On my computer, elements are just going on each side of the screen, which is not pretty nice..

    Also, I think it's better to switch background-color and background-image properties from .top-section to .hero-section and to change your navbar to display: absolute with transparent background. By this way, your header and navbar will share the same background.

    I don't know if my suggestions are relevant, it's only my opinion ! However, nice job, keep going !

    Marked as helpful

    1
  • Jaronimas• 375

    @jaronimas-codes

    Submitted

    1. How to avoid JSON file to save as an empty array?
    2. How to fix 1px off of border radius in the corner?
    3. How to make 'triple dots' active on hover while the background would keep it's original color?

    Thanks in advance!

    Responsive component with, BEM, JS bubbling

    1

    Ctrl+FJ• 750

    @FlorianJourde

    Posted 

    "How to fix 1px off of border radius in the corner?"

    Maybe for that, you could use background-image property instead of an img ? I encontered the same problem.

    Nice job, however !

    0
  • Ctrl+FJ• 750

    @FlorianJourde

    Posted

    Grid are not that difficult, have a look :

    #first-card {
  grid-area: first-card;
}

#second-card {
  grid-area: second-card;
}

#third-card {
  grid-area: third-card;
}

#fourth-card {
  grid-area: fourth-card;
}

    ...and then, the magic happen !

    .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
               ". second-card ."
      "first-card second-card fourth-card"
      "first-card third-card fourth-card"
               ". third-card .";
  }

    You can custom your own grids on Layoutit.

    Marked as helpful

    0