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

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 bootstrapstudi...
Tesla Roadster Website
www.tesla.com/...
Image Assets We Used
bootstrapstudi...
Bootstrap Better Nav JS Plugin
github.com/boo...
Tesla Roadster Video on KZbin
• Roadster
The Final Bootstrap Studio Design
bootstrapstudi...

[@CNC-Time-Lapse]

Being a web developer / designer for nearly 20 years, I've always be apposed to using design tools for web development because they were horrible. I'm not going to lie, I will probably buy this... this seems way faster than coding by hand while still being completely in control of the generated code since it follows modern standards. Well done! I thought this day would never come!

[@HelloThere-xs8ss]

George D. Marsack this is crazy. Web design is becoming similar to organizing my desk.

[@schumanncombo]

this have realy NOTHING to do with modern standards and of cause nothing with design at all. i disagree completly and our job for 20 years is not about being faster ... design is an intellectual task. and bootstrap the LAST thing i would use a great result.

[@HelloThere-xs8ss]

Richard Schumann Spelling is an intellectual task as well :) I wouldn't worry about bootstrap studio, there's more to the web than this.

[@tobias6361]

Extended Vision Tell us, what others Programs are there? Because this one Looks pretty good

[@davidfally5449]

Tobias Keller Adobe Dreamweaver as an example. But it’s hell expensive.. do you would be way better of with Bootstrap Studio

[@EltronOfficial]

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.

[@CharlyDS]

As a developer I must say this is an awesome application. There's an audience as usual. You need to have or develop some CSS skills but Studio will help you there (the media query helper!). This video itself (bring them on!) enforces the good usage of classes, flexbox etc. The code generated is beautifully formatted and you get a free hosting, instant preview too. Don't look here for a zillion ready-made themes/templates, others do that already. You get very nice basics and great tips on how to use *proper css* to do what you want. This is becoming a lifesaver in terms of mocking up, designing "blocks" and reusing too. And also, learning, nothing like checking out the results in realtime: I would only buy it for the div/container/row/column grid design. Then it's my work to integrate everything.

[@trevorns0]

I bought the software (lifetime), and after watching the video, I bought a Tesla. (not really but damn, good looking cars) But no BS good video, good learning.

[@MrMasteryder]

I actually bought it to test it out thanks to this tutorial, it seems to ease the pain of writing everything from scratch a whole lot. Just one thing it's "ion icons" not "icon-icons", it's icons that come from ionic, a angular based framework for building progressive web apps

[@AlvaroDiazCastro]

Say no more.... take my money. - What a great app, a timesaver for a designer. Thanks.

[@Cooldude421424]

Please make these kind of videos every week with new website that way we all can learn a lot and it will also increase your sales so think about it

[@ocmetals4675]

I second CoolDude's motion. Hear! Hear!

[@top-infinite7194]

Fuck you coolshit

[@rubhan94]

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!

[@Etthundraettan]

If the reserve button in the first section doesn't animate until you scoll down, make sure to set the offset value to 100px in the Animations Tab. Extremely nice video btw, please do more, your voice is very nice to listen to. Also, you seem to have prepared for this tutorial a lot. Well done!

[@rubendacostaesilva8442]

That worked, yes, but why?

[@AndreFerreira-lox]

I have found this app randomly on the internet. As a web developer it always was horrible to code it manually and so I avoided it as much as possible, as I was faster in creating designs for example with DIY wordpress themes. With this tool I have finished a site in less than one hour for a work I normally took one day. This is awesome! This is a great tutorial. Keep doing such good tutorials. Thank you! :)

[@kevinstuart6921]

You ain't a developer then child.

[@CaptainMagyarorszag]

Oh my god guys.. This is EXACTLY I dreamed for! I planned how the heck I am going to write a desktop software to make UI by drag and drop items and edit the code if necessary. That's because I haven't found anything like this on the internet. Now I dont have to, because your software is cross-platform, affordable, fast - I mean really fast compared to competitors, nice, easy to get started - thanks to this tutorial. This saves me a ton of time. Bought it instantly. Thank you, I am grateful!

