Skip to content
OverviewSolutions
23
Comments
22

Walter Sono

@waltersonoMaputo, Mozambique660 points

Hi, my name is Walter Sono. I major in Computer Engineering and working as a Software Developer.

I’m currently learning...

I am currently polishing my skills and staying up to date with the current technologies.

Latest solutions

View more solutions

Latest comments

  • Walter Sono•660
    @waltersonoPosted over 3 years ago

    Hi there DIICA99

    Nice work! The design looks good on almost all screens. You definitely have a chance to be an awesome developer

    I am going to give many tips you need for this and your next projects, here we go:

    HTML

    Use Semantic HTML

    • Using the correct tags to structure your page helps the Web, browsers, search engines, users to understand, categorize, list your website
    • Put the heading section inside a <header> tag

    Code for web accessibility

    • Help screenreaders navigate your page easily
    • Remove the empty labels and insert an aria-label attribute inside the <input>
    • Provide an alt text for each image

    CSS

    Use low specificity

    • Try as much as possible to keep to target your elements with class (.heading) instead of targeting them by structure or tag name (input,section form input)
      • If you target by structure, then you will have to change the CSS every time you change your HTML code
      • If you target by tags, then you will run into problems when you want to apply different styles to the same HTML input

    JavaScript

    • Use strict mode to enforce some good practices
    • Call the javascript file on the top inside the <head> with defer attribute, instead of calling it at the bottom for performace

    There you go my fellow mentor.

    Hope this is helpful to you.

    See you next time, feel free to go and checkout my work as well.

    Marked as helpful
    1
  • Walter Sono•660
    @waltersonoPosted almost 4 years ago

    Nice job domingoslatorre completing this challenge

    It looks very good, the mobile and desktop.

    You used the corrects HTML tags and even tried to support as much attributes for accessibility, very cool.

    Just as a suggestions:

    • Reduce the min-width

      • Because the mobile version start when there is still space for the design to be in desktop

    • Correct few things in BEM

      • page__social__item is good practice in BEM
      • A element can not have another element:
      • "An element is always part of a block, not another element. This means that element names can't define a hierarchy such as block__elem1__elem2." Quick start

    That is it, my fellow mentor.

    Maybe you could help each other with suggestions.

    Marked as helpful
    1
  • Walter Sono•660
    @waltersonoPosted almost 4 years ago

    Hi Jugo-JS

    The design looks good, just some suggestions to make your code better in the next projects:

    • Do not use images tags for background images

      • Images tags are used to insert content relatable images
      • Images inserted using images tags interrupt other resources
      • Use divs instead, and apply a background images

    • Add alternative text the image of the profile photo

      • Alternative text are used by screen readers to inform a user that cannot see the image what is the image is about, or even when the user as slow internet and the image cannot be downloaded

    Ok Jugo-JS, hope this is helpful.

    Keep on coding!

    Marked as helpful
    0
  • Walter Sono•660
    @waltersonoPosted almost 4 years ago

    Hi AnkitLamsal

    Nice work completing your first challenge.

    Here are some points to improve your next projects:

    • Add a transitions on when the user hover the button

      • This will make a smooth experience on button hover
      • Just add this to your button transition: all 0.2s

    • Target your elements by class not by element

      • This will make your projects easy to maintain because
      • If you had given the a tag a class you could have style it with fewer lines, like so:

    HTML <a href="#" class="button">Learn more</a>

    CSS .button { *styles go here* }

    • Learn BEM Naming convetion
      • Has a future professional, you want to write clean code, easy to understand and easy to maintain, writing your code following a naming convention is a good practice

    That is it my fellow mentor

    Hope this is helpful, and keep on coding!

    See you!

    0
  • Walter Sono•660
    @waltersonoPosted almost 4 years ago

    Hello David-ODB57

    Nice work, the design looks good and you have organized your code. That is good.

    Here are my suggestions:

    • Add a border to the buttons before hover

      • Because you added a border on hover, when you hover the button it grows and does not look good

    • Add a transition on button hover

      • This will make the hover effect smooth

    • Fix the attribution text

      • Instead of making the body flex, add a container and make it flex
      • Then move the attribution text outside of this container to it can be below of your solution

    • Add media queries at the right breakpoints

      • I believe the best breakpoints to add mediaqueries are when your design starts to break
      • You design starts to breaks at 1116px but you only added at 600px, this is not good
      • Dont rely on devices dimensions because that changes every time, you do not want to go back to your websites to change your break points every time a device with new dimensions comes along

    • Provide an alternative text to each image

      • Alternative texts help screen reader users to understand your content despite their difficulty to see

    • Use links for links and buttons for buttons

      • I think that instead of using a button you should have used a link
      • Imagine if this was a real website, you would have write a JS script or backend script to be able to redirect the user to a "learn more" page

    Ok, this is a lot

    But that will make your next projects better.

    Hope this is helpful.Keep the good work

    Marked as helpful
    1
  • Walter Sono•660
    @waltersonoPosted almost 4 years ago

    Hi susu548

    Nice work

    To answer your questions: I suggest that you use media queries.

    I believe that one should understand first how to do without any framework because when it comes the time to use a framework it will be very ease and will know what framework to use, what are it strength and weakness.

    Hope this is helpfull, keep coding

    0
View more comments