Creating Apple's Website in Bootstrap Studio 4 (Tutorial)
Vložit
- čas přidán 27. 07. 2024
- In this tutorial we are going to use Bootstrap Studio to create Apple's iconic home page. We'll put it together with our drag and drop builder, write some CSS, and publish it online as a real website. Get Bootstrap Studio at bootstrapstudio.io
Image assets we used
bootstrapstudio.io/resources/...
The final Bootstrap Studio design
bootstrapstudio.io/resources/...
We want more tutorials man. Nice Job !
Agree..more videos please
Absolutely, couldn’t agree more
this goes over so many concepts in website development in 21 minutes it's unbelievable, I think a beginner would have to google a few things but its a very good tutorial.
Loving the product and these videos are awesome. Don't stop!!!
This is the most efficient and compact tutorial that I've ever seen.
The best product of this type I have ever seen! The best spent money!
I am pretty much curious to know lot more how to design. Thanks Bootstrap Studio you came up with new video. Hope you could get more and will follow you along.
Also interested to get licence for Bstudio.
Best explanation I have ever watched, very much appreciative. Thanks
Best video on the subject..extremely clear and concise..thank you
Why don't more people know about this!? This wonderfully demonstrated tutorial really shows how fantastic this software is. Keeping making them. I'm definitely investing in this.
Just got the tool after resolving the issues with card payment, hoooh! I think it was the strong security/authentication process!. Anyway, I like the tool and design of it. Nice job and it is making my prototyping much much easier than pure hand coding. Great future for this tool and thanks.
Nice New Tutorial!!
thank you so much we need more
you should make more tutorials this is really helpful
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". 🥰
need more tutorial TT , thanks for the tutorial.
Super clear walkthrough, thanks
👍 👏 Great demonstration of the power and ease of use of Bootstrap Studio! I love !! ;-)
Thank u so much. More in the future would be nice
Thank you for this video! Yes, please make a lot more demo videos like this.
Also, can i import a pre-built Bootstrap template and edit it in Bootstrap Studio?
More tutorials please! Also, it would be nice if you had a showcase of websites that have been created through BS on your site!
Thank you. Thank you for making an inexpensive tool that doesn't require paying 15$ a month just to keep your website running. Some of these subscription services are quite good, but are expensive and often force you to stay on their platform. Here you can just export your website and have all the controls you can think of for your website. The only real competitor in this regard that I know of costs 100$ more so..
Keep up the good work and don't resort to turning your program into a subscription-based vicious circle please :)
Very explaining. Thanks!
Great tutorial! Thanks!
We need (would love) many more tutorials... PLEASE!
If you post more videos like these, I'll be happy buyer.
I'm new to web developing/desining and the ease of making that navbar scared me
samee
It's a bootstrap studio 4 software tbh I don't think you can learn much things in this bootstrap software use bootstrap css file in your head elements and js bootstrap at the ending of the body element and try to make your own navbar and things so that you will understand things of how you make a navbar or other things by coding it, you won't learn anything if you first started with the bootstrap studio 4 software I would recommend only coding for you as you are new to these things go on and do not give up if you don't understand anything and just go on maybe bootstrap won't make sense to you in the starting as i also didn't understand anything at first but it will when you'll master HTML5, CSS3 and JavaScript It will take alot of time or not if you're a fast learner but it took me 4 months in HTML5 CSS3 JavaScript i did not master in these three things but yeah i am an intermediate in these now and other things won't be so hard to learn as if you become an intermediate and if you gonna start bootstrap your first responsive website look first start with the 3.4.1 version of bootstrap it is easy and you will get the things faster and from then on you can learn latest bootstrap version 5 it would all make sense if you start from 3.4.1 learn some classes of it and then learn bootstrap 5 it would be so easier to you and from then on you can make your first Bootstrap responsive website and you will feel so proud of you tbh so go on and Happy Coding!
@@yournetworkslow4609 Hey, really appreciate the advice, I didnt't really stick too long with this piece of software and ended up learning things "the usual way", like reading documentation and stuff. I did not look into web development for a lot of time because the school does not give me much free time, but I really wanted to create a personal website, so maybe I will because of your comment, thank you!
@@notlatif6214 Hey you did good by not sticking with this software too long and go on i know you can do it even though you don't have much time because of the school but i know you can do it and i am glad i motivated you to build your own website
Have a great Day😃
Really nice!!
Excellent work. Got some time? Adding Angular 6 or ReactJS with SASS styling is going to be fabulous.
Wonderful tool, bought the lifetime version.
how could we not? Such a great tool
Wait, you're telling me that you can create the whole Apple's Home Page in like 20 minutes??!! Man, Bootstrap Studio is definitely powerful...
I love the tutorials! Can you make a tutorial for a landing page?
fenomenal. Abriu meus olhos para um novo mundo. Mamei
great stuff, thanks
Nice One!!!!! Thanks
thanks guys, i subcribe now, your re chanel amazing
Love love love ❤️
I just download v4 today the lifetime version am excited to learn more
Excellent !!!
Very good tutorial
This is perfect, would like to see more 👌
14:00 - always good to be nicely "spaced out!" LOL
mm that aged well.
good job i also make it with the help of this video with great looking apple web page
existe algun tutorial de Boorstrap studio 4 en español?
gracias
this is going to save my life
Great tutorial, but in Apple webpage the product image changes if is open it on a small device. How to do this in Bootstrap Studio? How to use display properties? Thanks
Hey . Is the search icon functional in the menu bar?
I really enjoyed the tutorial; however, it was going too fast. There wasn't any explanation or demonstration of the interface. There were hiccups that I encountered that were not explained. The two images in the grid (the iPhone 8 and Apple Watch) were tall in height that they overflowed over the other sections. Luckily, I fixed it, but please take your time to explain every detail.
Yea definitely.. the speed of the Tesla tutorial was way more digestable.. I had to keep pausing this and rewinding..
learn css lol, never rely 100 on some dudes shortcut until your sure his program doesn't , hmmm idk installs a delayed crypto miner
Fantastic!
Hi can you put on Bootstrap Studio this fonction. Like searchbox and search results page
More tutorials please
More tutorials please!!
THANK YOU THANK YOU :)
at 6:43, instead of making a new class to give a right margin to, you could use the bootstrap built in classes for margins, like mr-4 (mr = margin-right, also there are many similar classes: mt -> margin top, mb -> margin bottom, pr -> padding right. You can add a number with a dash from to 2 to 5 like so: mt-5, mr-5 and so on... or use mx which is margin auto)
Classy !!!!
wow amazing
What are the advantages of using bootstrap for simple websites as appose to Wix or other premade platforms?
Hey! Just a small doubt, whenver i am trying to chnage the colour of the nav bar using css blocks,after changing the bckground colour a red cut out mark is coming on the written line so as a result i am not able to apply the color of my choice.
Thank you
Upload more tutorials broo
Wow. Watched this tutorial 4 mins. Instantly bought BS :-D
I did too! haha
This guy needs to teach at university hes clear and concise with what he is saying!
Amazing
10:00 why do you add divs inside the columns? why not use the col-md-6 that's already there?
It's best to put add a div so you can manipulate it's content or just for your naming conventions as you like without affecting the col itself
wonderful
Nice ... but can you update this tutorial, showing how to create an apple look-a-like responsive footer navigation menu.
we want more videos...great app..
Very nice...
brother which version of bootstrap studio you use in this video can you please tell as soon as possible ??
how do you get rid of the brand at 1:00? in the video it magically disappears when he fixes the navbar to the top. my overview shows it is a locked component and no delete option comes up when I highlight it
Im not sure, but u can select the navbar and got the option on the right side named "brand" ..just deactivate it.
@@Neeschar thanks that worked
i want add input text by Add button and display in Text area text field...can u help me?
ı dont have any grow option under the direction
very good
Need another tutorial!
How do you get the images?? the url leads to a blank page
My text on the navbar is ghosting to the left how do I fix it
hello all .
can anyone help me with explain each icon so that i can understand what is what or is the a pdf i can read ?
each icon has a title. If you are unfamiliar with the title you can search it on google to understand more.
Hello !
My version of Bootstrap Studio is trial version , where i can found complete version !
Hela El Ouafi u have to buy it in there link
If you are a student then you can have their license for free. They call it education pack.
Hello.. I cant show my styles.css classes only. I always have to click and search trough the html to find my own classes. I see that you could just click on styles.css next to your Styles-field. I dont have that option. Any suggestions?
After watching this, looks like an interesting way to generate nice clean neat code. So I just went a got a lifetime purchase, why not. For the price, it's exceptional value.
More tutorials!
Amazing video I would like to know if I can add an Arabic Language I couldn't make it there can you help please?
@2:52 in the video, I click on the nav item and it does not behave in the way shown. It just gives me a .nav
Something's not working with my nav bar. It's looking odd. Everything else worked perfectly. Can I reach out to anyone who might help me?
hi. Do you mind to explain how the search bar can work? i added a nav bar with search bar but it doesn't work, such going to google or other search engine when i type. thanks!
You need a database on the server and backend programing. This is a front end tool. I am impressed with the smart forms tho:)
what font is it?
how do i add an custom logo?
I'm not too familiar with making live websites but I'm guessing you previously bought the domain and have hosted already so the publish option just updates the website correct?
Yes. Normally you'd have to buy a domain name and a hosting service but what he did here is publish to Bootstrap Studio's free hosting site. The free version is an excellent idea if you want to show clients what the site will look like before they purchase a hosting service or give you permission to publish over the top of their old web.
Edit: I just found out they have a tutorial about their web hosting if you want more info.
czcams.com/video/1QQgu4nE3kE/video.html
Can ı ımport them as a css&html
Which version of the boostrap library does this use?
4.6 for anyone who might be curious.
11:40 -- And they removed options for position, size and repeat! : (
I was stuck on this too! Then I noticed a dropdown arrow next to "Bg Image" - The options are in there!
Shut up and take my money. Just kidding! I just jumped on the bandwagon, excellent job!
Not bad... But youll need to make tutorial of how to make some CRM or Admin Dashboard this will be WAY much useful then this....
Adding custom code in order to change navbar bg-color is not working, bootstrap studio disable it immediately.
Good tutorial. When he selects the navibar and go to css -> and hit the create, the whole class name is inserted into the stylesheet (e.g. ".navbar .navbar-dark .navbar-expand-md fixed-top .bg-dark"). However, when I do it, only the ".navbar" appears in the stylesheet (css file). The same is true for the subsequent link elements. When he does it, the class name is displayed as ".navbar-dark .navbar-nav .nav-link". But when I try it, the style is created only for the anchor element "a" in the stylesheet. Is there any settings to be turned on
same, have you found a solution to this problem?
Hey man can u please help me out ... i dont know anything about css and coding stuff ... and i cannot see what you are coding so please please help me out ...by providing a code sheet or anything else ... please help me out sir
MORE TUTORIALS!!!!
It seems to be you need to have a good understanding of CSS based on this tutorial.. Can all this be-done with the simple tools provided with out writing new classes?
Randy Murray yes it can BUT the problem is that it then adds these styles into the HTML sometimes.
That is interesting my coder just told me the same thing. That it adds the css to inline styles and allot of industry frowns on that.. Now that ive have been using this program its pretty good.. However it is missing allot of css3 stuff.... Cheers
Can this be done in DreamWeaver as well, or is it only something you can do through Bootstrap Studio?
Dreamweaver as well as any other decent website editing software can use the Bootstrap framework to create websites. Bootstrap Studio simply makes it easier to use even if you haven't memorized all the predefined Bootstrap CSS rules.
We want more tutorials
surprised you didn't use one of the four new bootstrap 4 '.display-[1-4]' heading classes instead of just changing the font size in css.. also at 6:28 why not just add the .mr-4 or .pr-4 class to the first link ? all that stuff is built in to bootstrap for just this reason. same with 9:25 -- adding an .mb-2 class to each section. Though I understand about keeping things in the css to keep the markup clean, that doesn't really illustrate or take advantage of those features that are built in with Bootstrap 4.
I think they're doing this to maintain backwards compatibility since some folks may not have or will not upgrade to Bootstrap 4.
Except this tutorial is specific to using Bootstrap 4 in Bootstrap Studio 4, and should illustrate all the nifty things built into BS4 and how to implement them with BSS -- avoiding usefuls to provide some ephemeral backwards compatibility does no one a service; knowing how to use what we have NOW does.
Nowhere is it mentioned that it's specific to Bootstrap 4 (don't confuse it with Bootstrap Studio 4). If you have the software, you'll notice that when you are creating a new design it has a drop-down with 2 choices. Bootstrap 4.1 or Bootstrap 3.3. Yes. There are some folks that still prefer to stay on what they know rather than learn new things. I'm sure you still include metas for IE8 whenever you create new websites. To most of us it's been dead and buried for over 10 years but metas for it are required anyways. We design sites for clients not ourselves. We have to serve everyone of their prospective audience.
If you or anyone else wants a bootstrap studio tutorial for bootstrap 3, there are plenty. There is truely no need to hash over (yet again) what's already been done to death. For NEW tutorials, I would expect that that would use the most current version of things (including their own software!), but also demonstrate not only the power of BSS but of bootstrap itself : flexbox for one. the new margin/padding classes for usefulness, BSS's ability to use bootstrap-sass internally and work with variables (now that Bootstrap uses Sass over Less), the new grid tier, various responsive utilities, etc, etc, etc.
I want new tutorials to teach me things that are useful and powerful NOW, not things that were useful 5 years ago and are already falling by the wayside. it's hard enough weeding thru google searches for bootstrap tips and tricks that aren't dated back to 2013-2015 let alone earlier.
This tute is useful for learning how to use bootstrap studio but NOT so much for learning how to use BOOTSTRAP with bootstrap studio and how to take the best advantage of *both*. I suggest to BSS people that it would be in your best interests to do so, and that there are those of us who would wholeheartedly welcome such things.
Scott, i completely understand your whole logic and agree to a certain point but you have to look at it from BSS POV. They cannot afford to abandon any of their customers. The points you made above would best be answered by an independent Bootstrap Studio specialist - someone who is willing to create training videos independent of BSS.