Skip to content
OverviewSolutions
12
Comments
18

Abbas Sher

@Abbassher55Mingora Swat480 points

BS SOftware ENGineeR

I’m currently learning...

Html, CSS ,Tailwind css , Javascript and React.

Latest solutions

View more solutions

Latest comments

  • Laila Ben•270
    @Laila-front-dev
    What are you most proud of, and what would you do differently next time?

    Hi community, in this challenge I built with React JS and React router and grid flexbox CSS. In react hooks I use useState and useReduis. and I use data JS and javascript map, any feedback is welcome.

    Coffeeroasters-subscription-site With React js

    #accessibility#react#vite#react-router
    1
    Abbas Sher•480
    @Abbassher55

    Hiii.. Great job but i have some suggestion for you. On mobile screen when the menu is open it have issue, i think its due to z-index. Also check the timeline as it is not like the given design.

  • Abbas Sher•480
    @Abbassher55

    Hii

    You have done a great job. However i have notice that image with alt="bg-pattern-bottom-desktop" cause some issue on ipad air and ipad mini etc , this issue is caused due to display block and left 30% so adjust it on these devices according to need.

    Keep up the good work. Regards: Abbas Sher

    Marked as helpful
  • Abbas Sher•480
    @Abbassher55

    Looking nice but add a hover color to the button which is given in orignal design

    Marked as helpful
  • YOGESH•30
    @yogesh-stack-dev
    What are you most proud of, and what would you do differently next time?

    LEARNINGS

    some of the major learnings while working through this project. Writing is a great way to reinforce our own knowledge.

    code snippets, see below:

    /* fonts.css */
@font-face {
  font-family:'YoungSerif' ;
  src: url('../assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
}

.title { 
  font-family: 'YoungSerif';
  font-weight: 400;
  font-style: normal;
}
    What challenges did you encounter, and how did you overcome them?

    CHALLENGES

    1. Challenge with HSL Colour in Tailwind CSS Configuration

    The colour provided is in HSL (Hue, Saturation, Lightness) format, which is not directly compatible with Tailwind CSS configuration using HEX or RGB.

    Solution:

    To address this challenge, convert the HSL color to HEX format using Google's default color picker.

    Example:

    1. Use Google's default color picker or another tool to obtain the HEX equivalent of the HSL color.
    2. Update the Tailwind CSS configuration with the HEX color.
    // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#XXXXXX', // Replace with your HEX color
      },
    },
  },
};
    1. Challenge with Integrating TTF Files for Fonts

    I encountered a challenge while working on the project regarding font integration. Instead of using the Google Fonts API, I opted to include TTF files directly.

    Solution:

    Successfully addressed the font integration challenge by utilizing the @font-face CSS rule. This solution allows for custom font definition directly in the project, providing greater control over the font rendering.

    /* fonts.css */
@font-face {
  font-family:'YoungSerif' ;
  src: url('../assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
}

.title { 
  font-family: 'YoungSerif';
  font-weight: 400;
  font-style: normal;
}

    Responsive Landing page for recipe webpage

    #tailwind-css
    1
    Abbas Sher•480
    @Abbassher55

    Your solution looks great but i have some suggestions according to your challenges. First: if you want to use colors in hex,hsl,rgb etc and vice versa and you dont have the given format then write it in vs code css file which have its own converter and will change it directly in ur editor for you from one format to another. Second : To use other font in tailwind u can make changes like below in tailwind.config.js file.

    In tailwind.config.js

    theme: {
    OtherProperties....
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }

    Then u dont need this in ur css

    .title { 
  font-family: 'YoungSerif';
  font-weight: 400;
  font-style: normal;
}

    Now after this u can use font-sans, or font-mono .... classes in your project.

    And also for font weight we have these tailwind classes.

    font-thin => font-weight: 100;
font-extralight => font-weight: 200;
font-light => font-weight: 300;
font-normal => font-weight: 400;
font-medium => font-weight: 500;
font-semibold => font-weight: 600;
font-bold => font-weight: 700;
font-extrabold => font-weight: 800;
font-black => font-weight: 900;

    Happy coding

    Marked as helpful
  • Louis Marie Atoluko Ayariga•170
    @almamarie
    What are you most proud of, and what would you do differently next time?
    • none
    What challenges did you encounter, and how did you overcome them?

    • Many of the fields were missing in some countries data e.g, some countries did not have borders, capital, currencies, etc. This caused errors when running the application. I had to randomly click on countries to try and fce the errors so I know where to model the application to catch those errors.

    • The Documentation on the rest-countries API website does not contain much information. Response objects and fields are not explained

    What specific areas of your project would you like help with?
    • I would love to know how to add dark mode theme to the application when using :root in my css modules.

    Responsive Countries Rest API Website With React.js and CSS Modules

    #react
    2
    Abbas Sher•480
    @Abbassher55

    Your solution seems effective, but I noticed that when a user clicks on country so the inner country detail page is not responsive on mobile device

  • Abbas Sher•480
    @Abbassher55

    Hi. Your solution seems good, but I noticed that when a user enters an incorrect email address, the message "Please provide a valid email address" is appropriately displayed. However, even after the user corrects the email address to a valid one, the same message persists.

View more comments