Skip to content
OverviewSolutions
15
Comments
7
AnasIsmai1
@AnasIsmai1

All comments

  • Mahmood•1,450
    @MahmoodHashemSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    In this challenge, one of the key things I learned was how to leverage JavaScript to accurately detect the size of the user's screen or browser viewport. This involved exploring a few different approaches:

    1. Using the window.innerWidth and window.innerHeight properties:

      • These properties provide the width and height of the browser's viewport, including any scrollbars.

    2. Accessing the screen.width and screen.height properties:

      • These properties return the total width and height of the user's physical display device.
      • This can be helpful for making decisions based on the user's overall screen real estate, beyond just the browser viewport.

    3. Utilizing media queries in conjunction with JavaScript:

      • Combining the power of CSS media queries with dynamic JavaScript checks.
      • This enables me to not only detect the screen size, but also apply appropriate styles and behaviors based on the user's device capabilities.
    What specific areas of your project would you like help with?

    Any feedback is appreciated

    Responsive Article preview Component

    1
    AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    You've written quite the good code. I just wanted to know why you needed the dimensions of the screen when you could just use the max-width and min-width of the css. Another approach that could be taken is that you could have designed the popup for the desktop using the html code instead of different code altogether with just a few alterations in the position and width on both screens. I like your approach on directly changing the display property using css. Your design sizing seems to be quite accurate as well do you by chance use the figma design as well?

    Marked as helpful
    1
  • AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    I am amazed by how accurate the dimensions are. How do you do it?

    0
  • venkatareddypalle-SD•10
    @venkatareddypalle-SDSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am aspiring to become a front-end developer. Even though I haven't achieved much yet, I have taken a step forward in this journey, and I believe that's something to be proud of.

    What challenges did you encounter, and how did you overcome them?

    For now, I request community support to help me overcome the following issues:

    1. I'd like to learn why I can't center a div vertically using Flexbox.
    2. Why aren't my CSS and images being published?
    What specific areas of your project would you like help with?

    I request community support to help me overcome the following issues:

    1. I'd like to learn why I can't center a div vertically using Flexbox.
    2. Why aren't my CSS and images being published?

    Coded using VS code and HTML, CSS are the technologies used.

    2
    AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    At the moment, the reason why you cant center your div vertically is because the body is taking only that space which the div within is taking. If you give the body of a height 100vh, which is just the entire viewport height, it will center vertically normally. As for why your css and image isnt loading, i can't say did you try retaking a screenshot of the website.

    0
  • AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    The design isnt responsive, to fix that you could just give the container a percentage as the width. You didnt to wrap <p> tags around the <a> tags instead you could have applied the stylings to the a tag and it could have worked the same. It would have been better if you used the <ul> tags instead to make it more semantic. I like the personal touch you gave with your own pfp and all. The rest of the code is great.

    0
  • AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    Seems like you haven't made the design responsive yet, you've also had issues with centering the card. Firstly, if you want to make the design a bit more responsive you can make the width relative to the screen by using a relative unit like percentages. To center the card you simply have to just increase the size of the body, you can set it to min-height:100vh to center the card in the middle of all screens.

    Marked as helpful
    0
  • KaitlynS•10
    @spehn008Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    When approaching this project I wanted to make the site more accessible by providing an alternative option to accessing the QR code. To do this I created an invisible link button that would highlight the QR code and when selected would also navigate to 'frontendmentor.io'. Because of this change I added the 'alt' tag message to this button rather than the image and made sure to reference this alternative option in the text below the QR code as well.

    What specific areas of your project would you like help with?

    I'm currently looking for feedback regarding my use of flexbox for this project (1) and how I approached making this site more accessible (2).

    1)To get the card holding the QR code to be positioned in the center I decided to use flexbox. While this does keep the card in the center of the page, changing the dimensions of the screen smaller that of the card causes issues to occur.

    If the dimensions of the screen become to small horizontally, the card is cut off and the text inside the div of class 'attribution' (which is currently under the card and hidden using the 'hidden' class) no longer aligns the text to the center. I believe this is due to the size of the flex box column also changing smaller that the screen size.

    If the dimensions of the screen become to small vertically, and the user uses 'tab' to navigate to different items, the screen scrolls to the bottom of the page, (viewing the items in the div of class 'attribution') and the invisible link button is no longer aligned with the QR code.

    Is there a way to prevent the above issues from occurring while also using flexbox?

    2)I've gone into more detail about how I handled accessibility in the 'What challenges did you encounter' section. I'm mostly looking for feedback on if the approach I used and how it can be improved upon.

    QR code component using CSS flexbox and incorporating accessibility

    1
    AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    For the matter about the card going past the screen when the resolution changes, its just a matter of you wither fixing the width of the card to be an absolute size rather a relative one. You can make it more responsiveness by using a percentage width rather than a pixelated one. this will force the card to stay within the screen causing the inner elements to change rather than the card itself.

    0
  • arun81302•60
    @arun81302Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    first time i use media query

    What challenges did you encounter, and how did you overcome them?

    actually i am currently practising flexbox and media query

    What specific areas of your project would you like help with?

    It is good

    responsive social link profile

    3
    AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    You havent employed the styles that were mentioned within the file such as the font, font-weight or the font size. You could improve the button by giving border a none value to remove them out of the equation, use headings for the name and place of stay and larger padding.

    0