Placeholder Image

字幕列表 影片播放

  • 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

  • <