Skip to content
OverviewSolutions
23
Comments
22
Walter Sono
@waltersono

All comments

  • Walter Sono•660
    @waltersono

    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
  • Walter Sono•660
    @waltersono

    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
  • Walter Sono•660
    @waltersono

    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
  • Walter Sono•660
    @waltersono

    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!

  • Walter Sono•660
    @waltersono

    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
  • Walter Sono•660
    @waltersono

    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

  • Walter Sono•660
    @waltersono

    Hi alexvillhen

    Nice work

    Here are my suggestions:

    • Use the headings in order

      • You use a h2 but there is no h1, this causes confusion for screen readers users
      • You could have used h1 for "Join our community" and h2 for the other titles
      • You can see by the design that "Join our community" is bigger then the other titles

    • Avoid using "ems" for margin

      • This unit is relative to the current font-size, and the global font-size. It multiplies
      • Use rem instead

    • Add hover effect to the button

      • This will make the user experience better

    Ok alexvillhen, hope this is helpful.

    Keep working.

  • Walter Sono•660
    @waltersono

    Hi rks1995, nice work

    The design looks good,

    Aside from what Vanza said, here are my suggestions:

    • Use the correct README.md file

      • Use the template provided in the resources, people are going to look at your repository and they need to understand what is the project about

    • Give an alternative text to each image

      • This helps screen readers users understand your content

    • Use the correct HTML tag

      • If you have a header use the header tag
      • The main tag should not contain the header, nor a footer
      • Every web page should have an h1

    • Use the headings in order

      • I see a h3 but i do not see a h1 nor a h2
      • This causes confusion to screen readers users when browsing through your page

    • Add an hover effect to the buttons and links

    • Add links to your footer items

    Ok rks1995, hope this is helpful.

  • Walter Sono•660
    @waltersono

    Hi nicholask98

    This is very good, the design looks for both layouts (mobile and desktop)

    Here are my suggestions:

    • Give an alternative description for each image

      • Alternative descriptions helps screen readers users understand your content

    • Try to target your elements by class not by structure

      • If you target your elements by structure that may compromise your design if you were to change the layout even a little bit
      • Instead of targeting the button by ".section > a > .button" just write ".button". If it is a special type of button then give it another class ".button .button--special"

    • Use the correct HTML for each element

      • For the button use a button tag
      • If it is a link then style the link directly do not insert a paragraph tag inside of it
      • This is also helps people with screen readers understand your page and present your content correctly
      • Also helps you reduce the amount of HTML and CSS you write

    • Add and max-width for mobile and center it

      • It will make the mobile design not stretch and will look even better

    Ok, nicholask98

    That is it, keep the good work!

    Marked as helpful
  • Walter Sono•660
    @waltersono

    Hi salymk, good job

    To change the overlay color you can use:

    background-image: linear-gradient(rgba(color,opacity), rgba(same-color,opacity)), url(path/to/image);

    Hope this is helpful

    See you!

    Marked as helpful
  • Walter Sono•660
    @waltersono

    Hi deepchhatralia nice work

    About your request

    • Background-image: linear-gradient(rgba(color, opacity),rgba(color,opacity)), url(path/to/image)

    Here are few other suggestions:

    • Avoid using inline styling

      • Inline styles are bad practice because of the high level of priority they possess
      • Also because it will be hard to maintain

    • Learn pure CSS first

      • This will make you understand any CSS framework
      • I see that you only used bootstrap because of the columns, but now CSS have flex-box and grid layout which can help you build columns and fluid layouts easily

    • Use the Headings in sequence

      • In this case i do not think you should be using h3, because that is not a subtitle
      • Also you are missing an h2, if there is no h2 then it shouldn't be a h3 (is not a best practice)

    Keep up with the good work! See you

  • Walter Sono•660
    @waltersono

    Nice work avi3101

    Here are my suggestions:

    • Learn pure CSS first

      • If you can understand CSS well you will understand any framework very well

    • Use the "alt" attribute well

      • "ALT text is accessed by screen reader users to provide them with a text equivalent of images." - https://accessibility.psu.edu/images/imageshtml/

    Marked as helpful
  • Walter Sono•660
    @waltersono

    hola jduquinonas

    Buen trabajo

    Me gustó el hecho de que organizaras las carpetas de tu proyecto y el hecho de que tus clases de CSS también estuvieran organizadas.

    Aquí están mis sugerencias:

    • Establezca un "ancho máximo" para "contenido" y céntrelo con margen: 0 automático

      • Porque es raro

    • Reducir el valor de los medios deseados para el escritorio

      • Sé que lo desarrolló para dispositivos móviles primero, pero estos valores son demasiado grandes, básicamente asumió que el tamaño para dispositivos móviles es inferior a 1440 px, pero eso es demasiado grande para dispositivos móviles, en mi computadora portátil que tiene 15 ", el diseño que aparece es móvil y no de escritorio

    • Utilice dos fondos en "contenedorColumna2"

      • Es posible usar dos fondos en un div como este:
      • background-image: linear-grandient (hacia abajo, rgba (color, opacidad), rgba (mismo color, opacidad), url (ruta / a / imagen)
      • Esto reduce las líneas de código

    • Intente siempre corregir los errores que aparecen en el informe anterior.

    De nuevo, muy buen trabajo.

    Hasta que

    No hablo español, hablo portugués. Traducido este texto en internet ... kkk

  • Walter Sono•660
    @waltersono

    Good job devinbluntj

    It looks very good and i like the way the organize your CSS into parts, nice job.

    Here are my suggestions:

    • Use some naming convetions

      • This will help you better organize your code for maintainability and be able to work with others

    • Use transition on the button

      • This will make the hover effect looks smooth

    • Write code for accessibility

      • Use the correct html tags for the write purpose, the main tag is not being properly use
      • Provide an alt text to images
  • Walter Sono•660
    @waltersono

    Nice work Leskim

    It looks alike

    As a suggestion i would say:

    • Add a transition to the button, so that the hover effect feels smooth

    • Use the correct tags to the correct elements: use <header>, for the header, the <main> for the main and <footer> for the footer

      • Using the correct tags helps search engine classify your website better, helps people with disabilities have access to your content in the right way

    • Use some CSS naming convention

    • Your code should work but also be maintainable

    • Try BEM, is not perfect but its a good

    • Instead of targeting you headings (h2, h3, h4, etc) by html structure, target them by class

      • This has to do with maintainable code, in this case if you ever change the order of you html, the h2 will no longer have the styles applied to them

    That is it!

    Keep the good work

  • Walter Sono•660
    @waltersono

    Nice work Karthlk.

    I looks As of a suggestion i would say:

    • Use "rem" instead of "pixels"

      • Because "rem" unit is relative to the global font size, so that you can easily modify the size of the entire web elements on different view ports

    • Use a naming convention for your next projects

      • You always want to write code that works and that is maintainable, code that others can understand and you can if you came back to see months later
      • Try using BEM or other naming convention

    • Use "aria-label" for the input for accessibility

      • When writing html code we should remember that there are people with some disabilities that will also use the site
      • You can watch this video from google on accessibility: Web Accessibility
    Marked as helpful
  • Walter Sono•660
    @waltersono

    Hi Akash

    Nice work,

    Just as a suggestion:

    • Dont set heights to images unless you really have to;
    • To fix the weird streching of the image when resizing the browser just remove the height or set it to "auto"
    Marked as helpful
  • Walter Sono•660
    @waltersono

    Hi @palgramming

    Love your work, and discipline.

    Just made a pull request to give my suggestion on the gradient and dot position of this component.

    See you

    Marked as helpful