Skip to content
OverviewSolutions
12
Comments
14
Mohamed Ehab
@Programming-School-Pro-Coding

All comments

  • Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted 2 months ago

    Very Good, but I prefer to change the background color to the one in the style guide.

    0
  • Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted 11 months ago

    Hi There!

    1. First You Must Increase the padding for some elements like button and increase the width of some elements too like the wrapper box and button and you can take all of this from style-guide.md file
    2. You can take also the colors from style-guide.md file
    0
  • Shawn Lee•560
    @OGShawnLeeSubmitted over 2 years ago

    How's it going guys? Here I have this challenge. Positioning the hero illustration was rather stressful, but I didn't give up. #SigmaGrindset

    1. I had some trouble with the Clipboard API. It crashed on Firefox, so I had to do something like this:
    export const copiedLink = writable<string | null>(null, (set) => {
  try {
    navigator.clipboard.readText().then(set);
  } catch (err) {
    console.error('Unable to Read Text from the Clipboard');
  }

  return useListener(document.body, 'copy', () => {
    const selection = document.getSelection()?.toString();
    if (isString(selection) && !isEmpty(selection)) set(selection);
  });
});

    You guys know of a way to get the clipboard text on Firefox?

    Thanks for viewing/feedback. Have a great day!

    URL Shortening Landing Page | Animated | Responsive

    1
    Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Hi There

    I have one suggestion: Just Add Some Padding to be as in the design

    1
  • Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Hey Sir @swarnim-me

    Very Amazing Work

    Congrats on finishing this project

    I have some suggestions:

    1. Set A Transition to the hover
    2. Put the code in style tag in the CSS Stylesheet(style.css)
    3. Convert The attribution div to a attribution footer
    4. Make A Structure of the Folder

    Please make a reply if there is anything you don't understand May my suggestions be helpful for you

    Marked as helpful
    0
  • Eji Cyril Arinze•220
    @Cyril-ArinzeSubmitted over 2 years ago

    First, I would like to start by saying this is a really great challenge. I am a beginner who just started learning web development(html and css) a few months ago. i still have alot to learn as this challenge which appeared easy at first took me to long to complete esp the responsive part which i think is a flaw on this project of mine. generally i am happy about the outcome and will practice to improve.

    bootstrap 5 and javascript for responsive page landing

    2
    Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Very Amazing Work Sir

    Congrats on finishing this project

    I have some suggestions:

    1. make the padding of the buttons are equal Because the button may be not cool
    2. remove the style closing tag
    3. the the outer section tag a outer main tag
    4. make all alt attributes have a content for the readers

    Do you understand ?

    I may help you with my suggestions

    Marked as helpful
    1
  • Mladen Lamešević•80
    @MladenLmSubmitted over 2 years ago

    Hello everyone. I think I am finally getting the hang of this. It was not that hard to center content, remember most of the properties and it took me less time than projects before. I again forgot about accessibility, but please let me know about other mistakes I have made. Also, can I get some help on how to push my signature to the bottom? I made main into display: flex, and flex-direction: column, yet if I space-between they are not centered and all the way to the bottom. Thank you in advance! Cheers :)

    Profile card component. HTML and CSS

    2
    Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Hi Sir

    Congrats on finishing this project 🎊

    I have a suggestion: Convert the attribution div to attribution footer

    Do you understand ?

    Marked as helpful
    1
  • Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Hi Sir

    Congrats on finishing the challenge

    I have a suggestion: move the footer to the body element

    0
  • Ricardo•20
    @WickedBlackSubmitted over 2 years ago

    • Sizing is something I find difficult. how or what is the process used when starting a project, and sizing it to the size stated in the style guide?

    • I was trying to add an animation to the QR image. Could you tell me how to make the background blurry or dim, so the QR image is the only thing in focus when you hover over the image?

    • any feedback is welcome, please feel free to suggest anything even if unrelated to the questions above.

    Thank YOU!

    QR code component attempt 1

    2
    Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Hi @WickedBlack

    There is a problem: In index.html line 30 change the code to:

    <img src="./image-qr-code.png" alt="Qr Code">

    to be the image seen in the website

    I have some suggestions:

    1. Make The Code Semantic by put in the div with className attribution this code to be semantic:
    <footer class="attribution">
    <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.</p> 
    <p>Coded by <a href="#">Wicked Black</a>.</p> 
  </div>

    and put this code in the div with className container to be semantic:

    <main class="container">
    <article class="card">
      <img src="images\image-qr-code.png" alt="Qr Code">
      
      <h2>Improve your front-end skills by building projects</h2>
      <figcaption> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</figcaption>
    </article>
  </div>

    1. remove the style tag in the head tag

    2. to be the card in the middle of the page use the following code:

    body {
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5rem; /* separation between the card and attribution */
  min-height: 100vh;
}
    Marked as helpful
    1
  • Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Very Amazing Website

    In my opinion you can put a transition of all hovers by the following code:

    * {
    transition: all 0.5s; /* You can put your own time */
}

    Why do you use react js ?

    Marked as helpful
    1
  • Shawn Lee•560
    @OGShawnLeeSubmitted over 2 years ago

    Yooo Shawn here with yet another one to add to the list. This one took only 59 lines of code to build everything, both HTML and CSS. Svelte + WindiCSS prevent having to read through tons of different files.

    Thanks for viewing/feedback. Hope you guys are doing great. Have an awesome day and never give up. Peace out!

    Huddle Landing Page Hero Section in 59 lines of code!

    1
    Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Hi Sir

    That's Amazing

    But I have some suggestions: In my opinion The Social Links Hover must change the background color to be white #fff In my opinion remove the shadows of the register button

    In All screen sizes the website is great

    I have some questions too: Why do you use svelte js when you can make it using react js ?

    Marked as helpful
    1
  • Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Where is the image ?

    The Design is perfect

    0
  • Mohamed Ehab•350
    @Programming-School-Pro-CodingPosted over 2 years ago

    Very Nice

    0