Skip to content
OverviewSolutions
4
Comments
27
Ren Ras
@renras

All comments

  • Janos Takacs•230
    @JT1974Submitted over 2 years ago

    How much do you break your code into smaller files/components? Is it worth to bother with too many components on this level of complexity? Reviews of my solution and code are greatly appreciated. Thx

    REST Countries API with color theme switcher

    2
    Ren Ras•420
    @renrasPosted over 2 years ago

    I usually break the page down into components when the code gets too long as it's easier for me to manage. Usually my jsx has like a maximum 100 lines of code. But only the ui elements and others that will be re-used will be stored in the components folder. The other page components I just store it in a page folder like pages/home so that you wouldn't have to deal with a lot of unnecessary components in the components folder

    Marked as helpful
    1
  • Ren Ras•420
    @renrasPosted over 2 years ago

    I was able to recreate what you were trying to do in this codepen: https://codepen.io/renras/pen/bGaZPJx,

    Or you could just put them in a parent container and do display: flex instead of using the ::after approach.

    Marked as helpful
    1
  • Muyiwa•250
    @muyiwa99Submitted over 2 years ago

    One of my image gallery layouts seem to display a gap for the mobile section when testing on chrome, but not on Firefox. Any tips on this would be greatly appreciated.

    Sunnyside Fully responsive

    1
    Ren Ras•420
    @renrasPosted over 2 years ago
    • avoid setting fixed width for containers
    • try to use max-width, min-width and percentages instead
    • try to make your flexbox and grid layouts responsive like :
    .flex {
  display: flex;
  flex-wrap: wrap;

   .flex-children {
     flex: 1 1 0;
   } 
 }

 .grid {
  grid-template-columns: repeat(4, auto);
 }
    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

    2
    Ren Ras•420
    @renrasPosted over 2 years ago

    Try wrapping your nav inside a div and apply the positioning on that instead and add overflow: hidden on the nav;

    <main style={{position: relative}}>
 <div style={{position: absolute}}>
  <nav style={{overflow: hidden}}></nav>
 </div>
</main>

    I successfully recreated the animation you're trying implement here in this codepen: https://codepen.io/renras/pen/XWVooXg

    0
  • Abhishek Rawat•40
    @rawatdevSubmitted over 2 years ago

    When I resize my window from large to small, then its navbar goes from desktop position to mobile position above the screen, which i don't want to see while resizing otherwise its working fine. How to solve this issue ?

    Sunnyside Responsive Landing Page built with SCSS

    1
    Ren Ras•420
    @renrasPosted over 2 years ago

    You can make a separate nav for mobile and desktop and make use of display: none. This will reduce complexities in your layout. Otherwise, make your transition more specific by targeting only the property you want animated.

    1
  • Jamar•100
    @HolymarzSubmitted over 2 years ago

    The footer links (facebook, instagram etc) could not highlight when hovering, I'm guessing because it's an image, any advice on how to highlight an image?

    For the menu I wasn't sure on how to get that pointing like corner on the upper right corner, so I just settle with a regular box, any tips on how I can make that?

    SunnySide Responsive landing page using flex & grid

    2
    Ren Ras•420
    @renrasPosted over 2 years ago

    You can put your icons in a container like a button and put a hover effect on that container instead. It's also fine if icons don't have a hover effect, most sites are like that.

    Regarding your question about the the menu, the easy way would be making a triangular div and place it above your menu. Here's a useful link: https://css-tricks.com/snippets/css/css-triangle/

    I believe you can also make use of clip-path. It's more complex than the first option but actually worth learning as it provides more flexibility and is often used in complex layouts.https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

    Marked as helpful
    0
  • Gloria Ataa Sekyere•290
    @GloriaSekyereSubmitted over 2 years ago

    I found this one exciting! This is my first advanced project. I struggled with styling the Filter by region select input so I have left it for now. Here are some additional features I added:

    • A back to top button when the user scrolls a bit further below
    • Show more button so not all the countries are displayed at one
    • Persistent light/dark mode
    • Fully responsive on all screen sizes

    I am still a beginner in React and jumped a lot of challenges to this one so any feedback on the code and practices are welcome.

    Also, can someone explain to me when to use useHistory and when to use <Link /> in routing?

    Thank you!

    REST Countries API with React, React Router, CSS Modules

    1
    Ren Ras•420
    @renrasPosted over 2 years ago

    Link doesn't trigger a full page refresh compared to using an a tag which would reset the application state. Normally, you'd always want to use Link for navigating throughout different pages in your application. I believe useHistory is used for programmatically redirecting users to a different page where you can't use Link. Like inside a code block:

    const history = useHistory();

