Explore
For Enterprise
Join for Free
Log In

Arts and Humanities
Business
Computer Science
Data Science
Information Technology
Health
Math and Logic
Personal Development
Physical Science and Engineering
Social Sciences
Language Learning
Degrees
Certificates

Explore all of Coursera

Browse
Search
For Enterprise
Log In
Join for Free

3.04b - Uploading to GitHub Pages Account

Loading...

Introduction to HTML5

University of Michigan

4.7 (8,207 ratings) | 140K Students Enrolled

Course 1 of 5 in the Web Design for Everybody (Basics of Web Development and Coding) Specialization

Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities. The textbook we use is available online, “The Missing Link: An Introduction to Web Development and Programming” by Michael Mendez from www.opensuny.org. This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final page at http://intro-webdesign.com/html5-plain.html. This is the first course in the Web Design For Everybody specialization. Subsequent courses focus on the marketable skills of styling the page with CSS3, adding interactivity with JavaScript and enhancing the styling with responsive design. You can see a sample site for the capstone course at http://intro-webdesign.com/

Skills You'll Learn

Web Design, Web Accessibility, Html, Html5

Reviews

4.7 (8,207 ratings)

5 stars
6,227 ratings
4 stars
1,645 ratings
3 stars
265 ratings
2 stars
31 ratings
1 star
39 ratings

CR

Jan 31, 2016

Exceptional course, taught by a friendly, talented teacher. Perfect introduction to HTML. While the course seems to be still under development (there is the odd typo or the like) it's a great start.

TB

Nov 11, 2017

Good introduction to web development. The teacher (Colleen van Lent) has great attitude and seems interested in getting students themselves interested... she explained the intro topics very clearly.

From the lesson

Week Three

Okay, you created a file...what now? This week we will begin by covering the important but often overlooked concepts of validation and accessibility. Did you follow the DOM structure when you created your page? Did you use semantic tags to make sure that page viewers can access all of the information, even if they have physical or cognitive disabilities? This is knowledge you can use if you would like to pursue a career as a web accessibility specialist. Finally I will briefly cover the steps needed to post your site to the web. There are many free and paid services that you can use to get your work off your computer and on to the Internet.

03.03 - Hosting Your Site5:05

03.04 - cPanel8:31

3.04a - Creating a GitHub Pages Account5:29

3.04b - Uploading to GitHub Pages Account8:24

03.05 - Using Secure File Transfer Protocol7:51

Taught By

Colleen van Lent, Ph.D.
Lecturer
Charles Severance
Professor

Transcript

So, let's say you've come up with a pretty nice site.

I've got one right here.

I'm going to click on my index.html file,

and I've got some images in it.

I have a special file called CSS that

you might not be familiar with yet, but that's okay.

But let's just see what my site looks like.

Here we go, up.

Here is just a little page I made about me with a little bit of formatting.

But if you check and you kind of look in the upper corner,

you can see that this site is not live.

The fact that it says, file colon,

so forward, I can't share it with other people live.

I can email them my code,

I could say to somebody," Oh look,

I made a web page," and then I could send them

this file and all the images and everything like that,

but that's kind of a pain.

So, let's try to make this site go live on my GitHub Pages account.

So, go back here,

to my GitHub account which if you haven't created yet, that's okay.

I've got another video,

Go create your account and come back here and meet up with us.

But other than that,

I'm going to make my first live account.

Once again, I'm going to go up and do a plus for a new repository.

Basically, consider a new folder full of code.

Last time I needed to be very careful with my repository name, not this time.

I'm just going to call this one,

let's say sample, I try very hard to keep it to all lowercase.

You can include the little like dash,

but no special characters.

So, I'm just going to leave it as sample.

Very important, I'm going to click on," Initialize this repository with a Read Me,

and I click on that,

and I'm going to click on "Create repository."

So, GitHub right now is creating a new site for me to upload my code.

Now, people who use GitHub for,

I'm going to say like real,

are actually doing a lot of things from

command lines and they have to memorize a lot of stuff.

We're not doing that.

We're just using GitHub Pages to host our code.

So, let's click on "Upload files."

Now, here's a tricky part,

