1, 2, 3 easy steps on how to build a website for free
In this video I'll share with you how to create a website without paying a dime
That's right, totally free. More about it, coming up!
What's up guys and girls.
I'm Marian and my passion is to create the web
and help you be part of it.
If you're new over here, this is CodeTap where you'll master how to build websites,
how to create a website from scratch, with or without any knowledge of coding
so consider subscribing.
If you appreciate me, make sure to drop a like on this video
as I would really be very grateful for that.
This setup needs NodeJS and Gulp to run properly. If you haven't got those ones
check the "required tools" playlist
in the link above or in the description below and get it done.
Before we start with our three steps, let's have a look
at our final project website that we're about to build.
OK guys. On the left side we've got our w3schools replica
and on the right side we've got w3schools.com, the real website
We've created a similar top navigation menu
the left navigation menu and the center of if which is the content.
I've changed a bit the footer as it's a more commonly used scenario
which will benefit you in the long run
we can also navigate through this to secondary landing pages
and then, one more level deep down
that's it, now let's go to our three steps.
we want to open our console
our terminal, "cmd" on Windows
and let's create a directory using the "mkdir" command: mkdir
and the name of the directory, I'll name it "cool-stuff" and hit "Enter"
then we want to change into this "cool-stuff" directory
using "cd cool-stuff"
once I've typed in enough letters I can press "Tab"
until I get the right directory and hit "Enter"
In this "cool-stuff" directory we'll put all of our future projects.
So let's start with our first step.
Let's go back to our browser and
and navigate to github.com I'll bump this up using "Ctrl and +" a few times
Let's go on your profile and choose "your stars"
Over here look for "pug-starter" and click on it
If you haven't got "pug-starter" to your favourites
This is the address where you can find it: "https://github.com/marianzburlea/pug-starter"
and once you're on the landing page you can use the "star" button to add it to your favourites
So it can be easily and quickly accessible later on.
The next step is to click on this green button, the "clone or download"
followed by copy to clipboard
Once we've got this text copied
let's switch back to our command line and do the first step.
which is: make a copy of this repository on my computer from GitHub
git clone, let's paste the path and then
hit "space" and give it a name. I'll name it "w3schools-replica"
Now, let's change into our new directory
using "dir" we can see that git created for us "w3schools-replica"
so let's say "cd w3" and let's press "Tab"
And hit "Enter"
Over here, if we say "dir", on Linux and Mac it's "ls -lah"
to do the same as "dir". Se we can see that we have a bunch of files over here and
if we say "git status" git will give us a message which means it's tracking this repository
if we say "git remote -v" we can see that
this project is still linked to "marianzburlea/pug-starter"
so we want to unlink it from there and link it to our personal project
in every project git keeps it's files in a .git folder
so we want to remove that at the moment
so on Linux and Mac we'll say "rm -rf .git"
which will remove the ".git folder"
on Windows we'll say "rd /s /q .git"
which will do exactly the same. Once we've removed the .git folder
if we say "git status" we'll get a fatal error.
which means: "git no longer tracks this project"
now let's fix that and go back to GitHub
and click this "+" icon next to your profile
and choose "new repository"
you should leave as owner your own username, I'll choose "codetapio"
and then I'll say "w3schools-replica"
The description is optional, feel free to fill in one.
I'll go on and hit this button "Create repository"
And let's pay attention to this part over here with this six lines.
This echo here will create a "README.md" file with this content in it.
This is necessary as when you want to initialize a git project
you need minimum one file in that project.
however if we say "dir" or "ls -lah" on Linux and Mac
we can see that we've got a bunch of files and folders so that's not the case for us
we'll skip this line over here and go straight to "git init"
Let's copy it and paste it in our command line and hit "Enter"
Now git has initialized a new repository in this folder.
If we say "git status" we no longer get a fatal error.
Now we also want to remove the source folder
as no examples files are needed because we'll start from scratch.
so to do that on Linux and Mac we use:
rm -rf src
and on Windows "rd /s /q src"
now let's go to the next one which is "git add"
and instead of adding the "readme" file we want to add everything
so when we say "git add ." it means:
add the current directory and everything in it so git can track it.
when we say "git status" we can see that the files have gone from red to green
which means git has started to track them.
Now let's save those changes with a message.
we can go for the default one however I recommend you to be a bit more creative
"This is my first save
in git which is called a commit
OK
The next two lines don't need any change so let's just copy / paste them
and hit "Enter"
give it a sec
once it's done if we refresh this page over here
we can see that our repository is synced from local to GitHub
Over here is also a commit link
It says: "one commit". If we click on it we can see our save
with the commit message.
Our next step is to tell node package manager to install dependencies.
so let's do that: npm i
installing ...
Once the install is finished we can close this one.
And let's open a new Visual Studio Code window.
And add our project to it.
Let's add "w3schools-replica"
and over here, let's recreate our source folder.
So we'll name it "src" ... by clicking the new folder icon.
and in this "src" folder
let's create an "index.pug" file.
So "index.pug"
In this file let's do a very basic, minimal html template
so "doctype html"
Then we follow it by html, and head, and body
In PUG it's very important to pay attention to spacing
as everything needs to be indented properly
so children and parents can know which one is which.
So over here let's say in the head: "title this is my first pug file"
and a tag: "h1 Hello from PUG"
Let's save this and let's go for the menu: help
and "Keyboard shortcut reference"
Let's bump this a bit.
Let's look for "terminal"
So over here you have some shortcuts, just find the one for your operating system.
For Windows it's: Ctrl + '
to toggle the command line or the terminal
So if I say " Ctrl + ' "
it'll toggle the command line
On Mac it's "alt" and some nearby key, I forgot which one it is.
anyway, once we've got the command line opened
our first step it to say: npm start
and it'll open the browser with our HTML page
Let's split this screen and play a bit with it.
... weird alien noise ... OK, so this should look fine.
now, every time we save this index.pug file
gulp will watch the pug file being saved
and compile it in the temporary folder in its corresponding index.html
let's open both of those ones. I'll click the split window button over here.
and then I'll go on the left side and choose to split them horizontally
so I'll have the index file, index.pug file over here
and the index.html file over here opened.
Once I make any change over here
watch what happens. So I make a change and then save it.
when I save it this dot ("circle") will dissapear over there, it'll convert, sorry
it'll convert into a cross.
Once I saved this file, gulp compiled PUG into HTML
the HTML file has been updated and at the same time the browser has been refreshed.
Let's do it one more time: "let's ... do ... it ... one ... more ... time"
This time I'll choose file and save. Once I click save.
Watch over here what happens, and then over here, and then over here.
So: file, save.
See? index.pug has been converted into HTML
by the gulp process that watched that file
also the browser has been refreshed.
You'd be quick to notice that in pug we no longer have to have
opening and closing brackets and opening and closing tags
we just type the tag name followed by a space and then the contents of it
more about pug coming up.
and if you want to skip ahead and become more comfortable with pug
just go and Google: pug language
then head on over to pugjs.org
and read a bit of the documentation over here.
You'd find more example on what you'd write in Pug and what you'd get in HTML
so this is the end of part one
where we've discovered how to start a website from scratch, for free in three easy steps
In part two we'll create our landing page and style it
Make sure to follow CodeTap on YouTube and FaceBook.
Other two resources that I really recommend are:
W3schools.com, where you can literally start from scratch
and discover more about HTML, CSS, JavaScript and so many more
another one that goes hand in hand with w3schools
is Free Code Camp where you can put in practice your new skills and test them
You can go on FaceBook and seach: Free Code Camp
and join the world wide community or one that's closer to you.
I really like the challenges on free code camp
as they will prepare you and are really close to future real world client requirements.
Thanks for watching this video. You've been really amazin.
One of the most powerful tools to help you understand the world of coding
is to leverage the power of a community
and you can do that by leaving comments
so go on and leave a comment right now.
Be as descriptive as possible as help is on the way.
I promise that I'll do my best to answer each and everyone of your comments.
Now show me some real love and give me the
thumbs up if you like this video or thumbs down if you didn't
Subscribe NOW if you haven't done so
to skyrocket your web developer career.
I'll see you in the next lesson and as always: Create something awesome!
For more infomation >> Babe Ruth's granddaughter visits Plattsburgh for All-Star Game - Duration: 2:20. 
For more infomation >> Indian Motorcycles return to Springfield for historic event - Duration: 1:06. 
For more infomation >> Eagles Welcome Fans For Open Practice - Duration: 1:39. 
For more infomation >> Divers search for missing boater in Lake Gibson - Duration: 0:27. 
For more infomation >> Judge calls for charge upgrade against man arrested for stalking at Tampa Bay Comic Con - Duration: 1:46. 
For more infomation >> Roldan shoots just too high for Seattle ESPN FC - Duration: 0:33. 
Không có nhận xét nào:
Đăng nhận xét