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

Resources for Asking Questions

Loading...

HTML, CSS, and Javascript for Web Developers

Johns Hopkins University

4.8 (5,034 ratings) | 180K Students Enrolled

Course 4 of 6 in the Ruby on Rails Web Development Specialization

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

Skills You'll Learn

Html, JavaScript, Css Frameworks, Cascading Style Sheets (CCS)

Reviews

4.8 (5,034 ratings)

5 stars
4,429 ratings
4 stars
511 ratings
3 stars
48 ratings
2 stars
23 ratings
1 star
23 ratings

JH

Jun 01, 2019

Very interesting and well presented. It's difficult to address all the different experience levels so some points were (to me) a bit laboured, but overall a useful, informative and enjoyable course.

FP

Jan 14, 2017

Excelent course with an excelent teacher. I just found this course kind of easy comparing to Ruby courses (interoduction, rails and mongodb). It could have more chalanging assignments.\n\n5 stars!!

From the lesson

Introduction to HTML5

In this module we will learn the basics of HTML5. We'll start with instructional videos on how to set up your development environment, go over HTML5 basics like valid document structure, which elements can be included inside other elements and which can not, discuss the meaning and usefulness of HTML5 semantic tags, and go over essential HTML5 tags.

Welcome to Module 1: Introduction to HTML51:07

Development Environment Setup, Part 13:42

Development Environment Setup, Part 2: MacOS8:01

Development Environment Setup, Part 2: Windows6:18

Development Environment Setup, Part 3: Github and Browser Sync17:49

Resources for Asking Questions5:36

Taught By

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science

Transcript

[SOUND] If

you do any kind of development at all, especially web development, there will

definitely come a point where you're going to have to ask some help from somebody.

And what I'd like to do in this lecture is give you a couple of resources where you

can ask for help, as well as give you some tips and tools that you can use in order

to make your questions better and easier to communicate.

Now, obviously if you have any questions regarding the course or

even the coding questions inside the course you are more than welcome to ask

these questions at coursera.org.

However there are resources that you could use to get help and

get answers to your questions.

And one of the premier resources on the web is stackoverflow.com.

I cannot tell you how many times this site saved me in my development,

because I did know something or something was difficult to figure out.

And the community developer community out there is huge and it's ready to help you.

And as you can certainly go and turn around and

contribute to the developer community back through the site as well.

So stackoverflow.com, definitely remember this website.

Now when you ask coding questions, it's obviously very helpful to the people who

you are asking the question from if they can look at your code.

And you can't really shift the entire code to them, so one way of

doing it is just to cut and paste your codes straight into the question itself.

And you could probably get away with that a lot of the times, but

it's usually much more helpful for you to provide some actual working code,

that the people looking at it can look at it and diagnose and help you with it.

You'll certainly get your chances of answering a question, and answering

a question quickly much higher if you provide something that they can work with.

Well there's a couple websites I'd like to show you that can help you with that,

especially when we're talking about web development.

One of them is called, jsfiddle.net.

And what the site does it lets you write HTML, CSS, JavaScript code and

share that code via link.

So I'll give you a very quick example, I'll just write, h1, and

say Hello Coursera.

And if I click Run, you'll see that in the result pane, I have Hello Coursera!

Well I can go to my css pane and change that real quick and

I know we haven't learn about CSS yet, but just bear with me here.

And I could change it and say that the color which should be red.

So if I run it again, now the color of Coursera, Hello Coursera, becomes red.

Now if I click the Save button right here,

I'll get a unique URL that I could then copy and paste.

And get to exactly the same page with all the code ready to go and

with the result of it right there.

So that's really helpful, because if you just provide this link to people

they'll be able to take a look at your code.

They can also fork it themselves and

forking meaning you could create a new fiddle based on this one.

They can correct your code or provide some additional code and

then you can look at yours versus theirs and actually examine the solution.

So jsfiddle.net is a great resource.

There's another website that I absolutely love and

that website is called CodePen.io.

And this website is actually founded and

maybe cofounded I'm not sure, by Chris Coyer.

When it comes to HTML, CSS and

JavaScript in the web developer community, Chris Coyer is certainly a huge name.

He actually started a website called csstricks.com and if you'd like we can

actually go there real quick, tricks.com, it's css-tricks.com,

which is like a one stop shop on a lot of different tutorials,

answers, and it's all about CSS and HTML.

Css-tricks.com is by itself a great resource that

actually I've used quite a bit as well.

But back to CodePen.io, CodePen.io allows you to do something very

similar to JSFiddle.net except there's lots more here.

There's really a whole community that surrounds this website,

because you can actually look at featured Pens,

meaning featured sets of solutions that will probably amaze you and

you could actually look at the code as to how they achieve those solutions.

So using the CSS, HTML, and JavaScript.

Let's go ahead and give a quick try.

Let's create a new pen.

And you don't have to sign up for it if you don't want to,

you could just remain anonymous.

But certainly if you sign up it's much better, because you'll be able to then go

back and look at all of your work, it'll be saved in one place.

So we'll do the same type of thing.

We'll say h1.

We'll do Hello Coursera!, and right there, it shows up automatically.

You don't even have to really refresh anything.

And let's do the same thing, let's do h1 and give it a color, red.

And there you go changes throughout automatically.

And what's really cool and

this is actually one of the newest features they have is you can actually

have a console just like you have a console and a browser.

If you pull it up I could say something like var x = 'Hello

Coursera!' and I could say x or

console.log(x) and it spits out Hello Coursera back.

So you basically have a browser that you could work in and

develop in remotely anywhere you are.

And again, if you actually click Save and

save this, you can take that URL right there, copy it and

then provide it to somebody else, to help you with your solution.

And there's the entire solution we just had is right there in front of you.

So I highly encourage you to check out these websites and

to keep them in your arsenal as resources not only for looking things up, but

also to use it for asking questions.

It will help you quite a bit in the long run.

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