const register = async () => {
 await register(user).then((username) => {
  history.push(`/profile/${userName}`);
 })
}
    Marked as helpful
    1
  • Jamiu Muritala•100
    @murytarlahSubmitted over 2 years ago

    I had a bit of difficulty with the filtering section but thanks to stack-overflow, I was able to find a solution Question: I re-render the countries grid view every time a key is pressed in the search input button looping through 250 each time. I feel this is bad practice but can't think of a better way to go through this, any help would be appreciated

    REST Countries API with color theme switcher using REACT and Tailwind

    2
    Ren Ras•420
    @renrasPosted over 2 years ago

    You could make use of debounce and throttling.

    Here's a good youtube video to start with: Learn Debounce And Throttle In 16 Minutes by Web Dev Simplified

    Also, I think it's better if you can merge your filter methods into one function. That way, the country and region will be in sync with each other.

    0
  • Ren Ras•420
    @renrasPosted almost 3 years ago

    Add media query to mobileNav also and set display to none.

    mobileNav.style.display = "none";
mobileMenu.style.opacity = 1;

    In your script.js, you have these lines of codes outside your function. I believe you can remove these and set the default styling in your css instead.

    0
  • Nazar•90
    @surfruitSubmitted almost 3 years ago

    Need help with responsive, also I don't know how to remove margins from header+main+footer. How to change svg color? How to calc width and height of 4 images before footer. thnx

    Landing page with flex-boxes

    1
    Ren Ras•420
    @renrasPosted almost 3 years ago

    There are a lot of things to improve on this project but here's a few to start with.

    Just nest the margin and padding inside the * selector also since it applies to all html element.

    *,
*::before,
*::after {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}

    Your body has a max width making your page not extending on larger screens. You can apply this to the elements inside instead.

    body {
    color: black;
  - max-width: 1440px;
}

    Your images are overflowing because they have a fixed width. What you can do is to apply properties like width:100%, max-width and min-width instead.

    img {
 + width: 100%,
 + height: auto,
}

    You can apply this concept on your containers too.

    You can change the color of the svg directly on the file by changing it's fill attribute. If I want two of them but different color I just make another copy.

    Goodluck!

    Marked as helpful
    0
  • Ren Ras•420
    @renrasPosted almost 3 years ago

    Your trash button has a child element in it which is targetted instead. Try using e.currentTarget instead because it is attached to the one with the event listener. But still it wouldn't work because the event is firing from the document which you have another event listener attached to which also gets fired. Instead of adding another event listener of the same type to the same element just merge them so It'll be easier to debug.

    0
  • Ren Ras•420
    @renrasPosted almost 3 years ago

    few things I think it can improve on:

    • your modal's height is not responsive to vh, I think position:fixed is better instead of absolute and top,left,right,bottom:0 will do the job instead of setting a height and width
     let selectedThumbnail = selectedImg.slice(0,selectedImg.indexOf('.jpg'))+'-thumbnail.jpg';

    I believe what you are trying to achieve here can be done using string.replace instead and is faster than slice.

    function activethumbnailImg(thumbnailImgs,mainProductImg){

    thumbnailImgs.forEach((img)=>{
        img.addEventListener('click',(e)=>{
            thumbnailImgs.forEach((img)=>{
                img.parentElement.classList.remove('active');
            });
            let imgName = `images/image-${e.target.dataset.name}.jpg`;
            mainProductImg.setAttribute('src',imgName);
            e.target.parentElement.classList.add('active');
        });
    });
}

    you are nesting a foreach inside a foreach which runs kinda slow. I believe this can still be optimized using event delegation instead and traversing

    Marked as helpful
    1