if I were to click on "Choose your files,"

I could do that and I could go through and pick,

well, I need this file and that one,

but it won't let me upload entire folders.

See if I click on CSS and I click on open, it's like, "Oh,

is this the file you want?",

I don't want this, I want everything, not just files.

So, I click on "Add".

What I'm going to do is go over here,

and I'm just going to go back up, one,

and I'm just going to drag this whole folder over all at once,

and this is going to let me upload as many files as I want.

The next mistake I make all the time is that I forget to go

all the way down to the bottom and say," Commit changes".

So, this is the first step out of two steps of making your site go live.

The first step is just to upload your files.

Again, this may take a few minutes to complete.

So, while that's going on,

I'm going to go up, up there and then I'm going up.

So, what I'm going to click on now is,

I'm going to go up and click on "Settings." All right.

Now, what I need to do is I need to say, "Hey,

if somebody wants to see my site,

I don't want them to see my code.

I want them to see my actual page."

So, I'm going to go back down here,

and I'm going to scroll down,

scroll down on this mouse,

and what I'm looking for is a site that says, "GitHub pages."

Go to none and choose master branch and save. All right.

You never really know if it worked or not.

So, I'm going to go back down again,

click over here and go back down,

and if I go down to GitHub pages, it will now tell me,

"Hey, your code is now right here".

So, I'm going to click on this,

and it's not uncommon for to say, hey,

you don't have anything yet or something like that.

So, what I'm going to do is,

I'm going to go back to my code and say, "Okay".

What was the name of that folder I dragged up?

Oh it was sampler,

and what was the name of my file?

Hopefully, it was index.html and it is, great.

I'm going to go right here,

and now when I click,

I got a 404 error.

Don't worry, that's going to happen a lot.

First thing to check is,

did you put in a typo?

Yes I did, I wrote sample instead of sampler.

So, let's put that r in there.

Now, I'm going to hit enter and there's my site. All right.

So, what you can do,

the two steps for creating this GitHub account is to upload

your file and then change that kind of link for GitHub Pages to turn it on.

Once you do that,

you can upload as many things as you want.

I am going to do one more thing with you real quick though.

I'm going to go back to my GitHub account

and I'm going to do this one more time but slightly different.

I want to go to github.com.

I'm going to make one more repository.

I'm going to call this one,

sample two, and this time,

I'm going to forget and I'm not going to click on this Read Me.

We'll click on the repository.

Oh! Well, now there's no place for me to click on that upload files,

and you feel kind of stuck.

If you forget, just scroll right up to the ReadMe link on the page,

and you click on it and I'm actually creates the ReadMe.

It going to go down.

Just so you know, commit new file is

the equivalent of save files for what we do in our desktop.

So now, I can upload files.

I'm going to do it one more time to show you

another probably easier way. I'm going to go back here.

Before I dragged the entire sampler folder,

this time I'm just going to grab here.

They're all uploading.

I'm going to click on "Commit Changes."

While this is happening,

I want you to think," What was that second step?

What was that next step she said I had to do?"

That step is to go into settings and add the GitHub Pages.

So, let's go up to settings.

Up, it's going to, right here.

Scroll down at Master branch and save,

and then since I want to be a little lazy,

I'm just going to scroll down here again,

and be like" Oh great, here's the link to my site".

I'm going to click on it. Again, when you get the 404 error,

there's usually two reasons: either you spelled

something wrong which isn't the case here because we clicked on it,

we didn't type anything in.

Or you need to give GitHub a few more minutes to

upload everything or the third one is sometimes,

I'm not exactly sure why, but sometimes,

GitHub seems almost forget to look for index.html file.

So, I'll hit "Enter," and there we go.

So, GitHub Pages is a great free way for you to host

your code and share it with

everyone who you think will be impressed with your incredible work.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play

Coursera
About
Leadership
Careers
Catalog
Certificates
MasterTrack™ Certificates
Degrees
For Enterprise
For Government

Community
Learners
Partners
Developers
Beta Testers
Translators

Connect
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Tech Blog

More
Terms
Privacy
Help
Accessibility
Press
Contact
Directory
Affiliates