[@socrayhte]

We sure need to have so much more from you.This is where Complex feel Simplified & Simplified feels Awesome!

[@sergevinogradoff6024]

Oh my gooooooooooooooooood... I'm a backend developer who always hated front-end stuff because of its finickiness. Finally, I can just click a couple buttons and make it awesome and forget about it.

[@WaheedAkhtarWahid]

In my 19 years of career of design and UI development, never saw HTML editor this promising. Have been playing with it for three days, and I can vouch for it. The HTML created is cleaner than the handcoded HTML (in many cases when coming from average to mid-experienced HTML developers). To be honest, the HTML created is comparable with the hand-coded HTML by an experienced HTML developer.

[@DianteEx]

I watched the first tutorial and I bought it! now I'm learning a way to build responsive sites. Thanks for helping a graphic designer grow his skills!

[@sammohanmishra5411]

You are teaching the best for Bootstrap software in KZbin world...plz do more videos oftenly and pls do video on sign in/log in page and login in redirect topic

[@fenixcustomsoftware]

if this is the best, I'd rather do things by hand. This is horrible web design.

[@flexsealkittee4946]

Miguel Garcia From your other comment, it seems like you have something against bootstrap or bootstrap studio or you’re just dumb.

[@fenixcustomsoftware]

@@flexsealkittee4946 I love bootstrap. Putting ID's and classes for everything creates bloated code. No thanks. There are better options. The dumbass is you by the way.

[@fenixcustomsoftware]

@@flexsealkittee4946 Good luck with the maintenance of that crappy code....lmao

[@michaelddon]

@@fenixcustomsoftware So how would you have done yours?

[@teminoah2960]

This is an epitome of the latest and greatest tools .Well done , you deserve a thousand accolades

[@marcioj16]

Oh my God! Hallelujah! Finally new videos added 🍾🍾🍾

[@davidharrington1133]

Very impressed with this product. Recommended for anyone who is not very familiar with CSS

[@creditwarrior9633]

Beautiful... this app should win a Webby award!

[@ahmadsharifkhannoor]

**Hello, Please bring* us more tutorial where you are going to touch the new functions and options. We are very much eager to see your next tutorial. Thank you so much.*

[@chitresh6582]

Even though I have zero knowledge about bootstrap still I enjoyed the video

[@PwrSrg]

I LOVE this tool. Have been using it for YEARS. I only WISH they would release a "Tailwind Studio" now that everyone I know is transitioning away from Bootstrap. It is also adorable how the announcer says "Buddins" and "Liberry". 🥰

[@ramiibrahem4386]

quick note: the navbar plugin won't work without Jquery (so make sure that you have included it as well ) + Great tool BTW.

[@alescavo3375]

where do I have to include it? How can I make it work?

[@positivepulse548]

plz... help the nav bar is not working

[@fredlunau]

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.

[@deerangaperera2697]

Wow. What a great tutorial. I have been always wondering how to create these types of stunning animated web pages. Now you have thought me how to do those. Thank you very much for this informative tutorial.

[@MrChrisHackwood]

Great video guys - the pace was great and the use case was brilliant 👍 thoroughly enjoyed watching that

[@HFigueira]

You just convinced me to purchase Bootstrap Studio (in fact, just did it)! I spend so much time coding that this will probably make it so much easier to me. Thanks for investing in such a cool tool as this! ;)

[@DebjitMajumdar]

You don't have the vision for efficient coding I must say

[@wawalex1122]

Best bootstrap editor for sure. Thank you for the tutorial!!

[@hbax450]

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

[@manhp]

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

[@OCTOGONE-ITBE]

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.

[@HasanAli-yk9yk]

