Video: Additional resources

Well, we've come to the end of another title in my CSS series. I want to thank you for watching CSS: Styling Navigation, and I hope you become inspired to look for meaningful ways that you can improve your site's navigation through CSS. Before you go, I want to leave you with a few tools and resources that I think will help you learn more about how CSS can enhance site navigation. So I'm in this additional resources.htm file, and if you have access to the exercise files, if you look in the 07_01 directory, you'll find this page. So you can just open it up and have quick access to these links.

Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.

Additional resources

Well, we've come to the end of another title in my CSS series.I want to thank you for watching CSS: Styling Navigation, and I hope you become inspiredto look for meaningful ways that you can improve your site's navigation through CSS.Before you go, I want to leave you with a few tools and resources that I think will helpyou learn more about how CSS can enhance site navigation.So I'm in this additional resources.htm file, and if you have access to the exercise files,if you look in the 07_01 directory, you'll find this page.So you can just open it up and have quick access to these links.

If not, if you're just watching this, you should see an overlay show up that's goingto give you a link to the page as well.Well, if you've taken any of my CSS courses, you've probably already seen this page, the CSS Current Work Page.This is one of my favorite pages, it's bookmarked, I read it all the time, but what this is isit's a quick snapshot of what's going on with all of the different CSS specifications.It tells you kind of where they are, what's been added to them, how they've changed, howfar along the process of being supportive they are.So this is a fantastic place to learn more about what's currently being worked on, onCSS and really stay ahead of the game in terms of what's coming.

The next resource I want to take you to is the WebAIM's guide to link accessibility.This is WebAIM, an organization dedicated to accessibility, and if you go to their pageand browser articles you're going to find this article on Links and Hypertext.And what's awesome about this article, this page has a lot of great information abouthow to make sure that all of your site navigation remains accessible to anybody that uses your site.This is definitely a page you want to go through and study all the different ways that youcan make your links accessible.Next, I want to take you to an article in Smashing Magazine by Lee Munroe calledThe Definitive Guide to Styling Web Links.

The thing that I really like about this article is it gives a nice overview of a lot of thebest practices around styling links.It's going to give you some examples, it's going to go over different aspects of designingsite navigation, and it's going to have links to external resources.So definitely check this article out, it's got a lot of really super-useful information in it.Next, I want to take you back to the WebAIM's site and show you their Color Contrast Checker.So what's really cool about this is let's say you come up with a color scheme for yoursite, you can come to this page, plug in the colors, especially when you're going to havetwo colors that are right on top of each other like foreground or background, and you cancheck their contrast to make sure that people with color blindness or other vision disabilitiescan still tell the difference between those two items.

That's incredibly important, because if you have two colors that are too low in termsof contrast, people with certain types of colorblindness are going to have a reallyhard time discerning between the background and the link.So, in order to make sure that your site is usable by everybody that visits it, you wantto check your color schemes against this type of a Color Contrast Checker.So this is definitely something you want to bookmark and use often.Next up, I have a tool that we just got done using up too long ago, and that would be theUltimate CSS Gradient Generator.We used this a little bit earlier when we were creating our buttons, and I got to tellyou I use this all the time.

So definitely you want to bookmark this and use it just to save yourself a lot of timewhen you're creating gradients and to make sure that the syntax is going to be correct.Next, I have a tool that I pointed you to in the lab but we didn't actually use, and Iwanted to show you this.This is the CSS3 Generator by Randy Jensen, and I love this tool.Now what's great about this is you choose whatever property you want to be able to kindof experiment with, let's say box shadow because we were using that earlier.So now I can choose whether or not I want it to be inset, I could play around with differentvalues like the Horizontal Length and the Vertical Length, I'll go ahead and enter acolor in here so we can sort of preview this.

I'll go ahead and give it Blur Radius, let's say you do a blur radius of 10, and then we'lldo a spread of say 5.And as soon as you start plugging those values in, you're going to get a preview of here,and you can start changing those values, so you can really get a good field for what thesevalues are going to do and how it's going to integrate into the element that you're trying to style.And what's really cool about it is you're going to get some code right down here thatyou can just click, copy, and then paste into your own CSS, and it's going to tell you whichversions of browsers support this so that makes it really handy to make sure that you'regoing to be as cross- browser compliant as possible.

Another one of my favorite tools is Adobe Kuler.One of the things that I find kind of difficult is coming up with a color scheme for my site, especially for navigation.So what's great about Kuler is they have a lot of preset colors that people have saved,but you can just go ahead and start your own.You can click right here to go to the editor, and you can click a color, and you can certainlychange it if you want, set that as your Base Color, and then you can use all of these differentrules like Monochromatic, Complimentary Compound, you can use shades of the color, you can changethe brightness and the darkness of it, and it's going to give you different values for this.

HSV, it's going to give you RGB, it's going to give you hex values so you can copy andpaste those in, and you can sort of play around with these color schemes to see how they worktogether before you commit to using them in your site.So I love Kuler, it's a tool that I use all the time.I also wanted to show you guys CSS Sprites, which is a nice little tool for generating sprites.You know, if you have Illustrator, and you have Photoshop, and you feel like creatingthose on your own, you certainly can, there's nothing wrong with that.But if you'd like you can use a tool like this, and there are a lot of them online, butthis is one that I actually really like, but certainly if you go ahead to Google, GoogleCSS sprites generator, you're going to see a ton of these schools.

And essentially, the way most of these work is you upload multiple graphics, and thesewill stitch them together in a sprite for you, generate the sprite which you can thendownload and then generate the CSS code that allows you to access the different graphics within the sprite.So that way there's no guessing as to, what I need to use to position this particularicon, and these tools work really, really well, they are a great way to save a little bit of time.So kind of experiment those tools see if you like them and see if they fit your workflow.And of course, the last resource I am going to point you to is lynda.com.

You know, if you want to continue learning CSS, I recommend checking out all the otherCSS related titles in the lynda.com online training library.We have a variety CSS courses structured around both authoring tools, in general conceptsand the library continues to grow every single day.Now if you started here in this course, I recommend actually going back and checkingout the CSS Fundamentals, CSS Core Concepts and the CSS Page Layout courses.Of course, keep an eye out for all of the courses in our CSS series.

Just look for CSS: and then a course name.We're going to continue to add new courses in the CSS series, so be sure to check backthe library often for new releases.Once again, thanks for watching, and I'll see you in my next title.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.