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.