Tesla_Ambassador

@tesla-ambassador
Silicon Valley
1,130Points

I love coding and gaming... anime too!!!

I'm currently learning...

Mostly Javascript but also HTML and CSS.

Latest Solutions

Latest Comments

    • HTML
    • CSS
    • JS

    Responsive site using sass, javascript and mobile-first workflow

    1
    Tesla_Ambassador1,130 | Posted 2 days agocommented on Seun Ogundipe's "Loopstudios landing page" solution

    Hey, great challenge, and congrats on giving it a second go.. I haven't seen the first but I believe you have already made major improvements, kudos! I just have a few things to point out;

    1. I think you should increase your left and right margins to make it look a little more like the design, more so on the hero section (the second section after the top section) It's a bit too wide as opposed to the design. It doesn't necessarily have to be exactly like it but it should be close.
    2. When I hovered over your creation section (the one with the images), I noticed that the background would repeat it's self. I think you shouldn't change the background properties when you hover, it's much easier that way (I haven't learned sass yet so I couldn't easily get my head around your styling but by the end of this week I will have learned it and I will be able to help much more!) also the images were a bit stretched out.
    3. The texts don't change color to black when you hover above the creation section. I think in order to fix this, you could place them in a span and set the desired attributes when you hover above their parent container.
    4. For the HTML issues, consider using a <ul> or <ol> tag instead of a <div> tag as a parent container incase you are going to use a <li> tag... This will clear all your HTML invalidations and some of your accessibility issues.
    5. For some of the other accessibility issues, you should use only one main landmark, you can replace the other main landmark with a section or article landmark(s), you should also make sure all your divs, headers, image tags etc are contained within landmarks like (main, section, article, footer etc) Otherwise, this is really solid work, keep up the good work and keep on coding.
    0
    • HTML
    • CSS

    Stats card by a nerd πŸ€“.

    2
    Tesla_Ambassador1,130 | Posted 3 days agocommented on Shreyansh shah's "Stats preview card component" solution

    Hey, congrats on submitting your first solution! It's pretty awesome too! I just have a few issues to point out;

    1. Incase you want to get rid of a repetitive background like the way it is with the div containing your hero image, just set the "background-repeat" property in your css to "no-repeat".
    2. I noticed it wasn't responsive too just like you stated in your comments. But it's good coding practice to continuously resize your screen and apply media queries when items lose their alignment. It makes it super responsive.
    3. If you want to use some attributes more than once, consider using classes instead of ID's to avoid duplicate id's and this will eliminate your html issues.
    1
    • HTML
    • CSS
    • JS

    HTML CSS JS

    2
    Tesla_Ambassador1,130 | Posted 3 days agocommented on Prajwal Gautam's "Base Apparel coming soon page" solution

    Hey, this is some really awesome work! Good job on submitting this! I just have a few things to point out:

    1. If you are going to use JavaScript to validate your email, you shouldn't add required to your email input because the default error message prevents us from seeing your error message since it's displayed on top of it.
    2. I noticed some space between the hero image and the right margin and incase you want to fix that, consider just using display flex on the parent container and then in order to push it to the margin it's self, set the justify-content property to space between and it then pushes both containers to the edges of their respective margins. I like that you don't have any accessibility issues and HTML issues, Kudos! Keep up the good work and keep on coding!
    0
    • HTML
    • CSS

    Responsive card section using CSS Grid

    5
    Tesla_Ambassador1,130 | Posted 3 days agocommented on Ryan Calacsan's "Four card feature section" solution

    Hey, this is so flawless, the alignment and all is just right! Kudos! Incase you want to eliminate that accessibility issue, consider using the header tags in a sequential order (h2, h3, h4...) It improves your site's accessibility more so for people that need to use screen readers this issue came about because you used the h2 tag before h1. I like your solution and this is some really good work! Keep on coding.

    0
    • HTML
    • CSS

    flyo-landing-page-with-two-column-layout-master/

    1
    Tesla_Ambassador1,130 | Posted 4 days agocommented on Jaideep singh thakur's "Fylo landing page with two column layout" solution

    Hey, this is a pretty fantastic solution! This is all I can say;

    1. Consider adding a little interaction to the email submit button. You can use a simple email validation function to solve this or incase you aren't yet comfortable with J.S yet, in your html, add "required" to the input tag of the email.
    2. For the accessibility issues, make sure that your heading tags are in sequential order i.e. (h2, h3, h4...), your document should contain only one main landmark, I recommend that you replace the second main landmark with a section or article. Lastly, your html elements should be contained in landmarks that means that all your divs, image tags, header tags(h1, h2...), buttons, etc. should be contained within landmarks like (main, section, article, etc.) When you fix accessibility issues, you make it easier for people that use screen readers to access/navigate your site.
    3. For your html issues, I recommend that you omit the font-weight on the html tag, usually, it's recommended that all your styling is done in you css, it helps a lot then also consider adding header tags (h2, h3...) to your section tag. This is usually required when you use a section or article landmark. Otherwise, this is very good work, keep up the good work and keep on coding! Kudos!
    0