Take your CSS skills to the next level. In this class you’ll expand your knowledge of what CSS can do, enabling you to make more visually interesting and better coded webpages.
From more advanced ways to visually style content, to better ways of targeting elements with CSS, this course will supercharge your CSS skills.
Take control over the layout of your webpages by learning about an alternate box-model called border-box, use vector graphics (SVG), and create visual effects such as CSS gradients, shadows, transparent colors (with RGBA), and more. Gain a deeper understanding of how positioning works (relative, absolute, fixed), target elements with advanced CSS selectors, and learn the power of CSS variables. You’ll better optimize your pages with responsive images using CSS media queries, img srcset, and the picture element.
Visualizing the box model (margin, padding, and border) in Chrome’s DevTools
Fixing spacing issues around images
CSS shorthand for the background property
Font-Weight, Font-Style, & Unitless Line-Height
Adding custom web fonts from Google Fonts
Using font-weight & font-style
Box Model: Content-Box vs. Border-Box
How border-box is different than content-box
Best practice for applying border-box to everything
Intro to SVG (Scalable Vector Graphics)
Adding SVG to a webpage
Web Servers: Configuring a .htaccess file for SVG & gzip
Embedding SVG (instead of linking)
Styling SVG using CSS
Defining the SVG sprite
Using a sprite
CSS Position Property
The static value & the normal document flow
The relative value
The absolute value
The dynamic duo: relative parent, absolute child
The fixed value
Creating a Fixed Navbar & RGBA Color
Creating a fixed navbar on wider screens
CSS Background Gradients & Gradient Patterns
CSS background gradients
Creating a striped background using gradients
Multiple Backgrounds & Viewport Sizing Units (vw)
Multiple backgrounds on a single element
Colorizing a photo by overlaying a transparent gradient
Using viewport sizing units (vw)
Creating Columns with Inline-Block & Calc()
Displaying content as columns using inline-block
Using CSS calc()
CSS Variables (Custom Properties)
Defining & using CSS variables
The power of inheritance
Using first-child & last-child
Direct child/descendant selectors
Pseudo-Elements & the Content Property
The content property
Seeing pseudo-elements in Chrome’s DevTools
Adding link icons with attribute selectors
“Ends with” attribute selector
“Begins with” attribute selector
“Contains” attribute selector
Styling Forms with Attribute Selectors
Styling form elements
Targeting inputs with attribute selectors
The ::placeholder pseudo element
Relative Sizes: Em and Rem
Flix: Creating a Scrollable Area
Creating a horizontal scrollable area
Optimizing the scrolling for iOS touch devices
Flix: Media Queries for Retina/HiDPI Graphics
Using media queries to load hi-res images for Retina/HiDPI displays
The picture element
Off-Screen Side Nav Using Only CSS
Responsive off-screen navigation
Toggling the navigation with a checkbox
Box-Shadow, Text-Shadow, & Z-Index
Using the CSS box-shadow property
Changing an element’s default stack order with position and z-index
Adding drop shadows to text with CSS text-shadow
Layering multiple text-shadows for a detached outline effect
Hiding & Showing: Display, Visibility, & Opacity
Removing an element from the normal document flow with display: none
Hiding/showing elements with visibility
Hiding/showing elements with opacity
How display, visibility, & opacity differ
Transition-property & transition-duration
Transition shorthand & the all keyword
Transitioning position coordinates
Adding easing with transition-timing-function
Custom easing with Ceaser
CSS Transforms with Transitions
Testing transforms using the DevTools
Adding a scale transform & transitioning it
Rotate & skew transforms
Using the translate transform to nudge elements
Learn about CSS gradients, RGBA, CSS calc(), multiple background images, the border-box box model, and more
Create hover animations using CSS transitions & transforms
Learn multiple ways to use and style vector graphics (SVG)
Learn advanced CSS selectors to target specific elements
Dive Deeper into CSS at a Leading NYC School
Code more complex layouts in this hands-on class led by top instructors in New York City. You’ll get our custom written CSS training workbook, as well as the option of a free retake within 6 months of the course.
Learn CSS in Web Development Level 2
“I had a pretty basic understanding of CSS before this class. I now feel like have a better understanding of how things really work. Rather than just copying and pasting code and hoping it does what I want it to, I now know why things work which will help me style more effectively and efficiently.” Courtney Huber
Custom Workbook Included
“The teachers are always knowledgeable, professional and personable. All questions are answered, all levels accommodated and the exercises are excellent. I would recommend these classes to anyone who wants a terrific learning experience.” Ellen McKinley
Part of a Certificate Program
This class is included in our web development certificate programs. Take the other courses to earn a certificate!
Highly Reviewed by Our Alumni
From our hands-on training style to world-class instructors and proprietary curriculum, we deliver a learning experience our alumni can be proud of.
The Web Development Level 2 course was more exciting than the first, showcasing further possibilities of what could be done with HTML and CSS. The instructor was extremely knowledgeable and had real-world experience; he shared many resources with the class and was a wealth of information.
I would totally recommend Noble Desktop to anyone, as it is a dedicated learning environment but the course content is interesting and the instructors are fun, as well as being knowledgable.
Jenny Green, Producing Artist/Multimedia Producer
Web Development Level 2 is an excellent class that will keep the student satiated for some time. With excellent lessons coupled with the real life experiences of the instructor it truly makes coding fun and leaves one to learn even more.
Loved the class. Learned a lot through them as well.
Lucas S. Borges
The Web Development Level 2 course helped clear up some of the quirkier parts of HTML for me. In addition, it showed me how to improve things I already knew how to do.
Jon Chaplin, Financial Sciences
You guys rule. I always recommend Noble Desktop to anyone who ever asks me for advice about taking instructional classes.
Great instructor and material! Really enjoyable classes set at a perfect pace and always up-to-the-minute relevant in terms of the latest browser peculiarities. Highly recommended!
Went to Noble first time in '11 and did not disappoint. Great instructors, tools, and reference materials to get things done.
Naoyuki (Nick) Suemura, nSpird
Frequently Asked Questions
Are there prerequisites? Do I need to come in with any prior coding knowledge?
You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).
How does attending “live online” work?
Students can attend this training remotely through screen sharing software (we use Zoom).
Participants can hear the instruction, ask questions, and even share their screen with the instructor.
For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!
Coding Websites with HTML & CSS
To create webpages and emails we use HTML code (Hypertext Markup Language).
HTML tags mark up (label) content to indicate headings, paragraphs, lists, links, images, and more.
You can get a quick start in our 3-hour Intro to HTML & CSS class, dive deeper in our 18-hour Web Development Level 1 class, or for the most thorough training earn a Certificate in Web Design.
CSS (Cascading Style Sheets) code is used to style the contents of a webpage (or email), based on the HTML markup.
CSS controls the appearance of everything, from fonts and color, to building responsive page layouts that look good across screen sizes (mobile, tablet, and desktop).
Start learning CSS in our Web Development Level 1 class. Dive deeper in our Web Development Level 2 class where we cover many important CSS concepts, such as media queries. Learn more advanced ways to optimize for mobile devices and building responsive pages in our Mobile & Responsive Web Design class. The classes can be taken individually, or as part of our Web Design Certificate program.
Responsive Web Design
Responsive webpages (and emails) adapt to any size screen: phone, tablet, desktop, etc.
Web developers use media queries in CSS to tell browsers to apply different styles for different size screens