Waching daily Jul 30 2017

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 >> How to make a website for free in 3 easy steps 2017 - CodeTap - Duration: 15:56.

-------------------------------------------

Babe Ruth's granddaughter visits Plattsburgh for All-Star Game - Duration: 2:20.

For more infomation >> Babe Ruth's granddaughter visits Plattsburgh for All-Star Game - Duration: 2:20.

-------------------------------------------

Indian Motorcycles return to Springfield for historic event - Duration: 1:06.

For more infomation >> Indian Motorcycles return to Springfield for historic event - Duration: 1:06.

-------------------------------------------

Eagles Welcome Fans For Open Practice - Duration: 1:39.

For more infomation >> Eagles Welcome Fans For Open Practice - Duration: 1:39.

-------------------------------------------

Divers search for missing boater in Lake Gibson - Duration: 0:27.

For more infomation >> Divers search for missing boater in Lake Gibson - Duration: 0:27.

-------------------------------------------

Judge calls for charge upgrade against man arrested for stalking at Tampa Bay Comic Con - Duration: 1:46.

For more infomation >> Judge calls for charge upgrade against man arrested for stalking at Tampa Bay Comic Con - Duration: 1:46.

-------------------------------------------

Roldan shoots just too high for Seattle ESPN FC - Duration: 0:33.

For more infomation >> Roldan shoots just too high for Seattle ESPN FC - Duration: 0:33.

-------------------------------------------

Prince William and Kate arrive in Belgium for Passchendaele commemorations - Duration: 1:37.

prince William and Kate have arrived in Belgium to mark the centenary of the Battle of Passchendaele.

The couple are accompanying Prince Charles on a two-day visit to Belgium at the request

of the Queen, where they will attend various events to mark the First World War commemorations.

On Sunday evening, William and Kate attended the Last Post ceremony, which has taken place

every night since 1928.

The royals were joined by 200 descendants whose ancestors are named on the Menin Gate,

as well as representatives from nations who fought on the Salient.

William and Kate, both 35, were greeted by King Philippe and Queen Mathilde of the Belgians.

During the ceremony, the Duke gave a short address before laying a wreath with the Belgian

king.

Later that evening, William and Kate visited the market square in Ypres, where the story

of the war in the Ypres region was told in a creative way.

The fa�ade of the Cloth Hall was illuminated with projections, while live performances

were also held.

The royals were given a tour of the In Flanders Fields Museum, and learnt about the key aspects

of the war on the Ypres Salient.

They also had the chance to meet descendants of families of some of those who served on

the Ypres Salient from 1914 to 1918.

tell us your thoughts in comments below.

thanks for watching.

please like,subscibe and share my videos.