Placeholder Image

Subtitles section Play video

  • If you wanna build a super professional website, watch this video, and I’ll show

  • you how step by step.

  • What’s up everyone? It’s Jameson from NYC Tech Club and in this video, I’m gonna

  • show how to create this website step by step. And you don’t need to know any type of coding

  • or programming or whatsoever. It's just gonna be a bunch of drag and drop, and copy and

  • paste. And by the end of the video youre going to be a WordPress expert. And as you

  • can see, this website is just beautiful. It’s simple yet stunning and just super professional.

  • What I tried to do was incorporate a lot of the design aspects of leading businesses such

  • as Apple. and Spotify. and Square. all of which are multi-billion dollar businesses.

  • that have spent millions of dollars on web design research.

  • So what I created was something with a great user experience, something that creates an

  • amazing first impression and something that you can be really, really proud of. I wanted

  • to build something that not only represents you, but represents your brand. And I really

  • think that we were able to accomplish that with this website. And the best part about

  • this web tutorial is it’s gonna save you thousands of dollars building out this website

  • yourself. So if youre a freelancer, a blogger, an artist, a small to medium size business

  • or just someone just wants to build a super professional, super beautiful, mobile-friendly

  • and responsive website, then keep watching this video because I’m gonna show you how

  • to create this website step by step. But first, I wanna give you a tour of exactly what were

  • gonna build right now.

  • Okay, so this is the homepage that we're gonna be creating today. I’m gonna show you how

  • to create this full width image slider right here. Well also put in a transparent header

  • menu right at the top, and I’ll show you how to create a custom logo right here. On

  • each of our slider images, were gonna have a headline, a subheadline and a Call to Action

  • button. And the reason why were gonna do this is because all of the leading business

  • websites also do this.

  • So if I go to Apple, you can see right here there’s the headline, a subheadline and

  • a Call to Action. And the same with Spotify, they have their full width image right here

  • with a headline, a subheadline and some Call to Action buttons right here. And what we

  • wanna do is incorporate the best of the best and put it on our website. So that’s what

  • were gonna do right here.

  • So if I click on this button right here, it’s gonna bring me down to the next section that

  • we're gonna build. So the next section we're gonna create is the "Services" section right

  • here and what you can do here is highlight what you and your business is all about. So

  • you can add as many or as few products and services as you want, and I’ll show you

  • how to add these custom icons right here. Once were done with this section, were

  • gonna create a Call to Action section right here. And what well have is two buttons

  • that will go to different pages on our website. So I’ll show you how to create multiple

  • pages and link them to these buttons. And once were done with this section, were

  • gonna create a recent Blog Post section that looks just like this, and then well create

  • another Call to Action right down here with another button that really just funnels your

  • visitors wherever you want them to go on your website. And right down here in the footer,

  • well have Social Media Buttons. Well have our website name down here and if I click

  • on this button, it will bring us right back to the top. And we can actually customize

  • any of the colors on our website. So I’ll show you how to do that. And again this website

  • is responsive, so it works on any computer or laptop, any mobile device. It will just

  • resize on its own so you don’t have to worry about that. So now, let me just quickly show

  • you what the other pages that were gonna make look like.

  • So this is the About page that were going to make, and I’ll show you how to put in

  • titles at the top of your pages like this. And well insert an image right here just

  • so that you know how to do that, and then well put in a little description right

  • here about your business. And then well put in an embedded video right here. And what

  • we could have done if we really wanted to was put this video full width so that you

  • don’t have any white space right here. But I kind of like it with the white space just

  • because it makes it look like a framed image. So if you really wanted to, you can push play

  • right here and actually watch this video play right here. And underneath this video, were

  • gonna put in some facts or statistics about your business right here. And then well

  • have another Call to Action right here, and then right below that on every one of your

  • pages youll see this footer right here. So now let me show you another page that were

  • going to create.

  • So the next page that we're gonna create is this Employee's page and you can add as many

  • or as few employees as you want. And we can also add a Call to Action right down here.

  • So what’s really cool is if you hover over any of these images, you get additional details

  • about your employee along with their social media accounts right here. And we can link

  • the name to additional pages if we want to, so that your visitors can get additional details

  • about the employee. Once we create this page, were gonna move on and create an image

  • gallery or portfolio page. So if you have any images or projects that

  • you wanna put into a portfolio, then youre going to love this page because what were

  • gonna create is this image gallery right here that your visitors can actually click on each

  • individual image and then get a pop up of that image. And they can actually go through

  • a slider to see every one of these images. And once we create this page, were going

  • to create our Success Stories page or Testimonials page next.

  • So this is the Success Stories page or Testimonials page and what this page is gonna do is give

  • you a bunch of social proof. So what were gonna do right at the top is add some videos

  • right here. So if you have any video testimonials you can embed them right here, and if you

  • don’t have any videos, we can add images or texts or anything else we wanna write here.

  • And right below that, well add some testimonials right here with the image of the person that’s

  • giving the testimonial, their name and then maybe their title or what company theyre

  • from right here. And then right below that, well add some logos of our current and

  • past clients right here. And then well put in a Call to Action right here and then

  • our footer right here. So once we create this page, were going to create our Blog page

  • next.

  • Now were gonna create a very simple, but elegant and professional Blog post page just

  • like this. And what youll see is well have a featured image for each of our blog

  • post with a title, the date that the blog post was written and also a little excerpt

  • right here. And if any of your visitors click on one of these blog posts, this is what the

  • blog post will actually look like. So this is a single blog post page right here. And

  • right below, we also have a section for your visitors to leave a comment if they want.

  • And youll notice on the right hand side, we have this right side bar. So I’m gonna

  • show you how to customize this and put in a Facebook Like box, your Twitter feed right

  • here, and then recent blog post right here with thumbnails. So once we create our Blog

  • Post page and some blog post, were gonna create one additional page.

  • So the last page that were gonna create is this Contact Us page right here so that

  • your visitors can get in touch with you. So well put in some contact information right

  • here and well embed a map right below if you have a real location and then well

  • put in this Contact Us form right here that your visitors can fill out and it will send

  • a message right to your inbox.

  • So pretty much, this is the website that were going to be building today. So if you wanna

  • build a website that incorporates a lot of the design aspects of multibillion-dollar

  • companies and you really, really like what you see, then follow this tutorial and youre

  • going to build an amazing website. So if youre ready then I’m ready. Let’s get started.

  • The first thing that you have to do is register a domain like this, and then we have to get

  • hosting service. And hosting allows you to run your website and store all the content

  • on your website. So I recommend that you go to hostgator.com for both your domain and

  • your hosting service. So right here, type in www.hostgator.com and click "Enter."

  • So I recommend hostgator.com because theyre fast, reliable, cheap and they have great

  • customer service. So all I want you to do is click on this button right here that says,

  • "Get Started Now!” On this next page, we can just scroll down and you can see the three

  • different hosting plans available. There is the Hatchling Plan, the Baby Plan and the

  • Business Plan. The Business Plan is a little too expensive and probably more than what

  • we need, so I’m going to focus our attention on the Hatchling Plan and the Baby Plan. So

  • the Hatchling Plan is if you plan on building one website and one website only, and the

  • Baby Plan is if you plan on building more than one website and you wanna host them on

  • this account, then the Baby Plan is probably the right one to choose. I personally use

  • the Baby Plan, so I’m just going to select "Sign Up Now!"

  • Okay. So on this next page, we have to fill out some information to register our domain

  • and get hosting service. So on step number 1, it saysChoose a Domain.” So what

  • I want you to do is type in a domain that you wanna register right here. So I'm gonna

  • type in howtowebby.com and pushEnter.” If you get this green check mark, and it says

  • Added" right here that means your domain is available and we can just move to step

  • number 2.

  • So step number 2 is actually where you choose your hosting plan. So in this drop down right

  • here, remember were choosing between the Hatchling Plan and the Baby Plan. In the Hatchling

  • Plan is if you plan on building one website and one website only, and the Baby Plan is

  • if you plan on building multiple websites and you wanna host them on this account. So

  • I’m gonna select the Baby Plan right here, and then I’m gonna choose my billing cycle.

  • So what I recommend is either the 6 or 12-month billing cycle just to give yourself enough

  • time to know whether or not you wanna run a website or not. So I’m gonna choose 6

  • months right here. And then all you have to do is create a username and a security pin.

  • And then we can move on to step number 3.

  • So step number 3 is where youre going to enter your billing information. And I’ve

  • already done this, so I’m not gonna do it with you. But if you need to, go ahead and

  • pause this video and fill out all this information and then just pushPlaywhen youre

  • ready. Otherwise, were gonna move on to step number 4.

  • So step number 4 is adding additional services and by default hostgator actually selects

  • all of these for us. What we wanna do is unselect them because these are just extra cost that

  • we don’t need right now, and we can always add these later. So make sure you uncheck

  • all of these and then let’s move on to step number 5.

  • And so step number 5 is entering a coupon code. And by default HostGator puts in this

  • snappy code right here. And what I recommend is you change this to n-y-c-tech-3-0 and click

  • "Validate" right here. And youll see the discount actually increase right here, because

  • this coupon code n-y-c-tech-30 gives you a 30% discount code instead of the 20% the HostGator

  • gives you. So once you put this coupon code in right here, go ahead and scroll down and

  • click “I have agreed to the terms.” And then just click this button right here that

  • saysCheck Out Now!”

  • Once youve signed up for hosting and registered your domain, I want you to go to your inbox,

  • and youll see this email right here from hostgator.com that’s titledYour Account

  • Info.” I want you to click and open that and youll see a bunch of links right here

  • and the one that we wanna focus on is this one that saysYour Control Panel.” I

  • want you to click on that link right here and then youll get this pop up that allows

  • you to login to your cPanel.

  • And inside our cPanel is where were going to install WordPress and also create our email

  • address. So if you need your username and your password, go back to you email and right

  • here, this is where your username is and this is where your password is. So go ahead and

  • copy those and paste them into these two sections right here and then just clickLog in.”

  • Once youre logged in, all we have to do is scroll down to this section right here

  • that saysSoftware and Services.” And what were gonna do is install WordPress.

  • So you might have to wait a few minutes for GoDaddy and Hostgator to connect but if you

  • don’t, go ahead and just click this button right here that saysQuick Install.”

  • Now all we have to do is come down to this section right here that saysPopular Installs

  • and click on "WordPress." And then well get this pop up right here and all we have

  • to do is click on this button that saysInstall WordPress.”

  • And now we just have to fill out some information. So right here, go ahead and choose your domain

  • that you want to install WordPress on and then put in your email address, a blog title

  • that you can actually modify later and then an admin username. So I’m gonna put in admin

  • right here and then I just put in my first and my last name right here. And then I’ll

  • scroll down to this green button and just clickInstall WordPress.”

  • Once you've installed WordPress, you should see this message right here that saysYour

  • install is complete!” And right over here if you click on this arrow, you can see this

  • information that allows you to login to your WordPress Dashboard. And you can write all

  • of this down if you want or you can go to your email inbox and youll see this email

  • right here that saysInstall Complete.” And if you click and open that, you also have

  • all of your information right here to login to your WordPress Dashboard. So before we

  • actually login to our Dashboard, let me show you what our website looks like right now.

  • So if I open up a new tab and I go to my website, this is what the website is going to look

  • like after you install WordPress: super simple and really plain. But we haven’t installed

  • the theme yet. So we haven’t started customizing and making our website look like this. But

  • were gonna do that right now. So what I want you to do is either go back to the Install

  • page or your email inbox. And then click on this link right here that saysAdmin URL.”

  • And were gonna login to our WordPress Dashboard right now.

  • On the WordPress Login page, what you have to do is put in your username and your password.

  • So if you need to, go ahead and go back to your inbox and go to your email with your

  • login information. And right here is your username and right here is your password.

  • Go ahead and copy and paste those two into these two sections right here. And once youre

  • ready, go ahead and click this button that saysLog in.”

  • Once were logged in, this is the WordPress Dashboard. And this is where were gonna

  • do all of our customization and add new blog posts, upload images and videos, create new

  • pages and approve and reply the comments and all that good stuff. But the first thing that

  • we have to do in order to customize and build our website is install the theme for this

  • WordPress website. So go to Appearance and click onThemes.”

  • Once youre on the Themes page, what I want you to do is go to this button right here

  • that saysWordPress.org Themesand click on that. And the theme that were gonna

  • be using is called theSydneytheme.” So right here where it saysSearch Themes

  • I want you type in Sydney, S-Y-D-N-E-Y. And then it should pop up right here and what

  • I want you to do is clickInstall.” And then on this next page, just click this link

  • right here that saysActivate.” And once were back on the Themes Page, you can see

  • right here the Sydney theme is the active theme. So what I wanna do is actually show

  • you what our website looks like right now. So if I open up a new tab, you can see that

  • the site looks a little bit better, but still nothing as great as what were gonna make

  • it look like in a little bit.

  • So go back to your Dashboard if youre not already on it. And the next thing were

  • gonna do is install some plugins that are recommended to us. And plugins really just

  • make our life a lot easier. Theyre like tools to really help us build our website.

  • So right here where it saysBegin installing plugins” I want you to click on this link

  • right here. Now on this next page, I want you to check this box right here next to plugin

  • and then click on this drop-down right here and clickInstall.” And then click this

  • button that saysApply.”

  • And once we get to this page that saysEverything has been installed successfully,” I want

  • you to click on this link right here that saysReturn to Required Plugins installer.”

  • And now we have to activate these plugins. So again