Skip to content
OverviewSolutions
24
Comments
46
Ctrl+FJ
@FlorianJourde

All comments

  • Ctrl+FJ•810
    @FlorianJourdePosted 6 months ago

    Hey man,

    Good job on this one !

    About the bento grid, I think you should have a better layout by using this approach :

    .container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template: repeat(2, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 50px);
}

    With this solution, you layout is already responsive-proof, you only have to alter the grid itself, not the entire layout. Avoiding relative width and height like vw, vh & % is generally a good practice (except for specific cases).

    I would also recommend you to switch you grid to flex and position: static placement. With justify-content and align-items and min-height: 100svh; directly on your body, you must be able to place you grid centered vertically without any issues 🙂

    Good luck for you next challenges ! ✌🏻

    0
  • Ctrl+FJ•810
    @FlorianJourdePosted over 1 year ago

    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
    @ArmsAndArrowsSubmitted over 1 year ago

    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•810
    @FlorianJourdePosted over 1 year ago

    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•810
    @FlorianJourdePosted over 1 year ago

    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•810
    @FlorianJourdePosted over 1 year ago

    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•810
    @FlorianJourdePosted over 1 year ago

    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•810
    @FlorianJourdePosted over 1 year ago

    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•810
    @FlorianJourdePosted over 1 year ago

    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•810
    @FlorianJourdePosted over 1 year ago

    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
    @maxkaiser100Submitted over 2 years ago

    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•810
    @FlorianJourdePosted over 2 years ago

    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
    @maxkaiser100Submitted over 2 years ago

    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•810
    @FlorianJourdePosted over 2 years ago

    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
  • Bill Georgopoulos•200
    @billgeorgop93Submitted about 3 years ago

    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•810
    @FlorianJourdePosted about 3 years ago

    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