Searching...
- Home
- Video Lectures
- Official Website
Course
| Subject: | Web Design |
| Topic: | CSS |
| Views: | 44,373 |
CSS for Beginners Ninja Tutorials
Video Lectures
Displaying all 53 video lectures.
Lecture 1 Play Video |
Introduction to CSS Hey Ninjas, welcome to your very first CSS for Beginners tutorial! In this video I'll go through everything you need to know before taking this course and give you a brief overview of what we'll be covering over the next 30 - 40 videos, such as CSS selectors, CSS classes, CSS ID's and much more. For the whole CSS tutorial playlist visit - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... For the HTML Basics Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk |
Lecture 2 Play Video |
What is CSS? Heeeey Ninjas! Welcome to your second CSS tutorial for beginners. In this lesson we're gonna take a birds-eye view of what CSS is and how it fits into the front-end web development arena. Remember ninjas and ninjarettes, that CSS is all about the presentation of our HTML in a browser. Whereas HTML controls the structure of our web page, and gets content onto a browser, CSS takes that content and makes it look awesome to you and me :). FULL CSS FOR BEGINNERS PLAYLIST For the whole CSS tutorial playlist visit - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... HTML BASICS COURSE For the HTML Basics Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... CHANNEL https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg WEBSITE For more front-end development tutorials & to black-belt your coding skills, head over to http://thenetninja.co.uk @TheNetNinjaUk - https://twitter.com/thenetninjauk |
Lecture 3 Play Video |
Default Browser Styles Yo Ninjas, in this CSS tutorial we're going to rip down a website to the bare bones and leave only the default browser styles so we can take a closer look. Default browser styles are the basic CSS styles that all browsers impose on a raw HTML document. It is important to know of their impact so that you're not chasing your tail when elements seem to be 'styling themselves' ! For the whole CSS tutorial playlist visit - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... For the HTML Basics Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 4 Play Video |
Basic CSS Syntax Hey ninjas, it's time to learn about basic CSS syntax! In this CSS tutorial for beginners we'll cover how to construct some basic CSS rules, learning about about CSS selectors and CSS declarations along the way. CSS is simple just a collection of these rules and when you've mastered the basics, you'll be a ninja in no time! For the whole CSS tutorial playlist visit - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... For the HTML Basics Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 5 Play Video |
Inline & Embedded Styles Yo ninjas, in this CSS for Beginners tutorial we'll take a look at how NOT to apply CSS to your HTML (99% of the time, at least :) ). This includes the yucky in-line style approach, where we apply CSS styles directly to the tags themselves via the 'style' attribute, and embedded styles in the head of the document. In the next movie we'll take a look at External Style Sheets and why they're sooo much better :). HTML Basics Attributes video - https://www.youtube.com/watch?v=IJWcX2EDAKg&list=PL4cUxeGkcC... For the whole CSS tutorial playlist visit - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... For the HTML Basics Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 6 Play Video |
External Style Sheets Hiya ninjas and ninjarettes! In this CSS for Beginners lesson we're going to be looking at why external style sheets are awesome, and why they are a much better way to add CSS to your HTML than inline or embedded styling! SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 7 Play Video |
CSS Comments and Where to Use Them SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 8 Play Video |
Targeting Elements with CSS Yo everyone! In this CSS tutorial we'll be diving deep into our HTML document and targeting HTML elements with our CSS rules. Targeting elements directly with their tag names is one of the easiest ways to form CSS selectors, and by the end of this video you'll be able to do it with your eyes closed. Ninja style :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 9 Play Video |
Targeting Classes and ID's Hey ninjas, today we're gonna be dipping our toes into the waters of Classes and ID's in CSS selectors. In this CSS tutorial we'll first have a quick recap and what classes and ID's are, before diving into the HTML and constructing some CSS rules ourselves with what we learn. If you want to learn more about class and ID's in HTML, check out my HTML basics lesson on the subject @ https://www.youtube.com/watch?v=9UNmumTYuq8&index=14&list=PL... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 10 Play Video |
CSS Conflicts & the Cascade Heey class! Today we're going to tackle what happens when you run into CSS simple conflicts and how the cascade (from Cascading Style Sheets) plays a part in resolving those conflicts. Remember, Cascading mean falling downwards - from top to bottom. That means that CSS is read from TOP to BOTTOM! If you have any questions about this CSS tutorial, comment below. Please like & subscribe if you enjoy, ninjas :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 11 Play Video |
Inheritance Yo everyone! In this CSS tutorial for beginners I'll go through exactly what inheritance in CSS is, and how it works with conflicts. Be aware of the sneaky browser styles that can scupper your inherited styles ninjas. Keep coding :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 12 Play Video |
Selector Specificty Hey guys, in this CSS tutorial for beginners, we're going to take a look at selector specificity (I hate pronouncing that word, even though I'm a ninja!). Essentially, this translates as how specific and how much weight your CSS selector has when it comes to dealing with conflicts. It's a really important subject that I suggest you guys master. Keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 13 Play Video |
The Important Declaration Hey ninjas, in this CSS tutorial for beginners, we'll take a close look at the !important declaration and how it should AND SHOULDN'T be used. The important declaration should only be used in extreme cases where no other alternative is available. Otherwise, it's always best to re-visit your selectors to make them work the way you want them to! SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 14 Play Video |
Targeting Multiple Elements Hey guys, in this CSS tutorial for beginners we're going to talk about grouping selectors in CSS, so that you can target multiple elements in the same rule. Grouping selectors in CSS is a great way to save your time so you can spend more effort into black-belting your skills instead :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 15 Play Video |
Descendant Selectors Hey ninjas, in this CSS tutorial for beginners we'll take a first look at descendant selectors and how we can use them to make CSS rules to target more specific tags, because sometimes a catch-all rule sin't enough. Have fun, and keep coding :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 16 Play Video |
Child Selectors Hey guys and girls, in this CSS tutorial for beginners we're gonna get jiggy with the child combinator and see how it can help you hone in on certain element within a HTML structure. Great for singling out direct children of parent elements, the child selector is going to be your new best friend. Keep coding ninjas, and I'll see you on the other side :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 17 Play Video |
Adjacent Selectors Hey ninjas, what's going on? In this CSS tutorial for beginners we're going to go a little deeper down the rabbit whole and take a look at adjacent selectors. Adjacent selectors are great for targeting those hard-to-reach places - and by the way this isn't an ad for a vacuum cleaner - when other selectors fail. Anyway, keep coding and have fun! SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 18 Play Video |
Attribute Selectors Yo ninjas, what's going on? In this CSS tutorial for beginner's we'll be mixing it up with some awesome attribute selectors - which, quite honestly, are one of the coolest types of selectors in CSS, full stop. Attribute selectors can help us target those elements which do not have a class, ID, or any way of finding it via child or descendant selectors. Swot up on you attribute selectors to become a true CSS ninja! Keep coding, and have fun :). Link to HTML video with information about HTML attributes - https://www.youtube.com/watch?v=IJWcX2EDAKg&index=3&list=PL4... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 19 Play Video |
Pseudo Selectors Hey ninjas, in this CSS tutorial for beginners we'll start to look at the amazing power of pseudo classes. Pseudo classes are essentially key words in CSS that we can use to target & style dynamic events as well as complex structural elements. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 20 Play Video |
Hover, Active & Visited Effects Yo ninjas, in this CSS tutorial for beginners we'll dive into a few examples of dynamic pseudo classes. Namely, we'll look at 3 of the most commonly used ones - hover, active and visited states of elements (mainly links). Have fun and keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 21 Play Video |
First & Last Child Selectors Heeeey, ninjas! So in this CSS tutorial for beginners I'll be going through what exactly the first and last child pseudo classes are, and how they can help you target elements you wouldn't think possible without using a class or ID! Last and first child are both STRUCTURAL pseudo classes, that is, they help to select very specific elements within the HTML structure, or DOM (document object model). Keep coding and have fun. MC Ninja, signing out. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 22 Play Video |
First & Last of Type Selectors Yo ninjas, I'm back with another CSS tutorial for beginners, and in this lesson I'll be explaining exactly what the heck a first & last of type pseudo class is. We can uses first and last of type selectors when first-child and last-child just don't cut it, and so we don't have to go filling our code with worthless junky classes that make no sense whatsoever. Chill, peace, fun & keep coding my friends :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 23 Play Video |
nth Child Selectors Yo ninjas, once again! I'm here with another CSS tutorial for beginners, and this time we're going to be getting familiar with the nth-child pseudo classes. They are you new best friend, trust me. If there's one structural pseudo class you should master, it's this one! Nth-child selectors help us target any child of a parent element based on it's position within the HTML structure. It is an awesome technique, and one that I hope you will enjoy using on your own projects. Stay cool, keep coding & peace, my friends :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 24 Play Video |
nth of Type Selectors Yo my good friends, I'm here with another CSS for beginners tutorial. And in the lesson we're going to learn all about the nth-of-type pseudo classes! Nth of type classes are a great fall-back option when you just can't get nth-child to work, because they disregard elements that are not of the type you are targeting. Anyway, have fun, peace & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 25 Play Video |
Combining Selectors Hey guys. So here's another CSS tutorial for you, and in this lesson we're gonna find out how to combine our selectors! Selectors can be combined to make them more specific, and to create combinations of elements and classes / ID's. They're useful when 2 different element types have the same class, or when you need to make a more weightier / specific CSS rule. Have fun, peace & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 26 Play Video |
The Universal Selector Yo guys, in this CSS tutorial for beginners, we'll take a look at the universal selector, which is the mother of all selectors. The God particle of CSS. It's pretty much like when physicists split the atom, all that weird sub-atomic junk came flying out. When you split open the universal selector you get ALL the HTML elements flying out of it at light speed. So yeah, it's pretty powerful. Use with caution. Put simple my black-belting karate friends with digi-nun-chucks, use the universal selector if you want to target EVERY element you have on your page. That's right, EEEEVERY element! Anyway, happy coding and peace out my bro's :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 27 Play Video |
Font Size Hey my good friends, in this CSS tutorial for beginners we're going to dive head-first into the font-size property. The font-size property in CSS, believe it or not, controls how large the font displays in a browser. We can control font size either via absolute or relative measurements, and we'll cover both types in this video. Absolute font sizes are immutable (unless overridden later in the CSS), whereas relative font sizes are determined largely by the base font size they inherit. For my video on CSS inheritance, check out https://www.youtube.com/watch?v=ZMpaebQ3n6A&index=11&list=PL... Anyway, peace out, keep coding & have fun :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 28 Play Video |
Font Family Yo ninjas, welcome to your 28th CSS tutorial for beginners. By now you should be getting comfortable with selecting elements on your page and applying styles to them. In this video we'll jump into the happy world of font families in CSS. You'll learn how to change the font style of your text & elements, and also how to create a font stack to allow additional fonts for the user to fall back on. Peace out, keep coding & have fun :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 29 Play Video |
Text Decoration Hey everyone.. Today, in this CSS tutorial, we're gonna take a look at the text-decoration CSS property. Text decoration is most commonly used on links (to underline text) and on lists (to put a line-through on crossed out items). Text decoration is one the 'a' tags default browser style properties, which is why you always see anchor tags being underlined in HTML web pages without any CSS attached to it. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 30 Play Video |
Font Weight Howdy ninjas, in this CSS beginners tutorial we'll take an in-depth look into the font weight property. Font weight in CSS simply means how bold or how light the font displays in a browser. Be aware that not all fonts come with light and bold variations, so the different font weights available in CSS may not work in all cases. One font which has these extra two weights in Windows 8.1 is called Yu Gothic, which I'll be using in this video. Anyway, peace out, have fun and keep on coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 31 Play Video |
Text Transform Yo coding ninja warriors, in this CSS beginner tutorial we're going to get our nun-chucks out on the text-transform property. The text-transform property in CSS controls the character casing (that is, whether it is capitalized or not) of your HTML elements. Anyway, peace out, keep coding and have some fricken fun :). For more CSS tutorials & other front-end development lessons subscribe to my channel... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 32 Play Video |
Text Colour SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 33 Play Video |
Styling Links GUYS, we're gonna do something very very dangerous in this CSS tutorial for beginners. We're going to style some links like it's the 90's again. That means luminous colours, background highlights and pretty much everything else except a marquee tag :P. Anyway, in all seriousness ninjas, we'll be putting to good use all of the text properties we've learnt so far and making some cool looking link hover effects. Peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 34 Play Video |
Letter Spacing & Line Height Hey everyone, in this CSS lesson for beginners we'll explore what the line height, letter spacing & word spacing properties can do for us. Letter spacing controls the horizontal space between characters / letters. The word spacing controls the horizontal space between words, and the line height controls the vertical space between lines of text within a tag. This is not to be confused with padding or margin. Anyway, peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 35 Play Video |
Paragraph Spacing Yo ninjas! In this CSS tutorial for beginners I'll walk you through how to space out paragraph tags on a page using the margin property. Consider this a gentle introduction into the box model in CSS. In the next lesson we'll learn even more about margins and the box model property. When applying spacing between paragraph tags, it's normally best just to apply a margin to either the bottom or the top of the tag. I opt for bottom, but this is your choice. Anyway, peace out, have fun and keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 36 Play Video |
The Box Model Ok ninja fledglings, it's time to take our CSS skills to the next level, so in this CSS tutorial we'll be introducing the.. Dun dun dun... BOX MODEL! The box model is a core concept within CSS that dictates the spacing of all of our HTML elements on the page, as well as element borders. The box model is made up of the element's width, height, padding, border and padding. Anyway, peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 37 Play Video |
Margins Yo ninjas, in this CSS lesson we're gonna dive deeper into the box model and take a look at CSS margins! Margins control the spacing of elements from one another and work in a clockwise fashion. This means we can apply a margin to the top, right, bottom and left. We'll learn about each one, as well as the margin auto value, in this CSS tutorial. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 38 Play Video |
Padding Hey all, in this CSS tutorial for beginners, we'll take a closer look at the padding property, and padding short hand notation. Padding in CSS controls the internal space of an element. It is the space between the border/outer edge of an element, and the content within it. Peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 39 Play Video |
Padding & Margin Long-hand Yo all, in this CSS tutorial for beginners we'll jump back into the margin and padding properties we checked out in the last two lessons. That's because I forgot to mention that there are long-hand ways to specify values for those properties. The margin and padding long-hand methods take more time to write, but can be useful if only applying a padding or margin to one side. They also come in handy when overriding inherited padding & margin values from other rules. Anyway, peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 40 Play Video |
Borders Hey all, in this CSS tutorial for beginners we're going to conclude our discussion of the box model by talking about the border property. Borders can be written in short-hand and in long-hand, much like margin and padding. In this lesson we'll be covering both ways. CSS borders come in may different styles - dashed, dotted, solid, double and more, but some styles require thicker border widths. Anyway, peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 41 Play Video |
Block-level Elements Yo my fellow web ninjas! In this CSS tutorial for beginners we're going to explore what a block-level element is. I've mentioned already that the box-model governs the spacial properties (padding, margin, width, height & border) of all block-level elements, but not yet talked about what a block level element is! A block level element is one which occupies the full horizontal width of its parent element. An in-line element stacks from left to right... IN LINE. Hence the name :P. Box model properties do not apply to in-line elements, but we can set the display types of these elements to inline-block, so that we can control the spacial properties of them too! Anyway, peace out, have fun & keep coding :). LINK TO LIST OF BLOCK-LEVEL AND IN-LINE ELEMENTS - http://www.w3resource.com/html/HTML-block-level-and-inline-e... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 42 Play Video |
Width & Height In this CSS tutorial for beginners, we'll take a look at the final two properties of the box mode - width and height. Width and height can be given static or dynamic values (pixels or percentages/ems), depending on what you need. Working with percentage widths are a great way to develop responsive websites and pixel widths are best used for elements which you reeeaaally don't want to change width/height. Anyway, peace out, have fun, keep coding & don't forget to subscribe :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 43 Play Video |
Rounded Corners Hey ninjas, in this CSS tutorial we'll be looking at the border-radius property, which allows us to style rounded corners. The border-radius property is now nearly fully supported in all browsers, with the exception of a couple of legacy ones. But to be honest, the border-radius property is a perfect fallback advert for 'who fives a crap' anyway. :). Peace out, have fun, keep coding & don't forget to subscribe :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 44 Play Video |
Backgrounds Yaheeey my ninjas :). So I think it's finally time I introduced you all to my little friend, mr background. Yeah... He's mighty cool and can teach you a thing or two about CSS so you can progress to true ninja status like me. So, what is the background property in CSS? Well, my friends, it is made up of several other background properties, such as background-position, background-image, background-color, etc - you get the picture. So in this CSS tutorial I'm gonna teach you about my favourite ones. Not all of them mind you, cause I don't have that much time available ;). But to check out the rest, just take a peak at this article on Mozilla developer's website: https://developer.mozilla.org/en-US/docs/Web/CSS/background Hey... where are you going? Watch my video first you bad ass :P. Peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 45 Play Video |
Background Shorthand So.. you think you know all there is to know about the background property, huh? huh? In this CSS tutorial we'll explore the background shorthand property so that you can save time by merging various background properties together in one line! Phew, that was a mouthful. So get out your hyper CSS fuelled ninja belts and come along for the ride as we discover the power of the background shorthand property :). Peace out, keep coding & have fun :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 46 Play Video |
Multiple Backgrounds Yooo ninjas. So in this CSS tutorial, I'll be imparting some extra background property wisdom. More specifically, I'll be teaching you about the awesomeness of multiple backgrounds! First of all we'll talk about how to add in multiple backgrounds to the background-image property. Then we'll use our ninja powers to tweak the background-repeat, background-size & background position properties so that they look nice on a web page. Peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 47 Play Video |
Color Now, my friends, let there be COLOUR (or color, depending on when you're from ;) ). In this CCS tutorial we'll take a look at how we can use color for properties such as the background & text color. Color can be used in either Hex or rgb format. Hex codes are made up of 6 numbers &/or letters, and always begin with a # sign 0 #00000. rgb format is made up of 3 numbers (each ranging from 0 to 255) and start with 'rgb' - rgb(0,0,0). You can also use hsl format (hue, saturation and luminosity), which people from a design background will probably know all about. In CSS, this looks something like hsl(60, 70%, 40%). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 48 Play Video |
Opacity I know, I know, I said that this CSS tutorial was going to be about gradients. But I thought I'd run through opacity first of all, because it's a really cool property that ties in with the rgb background property. Opacity in CSS controls how transparent an element is, and ranges from 0 (completely transparent) to 1 (completely opaque). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 49 Play Video |
CSS Gradients Hey guys, it's time to take a look at one of the more cooler CSS properties - gradients! In this CSS tutorial we'll explore the gradient syntax and how we can create cool looking CSS buttons using them. Gradients have many different values that can be customized to create almost any kind of gradient, and this is where the syntax can start to get a little fiddly. In that case, be sure to check out the CSS gradient generator at http://www.colorzilla.com/gradient-editor/ . Keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 50 Play Video |
Box Shadow Try out the box-shadow CSS generator @ http://www.cssmatic.com/box-shadow SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 51 Play Video |
Browser Support Browser support in CSS is an important issue, and one that is often overlooked by fledgling front-end ninjas! So in this CSS tutorial for beginners we'll take a quick look at at ways we can check browser support for some CSS features, and how to apply fall-back options when needed. Have fun :). Check support for CSS features @ http://caniuse.com/ Vendorize your CSS @ http://pleeease.io/play/ Provide back-ups with http://modernizr.com/ SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 52 Play Video |
CSS Website Build (Part 1) Hey ninjas! In this tutorial, we'll be taking a simple, raw HTML web page and styling it up like it's 1999. Errr.. or maybe 2015 :). Anyway, everything you see in this video has been covered in this CSS for beginners playlist, so if there's anything you're not sure about be sure to check out the earlier video's! For the finished files, head over to gitHub @ https://github.com/iamshaunjp/CSS-for-Beginners---Bikes-Webs... and click the 'download zip' button. Have fun :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
Lecture 53 Play Video |
CSS Website Build (Part 2) Welcome to part 2 of my CSS website build tutorial ninja's! In just over 5 minutes, you'll have completed a full HTML to CSS web-page project. And once the first page is done, the rest is a piece of stealth cake. This is the last video in the CSS for beginners tutorial series, but keep your belts on, because pretty soon I'll be uploading a JavaScript playlist to spar with. Download the finished code from gitHub @ https://github.com/iamshaunjp/CSS-for-Beginners---Bikes-Webs... Have fun :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk |
