Landing Page - Redesign of Tesla page

Landing Page: https://aisyt.github.io/tesla-github/
Source: https://github.com/Aisyt/tesla-github

Carousel is not working properly in the Autopilot section and also some videos may not start automatically if you are using Google Chrome. I couldn’t fix them. Except these, I need some feedback. Thanks in advance.

3 Likes

Congrats, amazing design!

I thought the animated arrow was a button that will lead me to the content when clicked. The arrow is calling attention, but when you click on it nothing happens. I think you should review it… so when someone clicks the arrow, the page scrolls to the content.

1 Like

I agree. I was actually going to do it, but I gave up because I was bored. :smiley: I will do it later. Thanks for the feedback.

1 Like

Oh, it’s ok! You did a great work. Keep going (:

1 Like

Clean, modern, eye-catching design, but for this moment the page looks raw, unfinished. Looking forward for the final version, I suppose it will be very good.

And also I noticed the lack of navigation through the page. The only thing I can do is to scroll up and down. I got tired quickly :laughing:

And yes, I clicked on that animated arrow too and was waiting for something… But there was no miracle :frowning:

2 Likes

I suggest that you upload the project to another site to try, Github only supports static pages and blocks features for this reason.

Happy coding!

Nice layout. Typography and responsiveness need a little work.

  1. Your body font (Yu Gothic UI) is not loading for me, and you have not declared any fallback fonts, so i get Times New Roman, not enjoyable.

  2. The responsiveness of the page is not great, it really only looks good on a large or small screen, everything in between looks pretty bad. Make the page use a more fluid approach and use break points when you really have to switch sizes on elements, layout order etc. Also, your media queries should not look like your max-width: 1290px near the end does, there is no way that many element properties need to change their values at the exact same time.

  3. I genuinely think this is a bad idea.

* {
  transition: all .3s ease-in-out;
}

Generally speaking using the universal selector is not great, either is transition: all, combining the two is probably not a good idea.

He only needs a static page (HTML, CSS, JS), what features are you referring to?

1 Like

And also I noticed the lack of navigation through the page. The only thing I can do is to scroll up and down. I got tired quickly :laughing:

At the beginning of this challange I was planning to add navigation at the top of hero section but then I couldn’t decide where to put it. :laughing: Thanks for the feedback, I will consider this in my next challanges/projects.

And yes, I clicked on that animated arrow too and was waiting for something… But there was no miracle :frowning:

Added.

Your body font (Yu Gothic UI) is not loading for me, and you have not declared any fallback fonts, so i get Times New Roman, not enjoyable.

Added fallback fonts. I hope It works now.

The responsiveness of the page is not great, it really only looks good on a large or small screen, everything in between looks pretty bad. Make the page use a more fluid approach and use break points when you really have to switch sizes on elements, layout order etc. Also, your media queries should not look like your max-width: 1290px near the end does, there is no way that many element properties need to change their values at the exact same time.

I have tried to fix that. Looks like I have still things to learn about Responsive Design. I will plan things carefully next time.

I genuinely think this is a bad idea.

You’re right. I think this can lead to problems in the future.

Thanks for the feedback.

Great job on this. Here’s some things I found.

  • The video is covering part of the section below it. Also, I would put it in its own div so that it’s the proper size and not sitting completely on the right edge.

  • The pictures in the Interior section should be the same height as each other that way it will properly align vertically.

  • I think that you need a section right under Interior that is Specifications, which lists them all.

Hope that helps!