HTML & CSS: Building Responsive Websites For Beginners | Jonathan Grover | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

HTML & CSS: Building Responsive Websites For Beginners

teacher avatar Jonathan Grover, Developer / Designer / Creative Technologist

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

56 Lessons (10h 40m)
    • 1. Trailer

    • 2. Web Fundamentals

    • 3. Getting Started

    • 4. Document Structure

    • 5. Text Formatting

    • 6. Images

    • 7. Links

    • 8. Validating HTML

    • 9. Site Publishing

    • 10. Introducing Tables, Forms, & Iframes

    • 11. Tables

    • 12. Iframes

    • 13. Forms

    • 14. Video

    • 15. Prep for HTML5

    • 16. HTML5 Semantic Elements

    • 17. Metadata

    • 18. Styling the Front-end

    • 19. Setting up an External Style Sheet

    • 20. Type Selector

    • 21. Color Systems

    • 22. Font Shorthand

    • 23. Web Fonts

    • 24. Class Selector

    • 25. ID Selector

    • 26. Descendant Selector

    • 27. Psuedo Selector

    • 28. Developer Tools (part 1)

    • 29. Element Display

    • 30. Box Model

    • 31. Box Aesthetics

    • 32. Floating

    • 33. Prep Layout

    • 34. Applying Box Properties

    • 35. Styling Tables

    • 36. Styling Forms

    • 37. Styling Iframe

    • 38. Centering Content

    • 39. Applying Box Shadow

    • 40. Applying Gradients

    • 41. Styling the Logo

    • 42. Styling Main Sections

    • 43. Styling Details Section

    • 44. Creating Column Structure

    • 45. Developer Tools (part 2)

    • 46. Positioning Techniques

    • 47. Z-Index Layering

    • 48. Sprite Rollovers

    • 49. Styling Navigation

    • 50. Styling the Social Media Bar

    • 51. Responsive Layout Techniques

    • 52. Setting Up Local Responsive Testing

    • 53. Prep HTML for Responsive Layout

    • 54. Applying CSS3 Media Queries

    • 55. Adding PHP Mailer Script

    • 56. Resets, Grid Systems, & Templates

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

There is a new updated version of this class located here:

This class is perfect for anyone with a great website idea or just an interest in learning how to code. This is a beginner-level class so if you have basic computer literacy and an internet connection, you're all set. Learn at your own pace. 

You'll leave this class with the skills to create your very own stylish, professional, and responsive website.

What You Will Learn

  • HTML and Web Fundamentals. You'll start with text editing basics, headings, images and linking between pages.
  • Tables, Forms, and Iframes. After learning the essentials you'll learn how to add more elements like tables, forms, and Iframes to your pages.
  • HTML5 Elements. You'll add HTML 5 semantic containers, metadata, and media to your pages.
  • CSS Fundamentals. You'll use CSS to create a style sheet that will allow you to fluidly change your pages contents.
  • Building Page Layouts. You'll build with columns and utilize the box model.
  • Positioning and Sprites. You'll use z-index and sprites to creat advanced layout features. 
  • Responsive Layout. You'll create responsive site design that allows your site to alter its style and content positioning based on the size of the device it is being viewed on.


What You'll Make

Spread throughout the course are Code Challenges. Code Challenges are opportunities for you to put what you've learned to practice by coding on your own. A continuous project will be built out of the code challenges adding more to your site project with each challenge.

Handouts and Resources

You will be provided with extensive handouts and suggested reference materials to continue your learning even after the course.

More courses from this instructor at:


Meet Your Teacher

Teacher Profile Image

Jonathan Grover

Developer / Designer / Creative Technologist


I'm a web designer & nationally recognized digital artist with over five years of teaching experience in creative programming, interactivity, web development, circuitry & DIY electronics. I received a BFA in Graphic Design from the University of Akron and an MFA in Design & Technology from the San Francisco Art Institute. I've held instructing positions at the San Francisco Art Institute, Pittsburgh Art Institute, 3rd Ward, and General Assembly. Currently, I serve as a faculty member at Flatiron School, a NYC based immersive style web development program. My interests include creating interactive artwork, programming, building things, animals, travel, and scuba diving.


