How To make a website in under 15 minutes with Wix.com

How To make a website in under 15 minutes with Wix.com


Hello everybody and welcome to exciting episode
of DevTips, this is a unique episode for a lot of reasons. the first one being that I
am not in my garage tonight, which is nice. The second one is that I’m joined by Los Montoya,
I’m not alone. You may remember him from classic episodes like [CSS Basics – Cascades
and Responsive Website Basics. So welcome, Los. Thank you, thank you. It’s also a unique episode because we are
not learning how to code websites, in fact we are learning how to not code websites.
We are using a service called Wix.com to help you make simple and fun websites. Thank you to wix for sponsoring this episode. So here is the set up. Your mom calls. calls you? Yes, your mom calls me. Your mom calls. An she is really excited about
this idea she has, she wants to be a famous food critic. Her idea is, she needs, of course,
a blog. That’s why she called you. You could do what we did and a few episodes
ago in DevTips and start, you know, making a Jekyll Generated blog. The problem is: I’m
not so sure your mom is so excited about running commands in the terminal. Here you go, terminal. Have at it. Enjoy. Another option, you could jump her over to
wordpress land, but even then she is still going to run into templates and an admin backend
that she needs to fuss with before she can get what she wants out of the site. Yea, that’s pretty annoying. You know, I find when you increase complexity
towards reaching a goal, people are less likely to follow through over time. It’s times like this, you know, mom isn’t
trying to learn template hierarchy, when something a little more straight forward, a little bit
more simple is the best choice. So what er are going to do is: we are going
to take that example of your mom needing a cooking blog and we are gonna see if we can
meet those needs using the website: wix.com That’s cool. She called you though? We chat for a long time. She is really chatty. Anyway you’re probably watching DevTips because
you have a friend or family member that called you up as well and said you do internets.
Can you make something for me? And that is why you’re watching devtips, you want to build
something. But there are ways out there to make things
better simple and fun. So I want to see if we can get this all done
in under 15 minutes. Build your mom a blog in under 15 minutes. let’s get started. Cool, so I just locked into Wix.com and the
only thing I can do is just start creating, which is awesome. So I will start creating right now, and the
first step in creation is to pick up a template. And the first step in creation is to pick
a template. and they have tons of really awesome templates that, you know I’m sure we
could find one for your mother. She’s a foodie so let’s just do a search I
guess, let’s just search food. And that one looks nice, salt and pepper. Salt and pepper. Wait, scroll down. How many? 10 pages? 10
pages of food sites. So I’m going to go over, actually I’m going
to go down to the topics, and go to personal blogs. Here’s that salt-and-pepper one. Oh, okay,
this one. I’m going to take one that’s actually not
a food blog because I want to show you guys how easy it is to take things and twist things
around to make them work for you. So this is not a food blog, but we’re going
to turn into a food blog. We are in the preview mode, you can jump in
and out of templates like this, but now I am going to chose to edit this site. And we
are going to load the editor. So the first thing I’m going to do is just
rename this because I know I don’t want the ninja parents blog. I want to call it the – I want to all-caps
this guy – The foodist I made that name up, did you know I made that
name up? Did you make up the not space between the
and foodist? Yes because I’m going to do this, I’m going
to turn that black. Now you see? I am using my design skills! Design! Design! And you thought I couldn’t
design, but I am actually really good at it. What I want to do, is go to the design tab
– okay, yeah – I want to go to the design town, and go to fonts. Now, they have a bunch
of like preset, kind of, Font structures. And you can like just test them out as you
go. There is one that I kind of like down here, this one is fun. Nice and clean, easy
to do. The foodist looks good. But you can customize the fonts even further
– they are not necessarily classes that you would edit in HTML, but you can think of them
that way; this is a title, there are menus, and this is a page. And these headlines will
pop up all over, like each of these blog posts has this level of heading. So if you edit it right here it will show
up throughout the whole site. So I’m going to change this to American typewriter, and
say okay. So now all of my headings have this kind of whimsical type writer feel. And I’ll
do the same with my menu, I want them to be a type writer. Oh nice! It’s fun, and then for the title though I
want something a little bit more slimming, a little bit more sleep then to Houma, which
it’s on. Let’s put it on-they have a lot of fun options here- okay Marzo, there you go.
Really classy. You can see how, because I change the font,
the layout is a little different right? There’s not enough padding at the top, maybe a little
too much at the bottom. What school is that everything on this page that you see is, like,
editable. And you can fidget with it. It’s not like a template that you may be used to
on other very templateized sites. I can click this banner, and just say “ooop! You are smaller,
or you are longer. Do you know what I mean? I can click it – and
it’s interesting how each element impacts other elements very similar to what we’re
used to when we are programming sites. If you say I want this container to be X pixels
tall, The things below it will push down naturally. You will have the same effect here see? I
will scrunch this up – The box that the text is in-and you see howThe better just scrunches
up or down? And there’s a bunch of helpful handy things. So I can pull it down, scrunch
it in, now it’s nice and centered the way I like it. Let’s click on this-they call it a strip-But
it’s like a header here, and change the image. They have tons of three stock images so I
will just type in food and see what we get. And there we are. Three bowls of vegan food. Doesn’t that look cool? The foodist. It’s
the foodist-ist! Ha! But my mom called you? Yeah, your mom is the
foodist now. Okay. Right? She’s the foodist. Okay, so your mom called-what is this ninja
parent doing here? So I’m just going to edit the text, and you edit the text right in line.
So it’s nice about this is that your mom can do it. Literally, it’s so simple. So you’re
going to give this to her, and show her how to do it and then you’re gonna leave her to
it and she’ll stop bothering you. Shhhh! Meet the foodist. Right? And then you can
just change out these images really easily, in fact I uploaded a picture of your mom. That is why am so good looking. Your mom is Kelly Koprowski! Check this out;
you can resize and move around. Why are you moving my mom around? Do you like your moms size. I’ll take this text over here and make it-that’s
just because I put it outside-it’s just warned me that it’s not a good idea, but that’s okay.
So I just kind of put it inside here and she can just change it to be like “hi I’m Kelly
Koprowski” in. And I’ll just shore this up right here. That was cool, did you see how easy that was? Know when you go to the next page, let’s say
when someone clicks into your post. The layout over here is back to normal, so I don’t want
to do is go back to home-it’s just a simple as this-and select this and this and this
and pressed command C. I’ve literally copied it to my clipboard, and when I go to the single-page,
I am just going to select delete, delete, delete. And then command-paste. Woooaaaaahhh Right? Then pull it up, it’s easy. You know
instead of doing that over and over again you can actually make these show on all pages.
Right? So I like cut and pasted from one to the other but you can make these edits and
then propagate these edits throughout all the other pages. It’s really simple to make
changes they go through the whole site. That’s cool. Did you see how when I clicked on this blog
post it kind of faded in and out? That’s a transition. They have a bunch of interesting
transition so you can choose from and I’m going to go back to the editor, pages, and
then page transitions: in and out. The one that I like the best is called swipe– horizontal.
I just think it feels really long, it feels like an iPhone or something. Do you want to
mean? Let me show you this one. I preview, and then I go to home and we could have a
goes swoosh swish. It’s just kind of fun right? Yeah it’s cool. Slides in. I like. So these animations can go not just on the
pages but on the elements that exist individually on the pages as well. So for example I’m just
going to click this random headline here and click add animation, how about float in? Click
okay then when I go to preview. It will kind of happened when I scroll and the element
enters the viewport, this is headlining kind of flying in. See you can do that, you can
build animations on top of each other. You can set it to fly in, and then turn. A bunch
of interesting things that are not just stock. You can make an lot of new ideas out of them.
So you guys can play with that when you sign up for Wix. It is free, so go ahead and just
check it out. Another thing I want to show you guys how
to do this, oh go back to the editor. I click on the background here, everything here is
clickable you can just make edits. For example, oh were not home let’s go to the homepage.
Okay, in the homepage click on this blog and I can edit the settings or the box style?
I can edit the settings for the blog feed, this is pretty cool, look, they have several
different layouts. Yeah, you can do a masonry kind of style. If you have more blog post
it kind of stackers through. Large posts, or this one here, it kind of feels like a
magazineish layout. And you can go into these elements and say I want the spacing here to
be tighter, isn’t that pretty crazy right? How big do you want the image to be? Bigger
or smaller? Everything is really flexible images news to what you wanted to be. This
will keep your mom busy. And whats cool about it, even though you’re editing the template,
you can jump into the content editor right away. Actually right now it’s asking me to save
my work, it’s reminding me on the way. So I’ll save it and I’ll Nemett foodie mom, and
I’ll save it. Cool! Congratulations we have saved. And now we get to edit the content. This is
what she’ll be working in. This is the main working area for your mom, and what’s cool
about it is that it’s not like: go to her URL/admin and then work with a bunch of act
abstract boxes to edit. She’s touching the content right here. It should be able to edit
it, and as she edits and saves out she’ll be able to see her content right in line instead
of going back-and-forth. So it’s pretty cool. It’s fast. Yeah because back to what I said in the beginning
about lowering friction lowering the complexity of her achieving her goal. So I want to change the background, the stripes
back here, you are going to be surprised with this. So you can do different patterns and
stuff, different image fills. But you can also change the color with the same image
fill. And it will still have that overlaid texture on top of it. There are a bunch of
different tiles and textures and different kinds of things, but I actually like the white
though. It’s clean. Yeah. And let’s see what other cool stuff is there.
There is this whole section of widgets and modules that they can easily add stuff from.
Like different types of galleries slideshows, I mean like the list is pretty long of all
these things they can do. And in addition to setting up an online store, you know. There
are other things that she can extend her account with to give her an enterprise-level site.
And your mom is just like “ahhh! I am just building a business! I am just a foodie business.
A blizness, a blog business: it’s a blizness. That’s what that is! Get down with my Blizzness.
Your mom called me and she’s like yo Travis check on my foodie blizness. Yeah, so this is it you can do a lot of things.
Even down to controlling your SEO, you’re sharing Preferences online, your Favicon.
And you also get reporting, statistics analytics on your site traffic. So this is all free, and there is different
levels of upgrading you can do within it. One more thing I want to show you before were
done. Your mom decides to extend her business and now she’s no longer just doing a cooking
blog with tips and stuff. She wants to come into your home and cook for you, and give
you private lessons. Woah mom, mo money! So what we want to do, actually will tell
her to do this because it’s so easy. You say mom figure it out yourself. She goes to pages
and goes to add a page. And at this Point there are tons and tons of templates already
ready for her. Already ready already. I like this one, price list for her because it will
help her to organize herself to sell herself. So this is a pricelist and will choose that.
Will call this in the home, and click okay. It just added a new element in the main navigation.
And it took the little lines that were on the side, made space for it and everything,
it’s cool. So, let’s edit this page I just want to get rid of that, get rid of that I
want to pull this up. Insert, go to add then add image I am going to insert her mug shot
again. No, it’s a huge square. I’m not replacing anything that was already a circle. So how
are we going to get this to look like it should? I’m going to put it in place, and squeeze
it down, move this paragraph over. Okay the first thing we can do is edit the image. And
noticed we have image editing tools, right? So your mom is not really good at Photoshop
either! No, she sucks. Laughter. So with these, she can make a bump on these images and auto
enhance or add effects and stuff. What effects do we have in here? Oh right, like Instagram.
I will let your mom Instagram her own photos. I am going to cancel these. I’m going to cancel
out of all of this right now. I didn’t want to edit the photo itself. But I did want to
change its style. They have these preset styles, and one of them is exactly what we wanted.
Special frame number one. You can if he is even further and make shadows behind it and
different things, there is border with and all that stuff. But it’s already exactly what
we wanted. I’m going to scroll down and then we got some
headphones. That doesn’t fit, Obviously, so we’ll just change that image. And again, just
using the free wix images, i’m going to type in food. See what we get. Now remember this
is a business that your mom wants to extend that she comes into your house and cooks,
let’s see if we can find the right image. How about this one? Beautiful berries! And
me some berries! Do you like berries? Here you go! Your mom comes to your house and Hands
you berries. She cooks berries. They are a part of this balanced breakfast. She brings
a berry bush. She is a berry bringer. You can extend this, the frame of the photo.
Or make it shorter or whatever. It’s all very, I mean, you can even rotate these things.
What? She easily double clicks in and changes the
prices and as descriptions and stuff. She’s cheap for her services. It’s a good price.
For a personal chef to come to your house and teach you how to cook? Yes I’ll pay $10.99
for berry picken. Now, noticed that the headlines are the same
style that we decided in the very beginning. So when you add a new page you don’t have
to think “okay, what did I want it to be?” And revisit all those decisions that you made
earlier. They just in here it, they just cascade, basically like the style she does. It’s pretty
great. In this way you can not only create something
fast for your mom, you can enable her to extend those creations, to keep on building out what
her online presence should be. Yeah, it’s cool. Wix will mature with her
as her needs increase. Yes, she can extend it and a whole bunch of different ways. So, Wix is generally good for not just your
mom, if you guys want to build a site for Carlos’s mom, it is pretty good. Her number
is 555-5555. That is a lot of fives. But not just that. If you guys want to do a quick
portfolio or like a quick site for your friend or your church or something like that. There
are there’s a lot of different things that this can do, and a lot of different ways that
this can enable a lot of people who are not necessarily as savvy as you are to build and
maintain their site, without having to bother you guys all the time. Do you ever have those
people who call you all the time and bother you about their site? Oh that’s you. Laughter.
I have a number of people that I am the person who they call. Hey, by the by, I have this great idea. I
want to make a food blog. Will I know a great way you can do that! So the last thing we need to do is publish.
It’s pretty simple all we are going to do is run up to the top of this menu right here
and hit publish. I didn’t even look, I was looking at you. And I hit publish. They are
going to step you through a few things. Do you wanted to be indexed by search engines
like Google or Bing? Do you want it to be mobile friendly? Yes. Yes so without looking,
yes. Very intimate. When we are publishing I feel very close to you. We just published
together. Hold my hand. So they are going to step you through different
ways that you can enhance the presentation of your site, things like getting your own
custom URL. And other things along the way. So that is fun! And you can share on Twitter
and Facebook that you made your website, your business is up and running. You are ready
to do things. This is been a video about how to make close
his mom happy and only 15 minutes. Wix.com is set up to be a simple and easy
way to create and manage new websites. The inspired by their designs and customize them
to meet your own needs. Do you think your mom would be happy with this? I don’t know
she calls you, And she’s happy in 15 minutes. Alright everyone thank you so much for watching
this video, remember to subscribe to the channel and tune in next week for a very very special
Thanksgiving episode. I am excited. It’s going to be Thanksgiving, yes. So in the meantime, I will see you in the
comments down below, and on Twitter. Keep on hacking.

Comments

  1. Post
    Author
    Thibault

    Hi loved it again. I am a young guy thats just stapping in the cool world of code and I would like to ask something for another video. I would like to know how to make that line move on the music like in this video. I think thats pretty interestting. The link is  https://www.youtube.com/watch?v=Bamvg4Icmi0 . But already thank you!

  2. Post
    Author
    jeyemGFX

    Could you make a video of these page transitions? I really enjoy the red bar on the top of YouTube, but I have no idea how to do it in html/js..

  3. Post
    Author
    Jeff Aftel

    Wix is good resource for a developer to know about if they are getting asked a lot of "favors". You can send friends to Wix and let them do it themselves and learn a little in the process.

  4. Post
    Author
  5. Post
    Author
    Uri Kenan

    Cool vid, I actually made a site for a relative using Wix.com in the old flash days. I should probably replace it with a HTML5 one cause the UI looks way better now.

  6. Post
    Author
    shimilid

    Awesome! I've actually used Wix and I really enjoyed the simplicity and ease of use, while still having complex enough features to implement almost everything I've wanted. Also, their designs are beautiful and there's a great range of selection with what you can add to your site.
    Their premium price is super affordable as well, so I seriously recommend it 🙂

  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
    Nadav

    wix is awesome! i have used wix's platform to make sites for friends that always ask for this tiny tiny favor – "can you make my a small website i need for __ ?"
    this always works and they don't bother me when they need a text change or whatever..

  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
  18. Post
    Author
  19. Post
    Author
  20. Post
    Author
  21. Post
    Author
  22. Post
    Author
    Amit Lauterbach

    I was kind of afraid to start using wix since I had a website already but now I need to create a website for my old man, so I'll definately give it a try!

  23. Post
    Author
  24. Post
    Author
  25. Post
    Author
  26. Post
    Author
  27. Post
    Author
  28. Post
    Author
    Tom Raviv

    Great review of Wix. So many features, so little effort.
    This review totally made me hungry, and now I have to wait for food to get here.
    I hope you're happy.

  29. Post
    Author
  30. Post
    Author
  31. Post
    Author
  32. Post
    Author
    Ziv Shalev

    looks like a nice tool, cool vid.
    but what if I want to add some custom behavior that isn't supported by the wix editor?
    is there any programmer interface to this thing?

  33. Post
    Author
  34. Post
    Author
  35. Post
    Author
  36. Post
    Author
  37. Post
    Author
  38. Post
    Author
    Guy Romm

    Wix looks cool, and as a FED, I don't feel it threatens my income. There will always be special features and very complicated websites that you can't create with generic tools. Maybe some day Wix will allow us devs to integrate code with their platform and than it can really be a strong combination!
    Thanks for the video

  39. Post
    Author
    yuval finkelstein

    That's a great video. I'm managing several websites using Wix and I think you guys really mange to demonstrate how easy it is to use.
    would you have more videos explaining how to build sites with deeper level of functionality like using Wix' eCommerce, SEO features and Web Apps?

  40. Post
    Author
  41. Post
    Author
    Aviran Mordo

    Looking at the food blog makes me hungry. Now the question is, while you can build a food blog in 15 minutes using Wix, can you make good food in 15 minutes 🙂

  42. Post
    Author
  43. Post
    Author
    Demetri Ryskin

    Nice intro! They're awesome, and everything is hosted on their cloud! Just told a few friends who were looking to build an online portfolio.

    Thanks, and greetings to Carlos' mom!

  44. Post
    Author
  45. Post
    Author
  46. Post
    Author
  47. Post
    Author
  48. Post
    Author
  49. Post
    Author
  50. Post
    Author
  51. Post
    Author
  52. Post
    Author
  53. Post
    Author
  54. Post
    Author
    Juan Bonnett

    A web developer or engineer that feels threatened by Wix is like a Graphic designer that feels Threatened by Power point LOL:

    People, understand that there are Millions of peoplel, companies and startups out there that need al lof of things that Wix cannot offer for technical complexity reasons. Simple as that.

  55. Post
    Author
  56. Post
    Author
  57. Post
    Author
    Katie Choi

    This is amazing, As a non tech-savvy person, I wouldn't even think about building my own website. I just gave it a try with Wix, and it is easier than anything else.
    I just want more customization options and more apps that suit Korean market.
    There is nothing like Wix in Korea 🙂

  58. Post
    Author
  59. Post
    Author
  60. Post
    Author
    Pedro Almeida

    Hello DevTips,

    I'am a fan of You and Your videos, You gave me inspiration to keep studying the area of web design (front-end) and graphic design.

    And this video made me be very confuse, because You are a front-end developer showing a website that hands/give people (front-end) templates already made, that everyone can do without knowing a single line o code… I mean, why would You do that ?

    I've also seen that they have google AdWords and SEO Settings for Your site to appear more effectively on the web search.

    Before saying that this video just dropped my motivation to keep studying front-end from 100% to 0%.

    Please tell me, what is the difference by doing a website throught WIX and ask for a front-end and a back-end developer to do a website.

    Thank You in advance.

  61. Post
    Author
  62. Post
    Author
  63. Post
    Author
  64. Post
    Author
  65. Post
    Author
  66. Post
    Author
  67. Post
    Author
  68. Post
    Author
  69. Post
    Author
  70. Post
    Author
  71. Post
    Author
  72. Post
    Author
  73. Post
    Author
  74. Post
    Author
    Annie Wisecarver

    No need to insult moms. I'm a 54 year old mom who is pretty tech savvy. How about just referring to those who need help as folks who are not tech savvy? Thanks guys.

  75. Post
    Author
  76. Post
    Author
    David Gilhousen

    I sit through a lot of video tutorials and this is one of the better ones. These guys were very entertaining with their "doing it for mom" happy talk, but they also covered a lot of ground. Kept my interest.

  77. Post
    Author
    mPower.rocks

    i sat watching this with a big grin on my face because of these guys banter .. loved it whilst feeling fully informed as to the ease of a wix site …. very fast but that was the point … it illustrates whats possible…. nice one guys and hope mom was happy with the results.

  78. Post
    Author
  79. Post
    Author
  80. Post
    Author
    Ritam Nandi

    i have my own domain. i want to make a site using wix download the files images and stylesheets and publish it in my domain . how do i do it?

  81. Post
    Author
  82. Post
    Author
  83. Post
    Author
    Your Health Practice, LLC

    Hi there!! I just built my wix website! Upgraded to Combo… in fact followed your link to wix above. I now want to have a personalized email… but I really don't want to pay for email. Is there a way to get a free or super cheap personalized email account that I can easily add to my wix website?? Thanks!!

  84. Post
    Author
    faith1otay

    I have to admit this is the best web tutorial I've seen, kept me interested and was easy to understand. I'm subscribing.
    Thanks guys!

  85. Post
    Author
  86. Post
    Author
  87. Post
    Author
  88. Post
    Author
  89. Post
    Author
  90. Post
    Author
  91. Post
    Author
  92. Post
    Author
  93. Post
    Author
  94. Post
    Author
  95. Post
    Author
  96. Post
    Author
  97. Post
    Author
    Master Carriers

    Hi,
    I am trying to create a responsive website for my courier/delivery service. Ideally I would like this website to be an e-commerce site where my customers can place service orders online or via a mobile app. Where do you recommend I start? Should I try to write code on my own following your tutorials or should I use a pre existing service like WIX or WordPress? Im pretty tech savy but I have no experience writing code of any kind and I need the site to be responsive and customers to be able to place orders on site without me having to do any backend work of invoicing. Thanks in advance!

  98. Post
    Author
    Constantine Soteriou

    I prefer to hand-craft a website. From sketching to a fully responsive either static or dynamic website. PERIOD

  99. Post
    Author
  100. Post
    Author

Leave a Reply

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