Creating Tesla's Website in Bootstrap Studio 4 (Tutorial)

Creating Tesla's Website in Bootstrap Studio 4 (Tutorial)

46
48



In this tutorial we are going to use Bootstrap Studio to create a great looking page from Tesla’s website. We’ll put it together with our drag and drop builder, write some CSS, and add eye-catching animations. Get Bootstrap Studio at https://bootstrapstudio.io

Tesla Roadster Website
https://www.tesla.com/roadster

Image Assets We Used
https://bootstrapstudio.io/resources/tesla-video/images.zip

Bootstrap Better Nav JS Plugin
https://github.com/bootstrapstudio/bootstrap-better-nav

Tesla Roadster Video on YouTube

The Final Bootstrap Studio Design
https://bootstrapstudio.io/resources/tesla-video/tesla-website.bsdesign

48 Comments

  1. Most of those animations at the end aren't included inside my Bootstrap studio…

  2. great video, could you make on how to order elements in depths (z-order) ? i don't know how to use this in bootstrap studio (i own the lifetime version), anyway i've learned alot from this one.

  3. Hi there is an issue after imported external links navbar is looks great but it doesn't collapsing after clicking the link kindly fix this
    Issue is at 9:45 mins

  4. Could you do more tutorial about the Tesla site, but in html and css pls

  5. this is very cool but is there an online editor for “bootstrap studio 4” so clients can update text and simple images?

  6. Very likely the best tutorial I have ever seen on YouTube. Bravo.

  7. Your teaching is thorough & clear, but Bootstrap Studio is still too unintuitive for most. The makers assume users know CSS.

  8. Free Bootstrap wants a "License number"..? how can I do that? They give no such number.? Peace :!

  9. Amazing video and amazing program! I like it!

  10. More videos like this one

  11. When exporting the site, the footer vertical line is only visible in the footer, and not on the section above. Couldn't find a solution to fix it yet. any ideas?

  12. NÃO PUBLICA EM SERVIDOR EXTERNO !!!!! – DESISTI DE COMPRAR !!!

  13. Please help me to create side menu on toggle click as well as top navbar menu

  14. Can't import html bootstrap templates and edit with page builder? Why not…

  15. Excellent video, and outstanding work for bootstrap studio. This is somehow revolutionnary, especialy for CMS themer. You deserve to gain a large amount of money for you work.

  16. Fully sold it to me. Buying it right now. Brilliant tutorial

  17. Video neither auto-playing or looping (latest version of Studio), help please?

  18. What is a "section" in bootstrap?

  19. Waiting for Polymer studio with those new web components

  20. ur talking like a robot android teacher, sorry man just had to but absolutely great tutorial btw, i hope they keep developing and improving this app, as much as i like to call myself a programmer i cant stand handcoding a gui theres nothing like a good ui builder software

  21. This would take me 1-2 days and you did it in 45 mins 😩

  22. I made a tesla website with html and css from scratch (no framework) https://youtu.be/wGsFJ2gLDEg

  23. This is for designers or developers? Can i create a theme for blogger (blogspot) with this? Seems amazing 🙂

  24. hehehe html need to upgrade this shit, because you are just repating the same codes and some changes muah! hope there's a cool web builder for this easy

    Best Programs i've seen:
    Boostrap Studio
    WYSIYWG Web Builder

  25. How about the Backend tutorial for Sign in button? any tutorials on that?

  26. tutorials are very fast and very advanced…the voice is very fast and his hands move very quick…as we try to see what he is doing he moves to next topic…have you designed this tutorial for seasoned and expert category of viewers ?? why cant he start from a simple website with layout rather than starting from apple website or tesla website ?????? ther is no documentation also…is there any book ??? PDF ??? the background of this website is black we cant see where exactly he ismoving his mouse pointer….as we reach there we loose attention from his speech and till that time he moves to third topic in the row….???

  27. This is great. The harmonious combination of rich colors. There are no words. Keep up the good work.

  28. I bought it, no regret it! It would be nice if we could send you some websites and you make a video to replicate them using bootstrapstudio, do this once or twice a month and I'm sure you'll sell more this application.

  29. Before buying it …. Does this version support PHP Pages????

  30. i have not "center" in the nav align options

  31. I echo the congrats on an extremely well done tutorial. The pace, target audience, and extent of what you eloquently showed is spot on. I've built a few Bootstrap 3 sites by hand (backended by PHP), and what I struggled most with was the design part (vs AJAX, backend). So much of BS4 gets exposed here, instead of spending days on stackexchange. Even if just for learning BS4, this looks well worth it. Hoping for a 10% off coupon as well 🙂 but the license cost is perfect as it is.

  32. Moore videos with BS4, please:) Can you show how to add subpages for navigation?

  33. Great solution for static sites, even came with free hosting! Kudos!

  34. Great video! Clear and concise! Very helpful!

  35. How can you export just the html and css files from bootstrap studio? I would like to export and upload them to my hosting service.

  36. Too worth to pay! Surely I'll buy this software!

  37. thank you so much and am ready to puy very awesome

  38. 2,200 likes to 37 dislikes, this is how you do a tutorial…no wasted time, no bs, everything is clearly explained by example. Thank you for making this.

  39. I totally forgot to create a new CSS block so I got bent over pretty hard by the inline styling when I tried to work in some media queries. I'm really excited to learn this software, it looks great and really powerful!

  40. wow! no word to describe, guys you nailed it.
    i was many design tool so far but i didnt see like this one.years of experience and codings in a small pack called bootstrap studio great work

  41. Good tutorial please make every week new design new web site I'm planing buy your soft

Leave a Reply

Your email address will not be published. Required fields are marked *