This is one of the sick tutorial I've ever seen my entire life. How beautifully you explained everything is worthy of 1m likes. Please upload videos oftenly 😍

[@radiatorvam]

We are waiting for new videos with new design ideas.A copy of the Tesla website was a revelation.We want more and more

[@gokulkrishnan8692]

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

[@motirad]

Superb job! Great video, very informative and friendly. Thank you, enjoyed every minute and am going to use this as an intro to Bootstrap Studio.

[@davifreire833]

This channel mades me like the frontend.

[@OllieWheats]

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

[@cjcarpon8013]

Thank you for this great tutorial, I've learned more technics in this video.

[@GameShow1050]

I have just studied CSS and HTML recently, Now this will save my lots of time in the future ;). I am modern developer LoL

[@aoccza7]

Damn!! Its a pain in the ass to follow this tutorial. The interface has changed since 2018

[@AKSenor24]

Good job! The next video tutorial might be how to organize the menu with page links (... and how to avoid "flashes" during the load of other pages; I had some issues with the color of my footer that was shown for some milli-seconds on top of every new page-load)

[@richardquinn9583]

Brilliant! Learn't a lot - great demo of the Flex and Grid together. More videos please!

[@MaghrebProductions]

I am really impressed! I would like to see more and more of videos like these from you.. Perfect channel!

[@AloneinFiction]

I finally understand the power of Bootstrap Studio. 🤤👍🏻

[@nfsxkdcc]

Great video! Clear and concise! Very helpful!

[@seth4402]

Yep, more tutorial would be great! Showcase how quick and powerful this app is for prototyping!

[@EsenciaGlam]

increíble amigo, muchas gracias por estos tutoriales, espero mas vídeos para este año 2020, me ayudas mucho a conocer esta poderosa herramienta que es boostrap studio para el diseño web, muchas gracias y saludos desde Venezuela

[@crazystrum2005]

Wow! That was awesome. Please make more videos like this one.

[@sirping]

Awesome Video. Awesome Advertising. Awesome program.

[@aboodsalami300]

What a stunning tutorial .. waiting for coming tutorials.

[@saurabhgrewal8210]

keep addding new videos...much love

[@webdev10000hours]

04:44 : I'm having problems here. When i go to take the text "Brand" out the whole section collapses and the logo isn't visible. For extra detail; whenever i try to change the height and width they display crossed out within the CSS. Any tips? Thanks

[@surajkakkad8873]

use 39.6px as height for the navbar brand

[@webdev10000hours]

@@surajkakkad8873 thanks. Do you know why this is the case? Seems quite particular

[@carlardron9255]

Great video; well presented and instructional.

[@jasonfenris1791]

Great tutorial (it really helped me to use the software!), HOWEVER, at 28:49 you shouldn't use heading levels to stylize text, doing so hurts accessibility for people who use screen readers.

[@nicholasc.5944]

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

[@MehediHasan-wq4zk]

This is really awesome! Thanks for the video!

[@jorgen5462]

PageSpeed Tools: for PC = 74, for Mobil = 86.

[@buharivlog999]

great tutorial and great app, purchase now!!!

[@Nathanm1990]

hi love the videos need more though please give us more and more often thanks

[@landolsi]

More videos oftenly Please!

[@adamtemple9417]

If I can recommend something for future videos. It would be easier to follow along if you would tell us what your clicking into more often, your black mouse is hard to follow and hard for find where we are supposed to look

[@robertzeurunkl8401]

Agreed. The guy is moving fast, and presenting a LOT of information. it would be hard to narrate every single click and mouse motion, but I agree with you. I ended up applying some styles to the wrong element because I didn't notice a slight little mouse nudge-n-click. But he's going fast knowing that we will be "rewinding" frequently.

[@khalidsyoung]

He’s assuming you have knowledge of HTML css3 sass /scss. I had the same prob so i just coded it manually lol

[@l0veusa871]

His demonstration is too fast

[@f.t.5859]