See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


2. Web Fundamentals: - Hi. - Welcome to the first set of slides, - HTML and Web fundamentals. - Sit back, - relax and we're going to discuss how the Web works, - the development process, - workflow habits. - And then, - later on, - we'll do an exercise to get to know some different HTML elements. - First, - let's talk about how the Web works, - and hopefully this will give you an idea of how what we're learning fits into the larger - picture of the Internet. - We're gonna talk about requests in response, - rendering in the browser, - local verse remote and some differences between front end and back and development. - First, - let's talk about request and response. - So imagine that you are sitting at home and you get in front of your computer and you say - I'd like to go to this website so you type in the domain name into your browser how stuff - works dot com and then you hit return and your computer connects to the Internet, - and it talks to this guy over here, - which is a DNS server, - D n A. - Stands for domain name server Dina service. - We're kind of like operators of the Internet. - They don't actually hold any website files, - but they will tell you how to get to the specific computer wherever it may be in the world - . - So that way you can connect to it and then get the website files you're looking for. - So DNS servers. - They talk to other DNS servers all day long, - and they're keeping track of associating a domain name with something called an I P. - Address. - Um, - and I I p address is very similar to the address that you have on your house. - It's basically a way of identifying the location of a computer wherever it may be anywhere - in the world. - Eso any computer that's connected to the Internet has an I. - P address. - Even the computer that you're on right now has its own I p address. - So when you type in how stuff works dot com, - you ask the DNS server. - If it knows the address of that hosting server and this domain ing actually doesn't, - it says, - Well, - it's not in my database, - so I'll ask another DNS server. - And this one does know it says, - Actually, - yes, - that's in my cash that maps to the I P address. - 70.42 point 251.42 So this first DNF server says thanks all cash that information as well. - In case someone asked me again in the future, - Then I'll know what to tell them, - and it sends you that information. - So now your computer knows the specific address of the server that you're trying to connect - to, - and that's his green arrow. - Here is showing that connection between your local computer and this remote hosting server - and hosting servers, - which are represented back here by these blue towers. - These are the computers that are holding the actual web files, - the content that is then being, - you know, - downloaded to your computer and rendered in your browser. - So whenever you have the i P address, - you're making a requested into that specific hosting server and it sends back a response. - And this starts a conversation back and forth between your computer and the remote server. - So you ask, - you make an http request and you ask for something like the home page, - and the server sends back a response in the form of content. - And this is text code, - that is either html CSS or JavaScript. - So in this class, - that's what we're gonna learn. - We're gonna learn to write the HTML and CSS code or the content that's passed back and - forth between the remote server, - the Web server and the viewers browser. - Let's talk a little bit about local verse remote now, - so the term local refers to the computer that's in front of you right now. - Local computer is something that you can touch that's right before your eyes, - and that's supposed to remote. - Where remote refers to a Web server that's a remote location somewhere else in the world. - So whenever we're, - you know, - producing whenever we're in our our production phase, - we're always working on our local computer, - and we're previewing it in our browser on our computer. - So we're working locally. - We're previewing it locally in the browser, - checking our work. - This way we can make sure everything is exactly the way we want it before we publish it and - put it up on to a remote server. - So you're building your website on your computer, - your writing HTML and CSS code. - You're previewing that code in your browser and you're making sure everything looks the way - you want. - Maybe you're correcting typos, - changing colors, - things like that. - Then you decide OK, - I'm ready to put this up on the the remote server. - So then we're gonna use a process called FTP, - which is file transfer protocol to put those files or upload them onto the Web server. - And now, - because this Web server has a specific domain name, - an I P address associated with it, - people from all over the world now can view and access those files. - And then, - at any point, - if you'd like to change or modify those files, - you can always get them down off of that Web server. - So you have the newest copy on your local machine as well. - And you can do that by downloading or getting the files, - bringing them back to your local computer. - Let's talk a bit about the differences between front and Web development versus back end - Web development. - So in this class we're going to be doing front end Web development only. - We're going to be learning to write these 1st 2 which is HTML and CSS. - Now. - The main difference is that thes front and program programming languages are actually - guests. - We should say markup languages HTML and CSS are all being rendered client side, - which means that they're being rendered in your browser. - Your browser is interpreting that code and then rendering it, - which allows the website to appear now. - That's in contrast to back and Web development, - where all of the programming languages on the back end are being interpreted by the server - on the server side. - So, - for example, - ruby, - PHP, - python, - Java and node, - which is a version of JavaScript on the server. - All of these programming languages are working to update objects. - Um, - you know, - interact with the database and eventually render the HTML and CSS files that air then - passed to the front end that air past your browser. - So that's the main difference between front and development and back end development. - So as you start out to make your own projects, - a good start to creating any website is a brainstorming process. - So along the way, - feel free to grab a piece of paper, - a pen or a pencil, - and just start sketching out the ideas of what you want to build before you actually start - to code. - A lot of people like to make a flow chart or flow diagram where you basically map out what - pages will exist and how those pages will link to other content. - This is a good example of a hand drawn mock up, - so you can also take and draw out the individual pages and sort of make decisions about - where content will go. - And this is going to save you a lot of time. - Because instead of having to move code around or add or remove code, - you can make up your mind about the overall layout and what content you'd like to exist on - a piece of paper on. - And it's a lot faster to erase something or redraw it than to make a lot of changes in your - code. - So I think it's a good idea before you start any project to kind of make a mock up of what - you think that the site pages will hold and sort of where you imagine that you'll be - positioning this content. - There's also digital mock ups you could make online. - One site I like is called Mockingbird, - and these sites will allow you to make mock ups that air perhaps more suitable if you need - to present this information to a client before you start coating, - there's even templates in mock up sites specifically for tablets and mobile devices as well - . - One of the first things you want to make sure when you get started on any new project is to - create a folder that's dedicated to just that website or that Web project, - and we're always going to keep all of our files and sub folders that are related to that - site in that folder. - So we always call that a parent folder or a root folder. - This one here is named site. - Normally you'll name this. - Whatever the name of your project is. - For example, - if I was building a website for a waffle factory, - I might call this folder something like Waffle factory dot com or something like that. - Now, - inside of this main parent folder or root folder, - this is where all your sub folders will be. - All of your images for your website will be nicely organized into a folder. - Any special fonts you might be using could be organized. - There is well, - all of our CSS, - which is going to be the style of our website, - is gonna be located in a folder, - and all of our Web pages are HTML. - Pages will also be inside that main parent folder there. - And this will keep everything nice and organized on, - and we're going to try and avoid ever having ah, - file for our website existing outside of that main folder. - So in the next exercise, - we're gonna jump in and talk about HTML syntax. - We're going to look at document structure of building a basic page. - We're gonna learn to create text elements, - and we're gonna learn to create images and then links between our pages. - So go ahead and move on to the first exercise. - Feel free to browse the rest of these slides using the pdf link below, - and it will have content that will review all of the things we go over in the exercise. - Thanks. 3. Getting Started: - Hi. - Welcome to the first exercise 1.1. - With any exercise, - you're always gonna want to start by downloading the zip file I provide for you. - And that's going to be the source files that we're gonna be working with for each exercise - . - So just for this first time, - I'll show you how that works. - So I've I went ahead and downloaded that zip file, - which is called 1.1 dash html dash fundamentals dot zip and I had to un compress this. - So is it file is a single file that's compressed, - kind of like smashing a bunch of files and folders in tow. - One file, - and then we had to un compress it here. - I just double clicked on it on Mac toe un compress this and it spits out a folder like this - You may need to, - depending on your computer, - your operating system meaning toe like right, - click on it and say something like un compress or on archive or extract might be another - way that might be written, - but at any rate, - you have tow, - unzip or un compress that file, - and that should turn into a folder like this. - Um, - and this is all of the files. - The source files that will need to start this exercise. - Basically, - this is just containing some images here, - which are some images of some shoes. - Why? - Because the first, - um, - project we're going to build is going to be a she website. - Okay, - so I went ahead and move this into a folder on my computer. - You might want to decide where your files for your for this class will live. - You can even put them on the desktop if you don't have a suitable place. - What I did was I like to put all of my website files in a folder here. - I have my sites folder here, - and I went ahead and created a folder name specifically for this class HTML and CSS from - scratch. - And you can see inside of there. - Is that that un compressed zip file there by 1.1 dash html dash Fundamentals folder. - And inside of there, - we just have some images, - as I said. - Okay, - so that's a good start is to move these files to a location where you'd like them to live - on your computer 4. Document Structure: - And the next thing we're gonna do is we're gonna bring up our code editor, - So I'm gonna go over and I'm gonna launch sublime text. - And when sublime text starts, - we just haven't untitled file here. - And what we want to do first is we're gonna want to open up something called The Sidebar, - which will on the S enable us to see our project files and folders. - So I'm gonna go up to the View drop down menu, - and I'm gonna go to side bar and show sidebar again. - That's under view. - Sidebar, - show sidebar. - I go and click that and that will bring my sidebar up here. - And the nice thing about this is that I can drag this folder that I had you guys download - 1.1 html fundamentals. - You can drag that and drop that into your sidebar, - and you can see there that here is my images and that that particular folder. - Okay, - so to start off with, - we just want to create our home page. - So I'm gonna go up to the file drop down menu and say new file, - and that's gonna create an untitled file like that, - and we're gonna just save this file right off the bat, - I'm gonna say file safe and we're going to name this file. - Something very specific. - Now, - all the other files on your website, - you can really name them whatever you like. - Um, - this particular file, - which is the home page, - we have to name this index, - which is all lower case I n d x, - and we have to give it a file extension of either dot HTM or dot html. - Either extension is fine. - So the reason why we have to name this index is that whenever ah person who's trying to - view your website is making a request to that remote server, - the remote server by default is going to pass back the file named Index to them. - And that's why they'll see that first. - Hence why this becomes the home page or the splash page. - Some call it so we want to make sure that we save this in the correct location. - Remember, - we always, - always, - always want to save all of our site content into that single root folder. - So in this case, - I've created a folder here, - mines under sites, - and then I have one for the name of the class HTML and CSS from scratch. - And there's my 1.1 folder and I can see my Images folder sitting in there. - Some of the name this index and save this right into that exercise folder like so out. - We can see that the index pages sitting inside of that folder Okay, - so index dot html, - we're ready to go. - So let's start writing out some HTML code. - Let's just dive right into this thing. - If you'd ever like to make your text larger, - you can use, - um, - control plus and minus on windows or on Mac. - It's the command key, - and the plus or minus key will make them larger. - So if you're typing text, - you can change the size of it like that. - I'm gonna make this tax nice and large for you guys, - and this will help with ice strain. - Also, - if you're coding really late at night or for long periods of time, - um, - and you can save your back posture in your eyes by making the code a lot larger. - Okay, - so first thing we're gonna do is we're going to learn about html syntax, - So html stands for hypertext markup language and mark up language is what they do is they - provide a series of elements that surround content and then define that content for the - browser. - So we have to tell the browser, - Hey, - this text is a heading. - Hey, - this text is a paragraph. - This is an image and this is a link. - So to get started, - let's learn a very important element called the HTML element. - Now all elements are made up of starting tags and ending tags. - Some elements actually only have a starting tag, - but most of them oftentimes have a starting and ending tag. - We'll talk a little bit more about that later on. - So all of these tags are made up of angle brackets, - which is a less than symbol. - And then the name of the tag and then a greater than symbol like that name is the opening - tag. - Except they have afford slash in front of it, - like so. - So what we're looking at here is something called the HTML element and the HTML element. - What it does is it tells the browser that all of the code came between these tags. - Here in the middle is HTML code, - so you can see here. - This is the HTML element, - and it describes the content in between these tags as being HTML code. - This is called the starting HTML tag, - and this is called the ending HTML tag. - So again, - the starting tag is the same as the ending tag. - It just has a Ford Slash in front of it like that. - And that's very common. - Okay, - so that's a pretty good start. - Basically, - Now we know that we've told the browser were starting to write some html here, - and we're ending our HTML here, - so everything that goes in between will be the rest of our document. - Now, - I'm gonna add one more tag right at the top of this. - Um and this tag is also an important tag. - This is a very unique tag, - and it's called DOC Type. - And to write the doc type tag, - we do less than symbol exclamation mark. - And we write the word doc type like that. - Now, - what Doc type does is Thisted AG is going to tell the browser which version of HTML were - running. - So the way we tell this, - the browser that we're creating not just a HTML document, - but in html five document is we put a space after the word doc type and we write HTML like - that. - And this says to the browser, - this is an HTML five document. - Now, - if you look back at previous versions of HTML or X html, - you're gonna notice that these doc type tags can actually be quite long and lengthy. - They can actually go on and on. - Um, - sometimes, - for example, - in html four or three. - These were, - um, - almost a sentence long to describe to the browser that the particular document was, - You know, - that mark up version for HTML 51 of the inclusions of it, - which is a nice new features that it's very simple. - We can just right, - doc type html, - and it sees it as an HTML five document. - Okay, - great. - So now we've told the browser, - um, - this is an HTML five document, - and here is the start of my HTML code. - And here's the end of my HTML could next. - Let's talk about the two main parts of any HTML page. - So every html pages broken into two main sections and one is called the head like this - slash head will close it and then another one is called. - Another part is called the Body. - So we have the head and the body, - just like you and I have a head in a body. - So inside of the head section, - what specifically goes here is content that's meant for browsers, - search engines and devices. - So this is like machine code that goes here. - This is information, - metadata and content links that are related to, - um, - how this page should display what sort of search terms should be associated with this site - , - which we'll talk a little bit more about later on. - But mainly everything in this section is going to be things that we don't actually - physically see in the page. - They're just things that are meant for other machines and devices. - Now, - that's in contrast to the body now in the body section. - We actually have all the physical viewable content of the page to go ahead and leave a note - to herself about this to teach ourselves about this. - Let's actually learn another element called the comment. - So this tag uses thelancet than symbol exclamation mark and then dash dash. - Okay, - it starts off looking similar to the dock type, - but actually has two hyphens that follow it. - Um, - and you can see here that all of the code now below this this opening comment tag here has - been great out. - So here we can write. - This is a comment, - um, - on Lee, - I Well, - I'll just say I can see it, - uh, - in the code, - but this will not appear in the browser. - So a comment is a great way to leave messages to ourself. - Sometimes people even use comments to disable sections of code on the page and these air - Really? - Ah, - good habit to label things and sort of, - um, - leave messages and comments About what? - Certain parts of the coder doing. - So now that we've learned to create this comment, - which again? - This starts with less than exclamation dash dash is how you start the comment the way we - end the comment as we use dash dash greater than you actually notice if I forget to include - the ending tagged there that it actually comments out all the rest of the page. - So I have to say I'm done. - Say, - hey, - browser. - I'm done making a comment by saying dash dash greater than this is a unique tag that - doesn't have the slash in the closing. - It just ends like that. - But this guy is really the only one like that. - Okay, - so now that we've learned to create a comment, - let's write a little comment to herself about what happens in the head section. - So let's go ahead and write the head. - The head section, - uh, - contains info for, - like, - search engines and the browser and is not seen by our viewer, - and we'll end that comment there. - Now. - These comments can be single line or multi line. - They can be on a single line like this, - or you can hit return, - and you can actually make these comments span to multiple lines like so Okay, - let's also write a comment for the body section. - So unlike the head section, - which we don't actually see ah, - the body is the entire viewable area of the web page. - Um, - you know, - for example, - in this section, - um, - we can actually see things like texts, - uh, - links images and all types of media. - So in that comment there, - so these air the the main sections of in HTML pages the head and the body. - Let's just learn, - um, - let's start by learning one tag that we can place inside of the head section and this guy's - called title so we can give our page a title here. - This particular website is for a shoe company. - So for the title, - I'm going to put the name of the company here. - I'll say Z H W shoes just kind of a generic name. - I made up, - and we'll put some information that will be kind of helpful for search engines. - Will say, - this is Ah, - bargain. - Um, - footwear wholesales like that. - And this page is the about page. - My home page is going to start off with information about the company. - So I'll just go ahead and say about us. - I think that and we will close this out slash title. - Okay, - so this is going to do a few things. - Um, - number one search engines can see this, - and they're going to say, - Hey, - this is a site that has content about shoes, - um, - and for wholesaling footwear on. - And this is also a page of about them or about the company. - The other thing that title does is that it's also visible on the browser tab. - Let's actually take a look at this. - I'm gonna go ahead and save this page. - So we're gonna say file save or you'll probably get in the habit of doing. - Um, - command s on Mac. - Or you could do Control s on windows to save. - All right. - And let's go ahead and bring this up in the browser. - And we can just drag this guy into chrome here. - We'll go ahead and find that file. - It's called Index, - and I'll just throw that in there. - Okay, - So first of all, - this page is white. - It's totally blank. - I haven't put anything in the body sex and yet, - but one thing we can see from the head is up here at the very top of the browser tab, - you'll be able to see the name of the website, - and it runs out of space. - There starts office, - huge W shoes. - Bargain footwear, - huh? - Cool. - So that's a good start. - So that's one thing that we can see in the head section. - Is this tab here? - Aside from that, - you're not going to see physically see anything else from inside the head section. - In fact, - this little white rectangle here that is my browser window that's the body. - That's where we're going to see things that are located in the body. - So let's jump back over to the code then and let's write some more and you will zoom out a - tiny bit like that. - Okay, - so this is a really basic HTML page is we have the doc type of the top. - Then we have the HTML tag and then nested inside the HTML tag. - We have the two main sections of any Web page. - We have the head in the body, - so we already saw that we can place the title in the head. - Let's go ahead and write something in the body section and see if that shows up. - Let's go ahead and write Hello world here inside the body. - So I'm gonna go ahead and save that And I did a command after you can go file save and I'm - gonna come back to the browser and important thing is I need to refresh always need to - refresh because I'm saving the code and then in order for the browser to see it, - we have to reload it. - So I'm gonna go to this little refresh arrow here to reload the page on Mac, - You can also hit command are to reload the page and more than likely on windows in your - browser is gonna be control. - Are control and the R Key. - So hit command are. - And there we can see the word Hello. - World appeared there in the corner of the browser window like that that a little larger - there. - There we go. - So it's nice and easy to see. - Okay, - Excellent. - So this demonstrates that the body is where we can physically see content in the page. - So we learned about Doc type HTML tag the head in the body on. - We also learned to write comments in the code, - which only we can see. - You'll notice it. - This comment here that says the body is the entire viewable area. - The Web page. - We didn't see that when we went to the browser. - We only saw the text we wrote outside of the comment, - which is hello world and sublime Text agrees this out for us so that we can see clearly - that that that this code here is a comment 5. Text Formatting: - Let's do another experiment. - Let's go inside of the body section and I'm gonna hit return a few times and I'm gonna say - hello, - Moon Next. - And then we'll go ahead and save and will come back to the browser and see what that did. - Okay, - that's interesting. - Um, - let's look here at the word. - Hello, - Moon. - Hello, - world. - How come when I wrote it in the code here I hit return and I put this one on top of this - one. - So world hello World should be above hello Moon. - But then, - strangely, - in the browser there appearing side by side. - Well, - the reason why is that the browser ignores Whitespace. - It's on Lee really concerned with the relationship of these tags, - right? - These each Timo elements made up of this starting tag and ending tag. - They are surrounding content and they're describing to the browser what that content is.