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
OverviewSolutions4Comments27

All comments

  • Janos Takacs• 230

    @JT1974

    Submitted

    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

    #fetch#react#semantic-ui#styled-components

    2

    Ren Ras• 420

    @renras

    Posted

    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

    @renras

    Posted

    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• 230

    @muyiwa99

    Submitted

    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

    #sass/scss

    1

    Ren Ras• 420

    @renras

    Posted

    • 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

    @misiucodes

    Submitted

    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

    #react

    2

    Ren Ras• 420

    @renras

    Posted

    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

    @rawatdev

    Submitted

    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

    #sass/scss

    1

    Ren Ras• 420

    @renras

    Posted

    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

    @Holymarz

    Submitted

    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

    @renras

    Posted

    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

    @GloriaSekyere

    Submitted

    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

    #react#react-router

    1

    Ren Ras• 420

    @renras

    Posted

    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

    @murytarlah

    Submitted

    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

    #react#react-router#tailwind-css

    2

    Ren Ras• 420

    @renras

    Posted

    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

    @renras

    Posted

    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

    @surfruit

    Submitted

    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

    @renras

    Posted

    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

    @renras

    Posted

    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

    @renras

    Posted

    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
  • Muhammad Fadll• 320

    @fadelun

    Submitted

    i tried this challange with React js first time but i'm not competent of react js,please if you have feedback or advice tell me to improve my skill thanks

    Resposive Landing Page use React js

    #react#tailwind-css

    2

    Ren Ras• 420

    @renras

    Posted

    refrain from using dom methods as it defeats the purpose of react

    when it comes to toggling classnames you can use a ternary operator inside a string literal instead.

    const [showModal, setShowModal] = useState(true);

<Modal className=`${showModal ? 'block' : 'hidden'}` />
    1
  • Paul Andres• 660

    @paulpdoa

    Submitted

    I'm done with the frontend design together with changing of themes but I'm still having a problem with JavaScript side. I hope I can go back to this problem and finish everything to make it all working :). Please comment on how I can improve my JS programming :D Thanks everyone

    Created with Tailwind CSS and React.js

    #react#tailwind-css

    1

    Ren Ras• 420

    @renras

    Posted

    Keep your code dry.

    In your keypad component, these buttons can be mapped instead.

    const clickHandler = () => {
  //put logic here
  //use if else to add logic depending on the type of button
}