Please, I beg, more tutorials.

[@ErsinArt]

Nice ! Very Helpfull. Can you make a tutorial how i can install a Theme like "Theme Wagon" in BSS? I mean not a one pager. A multipager with subdirectories etc. Like Pinegrow can do, with only import the main folder as project.

[@stewarthyde5111]

Nice video and similar to Apple one, But the downloaded project as issues with table for specifications not showing up on screen. I also had issues with with other because Body has the color background setup as backup - maybe it should be setup on component below the body.

[@itdhenz]

definitely buying this tools :) great tool indeed!

[@gknt3172]

Finally... After ages

[@juliovillalta4053]

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.

[@engelbrecht777]

Bootstrap Studio has changed since this tutorial. They should update this tutorial... or at least have 1 current tutorial about creating a website from start to finnish.

[@atirah14]

A tutorial using bootstrap 5 is required. Atleast one.

[@curtlemons4211]

did you guys remove the buttons for background color on version 4.3? This tutorial doesn't work with the current version I downloaded.

[@Thomasromer2002]

An awesome feature if you were able to just move text whit the mouse by clicking on it :D

[@clemchooi5022]

this is actually a very good web designing tool...I am wondering how come so little tutorials in youtube ?

[@robertzeurunkl8401]

Great tutorial. Can you do another that delves into how to develop a site that is more than a single page app? A site that involves several pages and covers things like page navigation, session state, and things like that?

[@Sonme-n7s]

this was useful. thank you

[@rapao34gameplay]

Amazing video and amazing program! I like it!

[@frpAIOF]

Incredible. Will definitely buy this software. One question though, is it possible to further tweak the animations via code? Inserting a specific cubic-bezier for example?

[@tommyhare]

CSS grid ftw!

[@sergiosalazar7231]

Great video. Upload more videos, please.

[@OrangedPC]

Is it possible to use and self host your own font?

[@Dylan-iq1de]

Any advice if you want to use this tool to create the front end of a website, where you create the backend yourself. Most of the things I can simple copy, but how about the added ja libraries? Is there an overview of libraries you used in a project?

[@boxfreshpidge]

Make more of these! You sell the product instantly ;0

[@bryce21s]

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

[@BeyondMediaSolutions]

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

[@AdelHaiba78]

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

[@nobel187]

somebady know too edit the smaller asset image compared to the larger image? What kind of preparations did he make for the images sizes?

[@Liqwidbeats]

Hey bootstrap studio , would you please make a tutorial on how to create a music selling website , one that can be used by music producers or musicians .thanks.

[@XENOT]

Why did you change the vertical-alignment of the "Reserve Now" button at 44:45 without telling anyone? Took a while to troubleshoot why my animation wasn't working.

[@ulugbeknurjonov5226]

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

[@joefubu05]

hope the bootstrap can cover frontend and back end

[@mihajlonesic]

Upload more videos! I suggest eg. travel agency website!

[@alexdevden]

I have recently bought Bootstrap Studio, but am confused as to how to work with the html/css that I've made in Bootstrap Studio in frameworks such as Angular/Vue/React. I'd like to not just make a graphic user interface, but also make it functional. Any guides on youtube?

[@skvignesh15]

wow, nice tutorial & awesome software.. Will purchase Bootstrapstudio.io

[@БожидарГидулски]

very nice tutorial! But how to change the color of the navbar plugin? How to customize it?

[@adrianlaub6128]

I liked the tutorial but I'm missing the full page smooth scroll effect like on the original tesla page.

[@Seniorsgdi]

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.

[@stormz4069]

Please do more video !!

[@cacti16s]

Hello, I would like to know how to make the "sign in" and the "log in" buttons work, because I am making dynamic website to sell my products.

[@raymondpcowie101]

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

[@namelessone1811]

Learning this software and bootstrap. Question can anyone tell me why when I put my mouse over the nav links they do not bold. Do I need to add a css hover? TY!