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

All Solutions

  • News Homepage

    #sass/scss
    • HTML
    • CSS

    0


    @Fahatmah

    Submitted


    Just got back here in FEM and things got really hard to regain my knowledge especially in CSS Grid


  • @Fahatmah

    Submitted


    How can I use the picture tag for a different size of images in this landing page? I tried it but it was just displaying two image even though I put a media attribute with different values just like this:

    <picture>
      <source media="(min-width: 375px)" srcset="...mobile-image.jpg">
      <source media="(min-width: 1440px)" srcset="...desktop-image.jpg">
      <img src="...mobile-image.jpg" alt="">
      <img src="...desktop-image.jpg" alt="">
    </picture>
    
  • Qr Code Component with SASS

    #sass/scss
    • HTML
    • CSS

    3


    @Fahatmah

    Submitted


    My first one was kind of not good and got accessibility issues so here's a second try with SASS. I should have put box-shadow and more border-radius 😅


  • @Fahatmah

    Submitted


    Hello Everyone! This is my second attempt but with SASS making more my self less frustrated and efficient while I was making this.

    Happy Testing!


  • @Fahatmah

    Submitted


    Setting custom properties and utility classes was worth it, kind of saving you from getting more frustrated and it will also make your code readable and less struggle when you want to change some properties values.

    Let me know if there is some more improvements I can put on it. I forgot that I should styled the dark theme first 😣😅 Lastly why the layout sizes isn't match with the design? Although I really aligned the design with mine but here it is still not getting the pixel perfect haha. My goal is to learn more but it was more challenging to make the layout accurate with design.

    Happy Testing!

  • Loopstudios Landing Page

    #sass/scss
    • HTML
    • CSS
    • JS

    2


    @Fahatmah

    Submitted


    I don't know why the layout becomes different when I submit a solution 😑 when I double check what it should look like in different sizes of browsers. Please give me some tips or tricks on how I can improve the layout in different browsers or devices. Is it because of what device you where developing at that will affect the layout of it? I use laptop by the way.

    And why does the grid part of pictures are kind of invisible when someone wants the browser theme set to dark?

    Thank You!


  • @Fahatmah

    Submitted


    This was really hard specially in the part where you need to position the background image and making sure it is also responsive. Thanks to Ms. Elaine who gave me tips to utilize the power of width: min(); 😃

    Although the layout is kind of decreased in size I still learned a lot!


  • @Fahatmah

    Submitted


    It was challenging on the part of putting the hero image and making its responsiveness. Please give me some feedback on how I can improve it.

    Just want to go back again in SCSS. That was more efficient rather than putting all your styles in one file.

  • Article Preview

    • HTML
    • CSS
    • JS

    0


    @Fahatmah

    Submitted


    Challenge done! This literally challenge me especially in the making of the content horizontally after I made the mobile view. I tried to change properties to fit the image in its parent container but it was already fit. The problem is the padding from the second content that made space in the top and bottom of the image container. So I just came up with a solution of scaling up and aligning the image container to get rid of the spaces but somehow it affected the overflowing share icons even though the image container is overflow hidden, because the share icons needed to overflow the article card. And that is how I made the challenge.

  • Interactive Rating Card

    #sass/scss
    • HTML
    • CSS
    • JS

    2


    @Fahatmah

    Submitted


    It was overwhelming when I started learning JS like what are these symbols, syntax and functions. All of that made me into frustrated with big eyebags person. And now as a newbie, I am starting to understand JS and feeling more excited to learn more.


  • @Fahatmah

    Submitted


    After making of this challenge for almost 3 days, I finally finished this! Although my SCSS is kind of messy but I work hard for the layout and the responsiveness of this design. There are a lot of missed elements that needs to be bold or resize.

    I really need to fix my media queries or the organization of it because it could cause a little irritation on your eyes : D haha I need some feedback and tips of how I can do it.


  • @Fahatmah

    Submitted


    Hello Guys!

    It was efficient and organized of making this project with SASS. I enjoyed it a lot, specially the partials in SASS. However, I am still learning how I can organize my media queries. And if you ever use SASS, can you give me some way of how I can do it?


  • @Fahatmah

    Submitted


    Hello Guys!

    Making this kind of challenge which is a junior level, really challenge me haha. As I am newbie at web development, I always get stuck at sizing of image or having lots of time in giving the font size of the texts. But my problem here is I really could not get the right direction of the links in the footer, can someone comment here of how you got the kind of format of it?


  • @Fahatmah

    Submitted


    I finally finished this. And I want to know how can I add some validation in the email part when it is in active state?


  • @Fahatmah

    Submitted


    Finally! I finished this challenge. I really got learnings from using grid layout because the design was kinda needed to be coded using it. I want to know more about css grid layout and tips and tricks. Maybe you can put some in a comment? Thank you!


  • @Fahatmah

    Submitted


    Hello again Guys!

    Finally this newbie project is done. The coding of it got easier because I made the mobile view first and the coding of responsiveness got easier too. I suggest you should try to do the mobile first before the desktop view. Also can I have some feedback? Thank you!