//render
{buttons.map(button => {
 return (
   <Button onClick={clickHandler}></Button>
)
)}

    // classnames

    <div className={ 
        theme === 1 ? "flex justify-center w-full h-screen theme1-bg" : 
        theme === 2 ? "flex justify-center w-full h-screen theme2-bg" :
        "flex justify-center w-full h-screen theme3-bg"
       }>

    // you can refractor this into

    <div className={
   `flex justify-center w-full h-screen 
   ${themebg}
`

    you can make a separate state for theme-bg depending on the current theme

    Marked as helpful

    0
  • Corvida Raven• 570

    @SheGeeks

    Submitted

    I would love to learn about ways to reduce having so many JavaScript event handlers for all the interactions in this challenge and whether having so many can cause performance issues.

    Any additional feedback is also appreciated and welcomed!

    Responsive Ecommerce Product Page With Lightbox

    1

    Ren Ras• 420

    @renras

    Posted

    You can look into using event delegation where you put an event listener only to the parent.

    Too much event listeners are only bad depending on the function inside it. Most of your functions run in O(n) time or less which is good.

    Marked as helpful

    1
  • Khizar Saeed• 40

    @KhizarSa

    Submitted

    Hi guys, I have work hard on this project and i know i've written alot of inefficent code. I would love to get your guys feedback do checkout the website and code. Thank you.

    Sunnyside (HTML, CSS, JS)

    #accessibility

    2

    Ren Ras• 420

    @renras

    Posted

    I noticed that you added an event listener to resize. Be careful with this as it actually keeps on running and might affect the performance of your site. With background image, you can change the url using media queries instead. Make your resize event listener run fewer times as needed by event throttling etc. Also, you can look into using a resize observer instead. Images also have a srcset property which you can use. It automatically chooses the optimal image depending on screen size.(Though I never really figured out how to make it work.)

    Marked as helpful

    0
  • Ren Ras• 420

    @renras

    Posted

    Hi! I love your work. The responsiveness is solid.

    Few things I think it can improve on:

    • when you hover over the avatar, it moves a little and the cart as well. I think it's better if they are still fixed to their position.
    • when I keep on pressing the add to cart button, the orders don't really add up without changing the quantity.
    • it'd be good if you can close cart/drawer/lightbox by pressing outside them aside from pressing the close button.
    • you have an accessibility issue that is very important. <li> elements should be nested inside an unordered list

    I'd love to see you actually put animations/effects to this project.

    Marked as helpful

    0
  • Ren Ras• 420

    @renras

    Posted

    Hi, great work! I like how your theme switcher works.

    Few things I think it can improve on:

    • When I press the decimal, it gives me a comma instead.
    • The evaluated value just gives me a whole number and removes the decimal
    • I think it's better if you show the history on the screen instead of showing zero when I press an operator (e.g 8 + 8)
    0
  • stephmunez• 435

    @stephmunez

    Submitted

    Hi all!

    I just finished another challenge.

    This one is fun to build. I had a quite difficult time in hiding the slide-in navbar for mobile and figured it out by hiding the over flow on the x-axis and setting it auto on the y-axis as to not clip the remaining content. Also I harnessed the power of using the viewport width in scaling the width and padding of multiple elements 😂

    I added some effects (setting the bg-color to black for contrast) on the navbar when scrolling by using the window.scrollY property and offsetHeight of the nav through an event listener.

    As always, feedback is super welcome and appreciated! Do let me know of any issues you may find :)

    Happy coding!

    Sunnyside agency landing page

    #tailwind-css

    1

    Ren Ras• 420

    @renras

    Posted

    Great Work!

    Things I think it can improve on:

    • you can set the display to none to hide elements. Then use media query to show it on desired viewport.

    • also good to check if your site looks okay on all viewport sizes.

    • problem with your scroll event listener is it keeps running and might affect performance. Try to find a way where it will run fewer times than needed. I use an intersection observer api instead.

    0
  • Ren Ras• 420

    @renras

    Posted

    The operators doesn't seem to be working.

    0
  • Dom B• 190

    @dombrga

    Submitted

    It was the most difficult challenge I did so far here. I would appreciate any comments you have especially about the use of position properties in the header, I think this part is messy and also the part of the testimonials. Also would like to ask for any feedback on my use of css classes. Thank you!

    Responsive Sunnyside Agency page

    2

    Ren Ras• 420

    @renras

    Posted

    Great work!

    Things that it can improve on:

    • try to implement active classes on nav items when clicked

    • I think it's good practice to nest your navigation links inside a list item in an unordered list : ex: <nav> <ul> <li> <a>About</a> <li> <li> <a>Services</a> <li> </ul> <nav>

    • cool trick with absolute positioning is that it will position relative to the parent if you set the position of its parent to relative

    • I always found naming css classes hard, and is something I develop by looking at others' work. I'd start by naming sections/divs like "image-container" or "hero-section" etc..

    • your layout breaks at like 1450px

    Marked as helpful

    0
  • Ren Ras• 420

    @renras

    Posted

    You have overflow property set to hidden on your "images" class. You can nest the box inside your main container instead if you're trying to overlap it.

    Marked as helpful

    1
  • Stefan• 620

    @stfnpczk

    Submitted

    Those background images gave me some headache, had to tweak and change it a bunch. I’m curious to hear from you about code style and best practices. Cheers !

    FAQ accordion card

    3

    Ren Ras• 420

    @renras

    Posted

    Great work!

    Things I'd improve on :

    1. add a fixed height to the main div so it doesn't keep moving when you open/close an accordion

    2. animate the accordion

    Marked as helpful

    0
  • Yunus Alif• 150

    @frontendnus

    Submitted

    I worked on this project for one day. I am happy to receive feedback from you. Although here I am a little confused by how to change the color of the SVG extension. Therefore, for the footer logo, I changed the color using Figma and for the social icon on the footer, I didn't use the assets provided but took it via iconscout. Does anyone know how to change the color for SVG?

    Sunnyside Landing Page Using Scss and GRID for Layouting

    #sass/scss#bem

    3

    Ren Ras• 420

    @renras

    Posted

    You can change the color of the svg by replacing its 'fill' attribute directly in the svg file. I haven't really found any simpler way than doing this.

    0