Skip to content
OverviewSolutions
12
Comments
25
Precious Nkwor
@Jeen-Presh

All comments

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted about 2 years ago

    Hi there, I’m Melvin and this is my solution for this challenge. 👋

    • I created some simple animations. I would greatly appreciate any reading resources that can improve the animations.
    • What tips would you give me to improve the accessibility of the page?

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

    Interactive Rating Component (SASS + JS + Mobile-first + BEM)

    3
    Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello melvin

    • Please I would like to know how you knew the exact bg colors for the card background, is there any resource you can recommend for me to read?
    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted about 2 years ago

    Hi there, I’m Melvin and this is my solution for this challenge. 👋

    • I created some simple animations. I would greatly appreciate any reading resources that can improve the animations.
    • What tips would you give me to improve the accessibility of the page?

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

    Interactive Rating Component (SASS + JS + Mobile-first + BEM)

    3
    Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello melvin

    • Nice solution, I'm currently learning javascript now, so I decided to do a light project to practice dom manipulation.

    • Also I love your solution, and I'm using it to learn as well by breaking it down which helps me to learn more about accessibility, I noticed you also use sass and the 7-architecture system which is pretty cool. I love sass also.

    • The only thing I wanted to mention is the use of import in sass, I was using them also until I found out it has been deprecated, and instead we now have to make use of @use and @forward.

    if you are interested in learning @use and @forward you can use this link. Kevin powell.

    Have fun

    Marked as helpful
    0
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Shane, congratulations on completing your fem challenge

    • Always try checking your fem report section for errors, can help you figure out where to correct your project.

    • Try warping the code below in a header semantic element.

    
    <h1><span>Reliable, efficient delivery </span> Powered by Technology</h1>
    <p class="sub-text">Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p>

    Hope you find this helpful. Happy coding

    Marked as helpful
    1
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello favour, congratulations on completing your fem challenge.

    Some suggestions to help improve your project

    • Always ensure to wrap your main content with the main element for accessibility and semantic HTML markup

    more info here MDN main link

    • The code below should be wrapped with an h1 tag
     <h3 class="heading">
        Improve your front-end <br> skiils by building projects
      </h3>
    • Give your img element an alt tag. alt tags are good for accessibility for screen-readers

    Hope you find this helpful, congratulations once again. cheers

    0
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Kariath, congratulations on completing your first fem challenge.

    Some suggestions to help improve your project

    • Always ensure to wrap your main content with the main element for accessibility and semantic HTML markup

    more info here MDN Link Main Element

    • The code below should be wrapped with an h1 tag
    <P>Improve your front-end skills by building projects</P>
    • Give your img element an alt tag. alt tags are good for accessibility for screen-readers

    Hope you find this helpful, congratulations once again. cheers

    0
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello George, congratulations on competing your fem challenge

    Some suggestions to improve your project

    • You should always wrap your main content with the main element.

    more info MDN main element

    • Make use of the picture element, since the challenge has two different images for different screen sizes.

    more info MDN link picture element

    -Make use of the del element to wrap the old price, add a span tag with a class of sr-only, and inside should have a text of the previous price. then use CSS to make the span element hidden, this makes it easier for screen-readers to pick the information properly.

    more info MDN del element

    more info sr-only class

    • The only heading should be perfume.

    Happy coding. I hope you found this helpful.

    0
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Hassia, congratulations on completing the fem challenge.

    Some tips to help improve your project

    • best naming convention for classes and id's, is to separate the names using "-" instead of "_"

    more info naming conventions

    • you should use the address element to wrap the address section instead of article

    more info address element MDN link

    • it's not best practice to use an article element inside a footer. wrap them with divs instead

    Happy coding. if you found this helpful, make sure to mark as helpful thanks.

    4
  • Krysia Sherburne•120
    @klduplessSubmitted almost 2 years ago

    I built this responsive grid using TailwindCSS in combination with semantic HTML markup and a mobile-first approach. Tailwind makes mobile-first design so easy, because you build from the smallest breakpoint by default, then apply additional utility classes to target larger screens. For this challenge, I simply defined the two breakpoints in my tailwind.config.js file:

    ...
  theme: {
    screens: {
      sm: '375px',
      lg: '1440px',
    },
...

    Then, I wrote my initial elements for the mobile view, and then went back and added additional classes using lg:* to target the desktop view. I struggled a little with positioning & sizing the overall container for the grid to get the spacing correct

    Responsive mobile-first grid using TailwindCSS

    1
    Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Krysia, congratulations on completing the fem challenge

    Some suggestions to help improve your code

    • Always check front-end mentor report sections for errors on your project. right now you have quite a few.

    • The user names should be wrapped in a header tag.

    • Your codes are not properly indented.

    • your code below is meant to be wrapped with a p tag, as you can't nest heading elements. heading elements are semantic elements

     <heading>
                    I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.
                </heading>

    More info on semantic HTML MDN Semantic

    • Use a blockquote element for the code below.
    <q class="text-white-500/70">
                    I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard about some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup.
                </q>

    more info on blockquotes MDN blockquotes

    Happy coding. if you found this helpful, make sure to mark it as helpful thanks.

    0
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Filip, Congratulations on completing your fem challenge.

    Some suggestions to help improve your code

    • Best practice to make wrap your main content with a main element. it gives your solution a semantic markup

    more info MDN main element link

    • Wrap the code below with an h1 tag, not a p tag.
     <p> 
        Improve your front-end skills by building projects
      </p>

    Happy coding. if you found this helpful, make sure to mark as helpful thanks.

    Marked as helpful
    1
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Ryan, Congratulations on completing the fem challenge

    Some suggestions to help improve your code

    • It's best practice to wrap your main content in a main element

    more info MDN main element

    • Best use the picture element to display different images for different display screens.

    more info MDN Picture elment

    • Your solution isn't responsive.

    more info MDN Resposniveness

    • Your desktop design is meant to have a two-column layout. Create a container and set the display property to the grid. and give a two-column layout.

    more info MDN Grid

    Happy coding. if you found this helpful, make sure to mark as helpful thanks.

    Marked as helpful
    0
  • Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Kyrylo, congratulations on completing the fem challenge.

    Some suggestions to help improve your project.

    • Your code below should be wrapped with an h1 tag instead of h3.
    <h3 class="card__title">Improve your front-end skills by building projects</h3>
    • For good naming conventions for classes and IDs, it's preferable to separate your classes with ''-'' instead of ''_'''.

    more info here naming conventions%20and%20maintain%20lowercasing%20throughout.)

    Happy coding. if you found this helpful, make sure to mark as helpful thanks.

    Marked as helpful
    0
  • Darionas•320
    @DarionasSubmitted almost 2 years ago

    Hei, Challenge was done in collaboration by @Mahmud, @Kareem Roqib and @Darionas on GitHub. Main purpose was to practise on Git and GitHub. Any feedback is appreciated. Created with love.

    Grid layout module, mobile first.

    1
    Precious Nkwor•440
    @Jeen-PreshPosted almost 2 years ago

    Hello Darionas, congratulations on completing the fem challenge and also on collaborating with others. very impressive.

    Some few suggestions to help improve your project

    • Your code below is meant to be wrapped with an h1 tag.
    <h3 class="product-type">PERFUME</h3>

    • The product description should be wrapped with a p tag, you can replace the div element with a p tag and leave the class in the p tag.

    • For the old price, you should add a span tag with a class of sr-only inside your del element and a text that says the old price, and use CSS to make it hidden. this ensures it's being read out for screen-readers.

    for more info on sr-only class. sr-only KittyGiraudel\

    • for mobile screens, it isn't centered properly.

    Happy coding. if you found this helpful, make sure to mark as helpful thanks.

    Marked as helpful
    0