Skip to content
OverviewSolutions
15
Comments
9
salma fadl azzam
@salmafadlabdulrahman

All comments

  • Gustavo Siqueiraโ€ข60
    @G18siqueiraSubmitted over 1 year ago

    Hello everyone, my name is Gustavo Siqueira and I've been a Front-end Developer for just over 6 years. However, until I left my last company where I worked for almost 5 years, I had never dealt with any JavaScript library or framework, working only with pure Javascript.

    I came across Frontend Mentor and decided to apply my React and NextJS studies, which I started to study recently, to the challenges provided here. This is my first project on the platform where I used NextJS with CSS modules using Sass.

    I welcome any possible feedback!

    Thank you very much!

    Sunnyside Landing Page (using NextJs / Sass)

    1
    salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted over 1 year ago

    You did a great job on this project๐Ÿ‘๐Ÿ‘. quick tip, after you upload your project front-end mentor, check out the accessibility report, you'll find it under you project, if you found any errors or warnings go fix it right away and then update the report, that would give you the chance to focus on the important stuff, and also will make your website more accessible, like adding alt to images, add discernible text to links.

    1
  • Erenโ€ข720
    @erenymoSubmitted over 1 year ago

    Hi My friends !

    I have completed this challenge using pure HTML5 and CSS3.

    Any suggestion about Responsive is welcome :).

    Responsive 3 Column Preview Card

    2
    salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted over 1 year ago

    Hello there, great job working on this project๐Ÿ‘๐Ÿ‘, I have a suggestion for you, in your project when you get to the the 375 width there is a side scrolling, which is somthing you need to avoid sometimes, to fix this make sure you don't have any element that has width more than the container which would cause side scrolling, also you could use this: (overflow-x : hidden), this css selector would make your side scolling disapper.

    also there's a resource that helped me so much and I hope it helps you in matters of responsive web design, it's a course on scrimba.com called "Learn Responsive web design" I took the course myself and it helped me so much and I practiced on some good projects.

    Marked as helpful
    1
  • salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted almost 2 years ago

    Hello there, Great job working on this proejct๐Ÿ‘๐Ÿ‘, I have some suggestions for you, I hope they help you: 1- Try to always use "alt" attribute in you <img> tag, making an img tag without alt will not affect the display of your image but it'll be helpful for people who are using screen readers, so you're just providing a little description about the content of the image.

    2-To make your website responsive, and make it look good on the mobile version, you could use "flex-direction: column" that would make all your tags line up vertically, because the default for flex-direction is "row", another approach you could use "grid" and then grid-template-columns: repeat(1fr), this would also make a column for you.

    3-There is a resource that helped me a lot in matters of making a responsive web design, is "Learn Responsive web desing" course on Scrimba.com, I took this course myself and it was a huge help to me and I got the chance to practice on some interesting projects, after that I started applying what I learned on frontend mentor project. I recommend you take this course.

    Good luck๐Ÿ™Œ

    0
  • Magdy Aliโ€ข80
    @Migo090Submitted almost 2 years ago

    Hi, I finished this.

    any suggestions are welcome ๐Ÿ˜.

    Rating Page

    1
    salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted almost 2 years ago

    Hello there ๐Ÿ‘, great job working on this project, I checked it out and it's great, I have a suggestion I hope you don't mind..

    You wrote a message "you havn't choosed", that will show when the user hits the submit button without giving a rate, I like this and I think it's good, also there's an alternative, that you could use the "disabled" attribute so you would disable the submit button at first, so when the users try to hit the submit button without giving a rate they won't go to the next page, and when they give a rate you could remove the "disabled" attribute.

    Marked as helpful
    1
  • salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted almost 2 years ago

    Hello there๐Ÿ‘, great job working on this project, I like how you got so close to the design. I also did the same project and I there's an attribute I learned about and I thought it may help you.

    I didn't want the message to appear when the user hit the submit button without giving a rate, so I googled a little bit, and I fount an attribute "disabled", so I used it to make the submit button disabled at first but when the user choose a rate, the disabled attribute will get removed, I tried this on my project and it worked, so I thought it may help you as well!!

    Marked as helpful
    0
  • CalvinSalesโ€ข40
    @NoobKelvinSubmitted almost 2 years ago

    Took me a lot of time to figure this out. The hardest part for me is figuring out how to make the website mobile responsive. I know there's a lot for me to learn so suggestions are highly appreciated :) .

    Order Summary Card Component using HTML, CSS Flex

    3
    salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted almost 2 years ago

    Hello there, great job working on this project๐Ÿ‘ I had the same problem when I first started building projects, I struggled to make my website responsive, but with practicing it's getting easier now, I have a resource for you that might help, there's a course called "Learn Responsive web design" on scrimba.com, I encourage you to take it. I took the course myself and it was helpful and I got the chance to practice on some projects.

    1
  • salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted almost 2 years ago

    Great job working on this project๐Ÿ‘๐Ÿ‘, I have some tips for you if you don't mind, in the second section which there's six pictures and some texts, this would be a good place to make using flexbox and and choose the flex-direction to row, the pictures are big so they gonna stretch to two boxes in one line, or if you wanted to make this section using grid, you could use display: grid and then grid-template-columns: 1fr 1fr; this way every part are taking an equal amount.

    also there are two files, that contains images for the desktop version and images that are for the mobile versions, you can switch between them using media queries.

    there are a lot of resources that's gonna help you when you're stuck, but there's a specific one that helped with get better at using CSS Grid, Flexbox, media queries. this course is "Learn Responsive web design" you can find on Scrimba.com.

    great job working on this project!!๐Ÿ‘๐Ÿ‘๐Ÿ‘

    Marked as helpful
    0
  • salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted almost 2 years ago

    Hello there, You did a great a job on this project๐Ÿ‘, I have a few tips for you that might help. I hope it's alright.

    you have put the 3 cards/articles in a footer tag. it would be better if you put in a section tag, or a div tag. the footer tag actually contains information about the author of the section, copyright data or links to related documents.

    also make sure to add a margin top to the cards/articles section so it doesn't overlap, and add max width to the the main section so the contents won't clash and overlap.

    use max width on the images, so when the page size gets smaller the image would shrink but what's inside of the image should be the same.

    There's a course named Responsive web design on Scrimba.com, there's multiple units about grid, and flexbox, I took the course and I found it very helpful and learned new stuff.

    Great job working on this project!!๐Ÿ‘๐Ÿ‘

    Marked as helpful
    0
  • Emir Sezerโ€ข180
    @Emir-SezerSubmitted almost 2 years ago

    I followed a new, higher quality and cleaner code writing strategy in this project. From now on, I have to proceed in this way, it looks better in terms of readability, can you help me if I have mistakes? Thank you ๐Ÿ˜Š๐Ÿ‘๐Ÿ‘Œ

    Stats preview card component (Flexbox)

    1
    salma fadl azzamโ€ข330
    @salmafadlabdulrahmanPosted almost 2 years ago

    You did a great a job, I like your site๐Ÿ‘, what is the strategy that you've been following ?

    1