HTML5 & CSS3 Fundamentals: Development for Absolute Beginners

Sobre este curso

hello and welcome to this fundamental series on using html5 and css3 to build webpages this series is designed for somebody who has little or no experience with HTML or CSS but wants to get a

quick overview of the major html5 elements as well as css3 selectors and properties and want some hands-on practice as well in building web pages if the terminology that I just used is a

little foreign to you perfect you’re in the right spot I’ll explain everything in due time so my name is bob tabor and i typically talk about c-sharp visual basic asp.net and other related dotnet

topics on my website www.chesterlaw.com excited that channel 9 has invited me to create this series of videos it’s extremely important that you learn these concepts soon you’ll be able to build

not only webpages but also native windows 8 user interfaces using only html5 and css3 so it’ll become increasingly a more and more vital skill beyond web development if you’re already

working with HTML and CSS and you just want to learn what’s new in HTML version 5 and CSS level 3 then this is probably not the right place to start I imagine that you’re looking for a what’s new in

html5 or what’s new in it css3 and that is not what this series is all about this is gonna cover material that you probably already know as well as the most pertinent html5 and css3 editions

for absolute beginners to web development so again your time is probably better spent somewhere else quite frankly alright so here’s what I want to accomplish in this series we’re

gonna start by building a complete example now we’re not gonna win any designer hordes but it’s still going to get us busy typing away and writing both html5 and css3 and then next I’m going

to dice to the html5 syntax and in the course of this discussion I hope to change any preconceived ideas that you might have about web design perhaps you’re thinking

I’m going to show you how to create beautiful web pages that’s not exactly what I’m gonna do here my focus is going to be on creating semantically correct web pages that is at the heart of the

newest features that have been added and offered by html5 if you don’t know what I mean by that then I assure you by the end of the series it’ll become firmly cemented in

your mind then we’re going to talk about topics most developers skip over thinking that they’re not all that important like doctype sand validation and char

sets m’s versus pixels versus percentages and other geeky stuff it’s the good stuff that makes most normal people’s eyes glaze over whenever you talk to them about it and then we’re

going to talk about the importance of separating structure from aesthetics by separating out the work that we delegate to html5 from the work that we delegate to css3 we’re gonna discuss cascading

style sheets and demonstrate many categories of properties that can be modified by the styles that we create we’re going to talk about the syntax the units of measure how to build reusable

styles and other best practices and a bunch of other fun stuff so my hope is that by the end of the series you’re gonna be able to look at a webpage that was developed by somebody else and

you’ll be able to make sense of it you’ll be able to pick it apart understand what they did what technique they used and you’ll learn from them as a result my hope is that this series get

you oriented in the right direction towards learning more about web development and to that end in the final lesson in this series I’m gonna give you a list of about a dozen or so hot topics

and other resources where you can continue on in your self-study so let me give you a quick caveat before we begin my goal is to teach you the basics of html5 and css3 in this course however I

simply can’t teach you how to make an aesthetically beautiful web page design because frankly I don’t know how when I need an attractive beautiful web page for my website I work

with a graphic designer or find a template and then license that for my website when I worked in corporate environments and built intranet applications using HTML and CSS

JavaScript and asp.net the company usually had a team of web designers that designed the web page background the tax the images and sometimes they did this by using a tool like a Dodi Adobe

Photoshop after the management team approved their designs and they would give it to the developers who would then splice up and implement that design using just HTML and CSS now as a result

I got pretty good at taking somebody else’s vision and their design and then implementing that in HTML and CSS code there are many courses there are many websites there are many books that would

love to teach you how to become a graphic designer that is not what we’re gonna do here in this series you’ll be learning from a decidedly developer centric perspective ok furthermore this

series is not meant to be an exhaustive reference for html5 or css3 beyond the standards document that all web browser vendors are encouraged to follow I’m really not familiar with any

single best source for this information I’m sure there’s one out there but what I usually do is I know that something exists I need a little more information about it and then I just go out on the

internet and do a search on my favorite search engine and fortunately there are tens of thousands of websites that post HTML and CSS tips and tricks and I generally purchase a book or maybe I’ll

find a little cheat sheet on the internet that’ll help me remember the syntax of a given element or what have you these are all helpful and perhaps in the

comments below you and your fellow students can exchange links for the best resources that are out there finally there are many great tools that will help you to author web pages there are

even free tools for Microsoft that provide many amenities as you create your code including HTML and CSS hints as you type a design view that allows you to

get a quick preview of your webpage without having to load it into a web browser and a lot more however just to keep things extremely simple I’m gonna utilize two tools that I know that you

already have installed in your Windows computer no matter whether you’re running Windows 95 or running the latest greatest operating system I’m gonna be using notepad that’s right just notepad

and Internet Explorer I’m gonna type the code into notepad I’m gonna save the file and then I’m gonna open it up in Internet Explorer now since this is a series of videos on HTML version 5

you’re gonna need a web browser that’ll support html5 so you’re gonna need a relatively newer release of Internet Explorer I’m gonna be using Internet Explorer 9.0 and you should feel

confident using version 9 or later if it’s available to you all right after you finish this course assuming that you are gonna progress down a developer track and not a graphic designer track

I’d recommend following up by learning about JavaScript and a great place to learn about JavaScript is my JavaScript fundamental series which is also free here on channel 9 and then with my C

sharp or visual basic fundamentals series also here are for free on channel then you should finally be able to move on to asp.net and I have a number of great asp.net courses on my own website

WWL studio net please free feel free to drop the drop by and check it out if you follow that path you’re gonna be well-positioned to build dynamic data-driven websites for small business

clients or work in a IT department as a software developer at larger enterprises again I’ll have more to say about where to go from here at the very end in lesson 18

okay before we get started the video is embedded on the web page on channel 9 are presented somewhat smaller than how I originally record them which is in high-def 1280 by 720

now I’ll increase the font size of the text that I type in a notepad however if the text seems obscured or difficult to read then it may have to do with the speed of your

internet connection in that case you may want to download the videos to your computer first and watch them there also you should be able to watch full screen take a moment to make sure you can see

where to download the code on the pages that you’re currently viewing these videos from where you can download the video itself how to go fullscreen and the videos player controls and so on

finally you are in control of the viewing experience to get the most out of this or any video series you should become an active learner type the code in yourself to build muscle memory and

to force your brain to understand what it is that the speaker is attempting to explain pause rewind the video ask questions in the comments area below the video active learners always learn more

quickly commit the time and you’ll have these ideas under your belt in no time at all okay so let’s go ahead and get started in the next lesson we’re gonna build our first html5 web page that’s

pretty exciting stuff I want to encourage you to get a plan in place to follow along and enjoy the entire process of learning you can do this it’s fun it’s exciting and we’ll see in the

next lesson thank you