Skip to content
OverviewSolutions
0
Comments
3
P
Andrew Sipes
@ansipes

All comments

  • Christian Wittorp•110
    @cwwittorSubmitted over 1 year ago

    Tried to detail out things I know that I had done wrong and what I wanted to work on.

    Some questions I had for the community would be:

    • How would or did you tackle the image being half off screen for tablet and desktop designs?
    • How do you think about naming conventions for variables and classes? I think mine got a bit messy and want to improve there.
    • Are there any recommendations on things I can improve upon based on my code or implementations?

    Thank you anyone who takes the time to check this out, I am still not great with front end work but I really want to improve my skills and will continue to work on projects here!

    Skilled e-learning landing page solution

    4
    Andrew Sipes•20
    @ansipesPosted over 1 year ago

    Are there any recommendations on things I can improve upon based on my code or implementations?

    1. You are using px unit in many places where rem unit would make much more sense. Watch: Why You Should Use REM Instead of Pixels.
    2. You have a habit of using large amounts of padding to "scooch" things over or create negative space. You can often accomplish the same result with more maintainable code using max-width and margin: auto.
    3. Use additional semantic elements, like main instead of using div.
    4. Validate your HTML. Currently, your HTML is invalid. For example, you put both the nav and the footer outside of the page. All page content should go inside the body. The majority of img elements on the page lack an alt attribute. You can use W3 Validator to see what can be improved. There are also extensions for HTML and CSS validation for Visual Studio Code. I would ignore the "INFO" messages and focus on the "ERROR" messages.
    5. Your background is a bit off from the design. It should be a linear gradient from top to bottom, starting with white and ending with the gray you have currently.
    6. You did not implement box shadows on cards, which is present in the design.
    Marked as helpful
    1
  • Christian Wittorp•110
    @cwwittorSubmitted over 1 year ago

    Tried to detail out things I know that I had done wrong and what I wanted to work on.

    Some questions I had for the community would be:

    • How would or did you tackle the image being half off screen for tablet and desktop designs?
    • How do you think about naming conventions for variables and classes? I think mine got a bit messy and want to improve there.
    • Are there any recommendations on things I can improve upon based on my code or implementations?

    Thank you anyone who takes the time to check this out, I am still not great with front end work but I really want to improve my skills and will continue to work on projects here!

    Skilled e-learning landing page solution

    4
    Andrew Sipes•20
    @ansipesPosted over 1 year ago

    How do you think about naming conventions for variables and classes? I think mine got a bit messy and want to improve there.

    The naming of CSS custom properties was fairly consistent, but make sure to pick a convention and stick to it. You mostly used kebab-case, but things like "headingL" and "bodyM" are outliers.

    The naming of CSS classes was not particularly consistent but it also wasn't poorly organized. You would benefit from picking a convention, for example, BEM, and sticking to it.

    An issue that stood out to me was classes like "button-one", "button-two", and so on. These class names are not descriptive. There was also a decent amount of CSS that could have be shared between these classes.

    Check out MDN's article on Organizing your CSS for additional advice.

    Marked as helpful
    1
  • Christian Wittorp•110
    @cwwittorSubmitted over 1 year ago

    Tried to detail out things I know that I had done wrong and what I wanted to work on.

    Some questions I had for the community would be:

    • How would or did you tackle the image being half off screen for tablet and desktop designs?
    • How do you think about naming conventions for variables and classes? I think mine got a bit messy and want to improve there.
    • Are there any recommendations on things I can improve upon based on my code or implementations?

    Thank you anyone who takes the time to check this out, I am still not great with front end work but I really want to improve my skills and will continue to work on projects here!

    Skilled e-learning landing page solution

    4
    Andrew Sipes•20
    @ansipesPosted over 1 year ago

    How would or did you tackle the image being half off screen for tablet and desktop designs?

    Take note of how the hero image on the tablet and desktop design seems to flow outside/across the boundaries of regions on the page. For example, it goes to the right of the "main" area and also goes up, entering into the navbar area.

    To me, this indicates that a solution will likely involve removing it from the document flow. You could do this with CSS position. You could also do this with CSS background-image and forgo an element all together.

    Be mindful that information is contained within this image (e.g. course hours, number of members), so to be fully accessible, this information needs to be preserved.

    Marked as helpful
    1