Web Development Level 2
Hands-on Training from Experts
NYC or Live Online
In this hands-on class, you’ll expand your knowledge of what CSS can do, enabling you to create well-designed 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.
This course has a prerequisite
Students should have HTML and CSS coding experience equivalent to our Web Development with HTML & CSS class.
Highly Reviewed by Our Alumni
From our hands-on training style to world-class instructors and custom-crafted curriculum, we deliver results our alumni are proud of.
Learn the Skills Guarantee™
Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.
Hands-on training in small groups
Work on projects proven to boost retention
Time-tested curriculum and supporting materials
Refined over many cohorts for an optimal learning experience
I didn't expect to learn much in a 4 session Python course, but Art's teaching style was very fitting for me. As the Chinese proverb states: Tell me, I'll forget. Show me, I'll remember. Involve me, I'll understand.
—James C.
Learn from industry experts with teaching experience
Experienced educators who are driven to help you succeed
Retake the course for free within one year
Refresh the materials and gain additional practice
Interactive Training
Learn in Real-Time with Small Class Sizes
Attend this course in-person in NYC or Live Online via Zoom. Engage with expert instructors, ask questions, and get feedback on your exercises and projects.
Unlike other providers, these are not mass open-enrollment classes. At Practical Programming, you’ll learn in small groups (typically 8-15 students) and receive personalized attention.
On Campus in NYC 185 Madison Ave, NYC
Get face-to-face interaction with an instructor and other students when you learn at our NYC campus. Courses are hands-on with a computer and software provided.
- Live, interactive class
- Experienced instructor in the room with you
- Computer and software provided
Live Online Remote, from anywhere
Get the same interactivity and access to the instructor as in-person students. There are no extra fees and we’ll work with you to ensure your remote setup is perfect.
- Live, interactive class
- Experienced instructor teaching over Zoom
- Remote setup assistance provided
Earn a Certificate of Completion
Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!
Shareable on
Free Retake & Class Recordings
Missed a session or need a refresher? We have you covered!
Free Retake
We offer a single free retake of the class within a year.
Class Recordings
You can also access recordings of each session in your student portal within one business day of the session’s end. Recordings are available for one month after the session.
Web Development Level 2 Curriculum
What You’ll Learn at a Glance
- Master important CSS concepts such as positioning, advanced CSS selectors, relative type sizing (px, em, rem), calc() and much more
- Learn sophisticated styling with multiple background images, transparent color using RGBA, CSS gradients, shadows, and more
- Learn multiple ways to use and style SVG in webpages
- Code responsive images using img srcset and the picture element
- Learn CSS variables for cleaner and more flexible code
- Create mobile optimized off-screen navigation menus using only CSS
- Create animated effects using CSS transitions & transforms
Project Examples
Learn practical skills by working on real projects with instructor guidance and lectures to strengthen and improve your skill.
Course Syllabus
Section 1
Normalize.css, Default Box Model, & More
- Using normalize.css
- Grouping CSS selectors using a comma separator
- Fluid, hi-res images
- Constraining the width of content
- 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
- Unitless line-height
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
- Sizing SVG
- Web Servers: Configuring a .htaccess file for SVG & gzip
Section 2
Embedding SVG
- Embedding SVG (instead of linking)
- Styling SVG using CSS
- Using currentColor
SVG Sprites
- Defining the SVG sprite
- Using a sprite
- Styling sprites
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
- RGBA color
Section 3
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
Section 4
Relational Selectors
- Adjacent selectors
- Using first-child & last-child
- Using first-of-type
- Using nth-child
- Direct child/descendant selectors
Pseudo-Elements & the Content Property
- Using pseudo-elements
- The content property
- Seeing pseudo-elements in Chrome’s DevTools
Attribute Selectors
- 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
- Em units
- Rem units
Section 5
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
Responsive Images
- Img srcset
- The picture element
Off-Screen Side Nav Using Only CSS
- Responsive off-screen navigation
- Toggling the navigation with a checkbox
- CSS transitions
Section 6
Box-Shadow, Text-Shadow, & Z-Index
- Using the CSS box-shadow property
- Changing an element’s default stack order with position and z-index
- Inset shadows
- 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
CSS Transitions
- 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
- Transform origin
- Rotate & skew transforms
- Using the translate transform to nudge elements
Frequently Asked Questions
Does this course require any prior knowledge or experience?
Students should have HTML and CSS coding experience equivalent to our Web Development with HTML & CSS class.
Do you offer payment plans or student financing for this course?
This course does not qualify for payments plans or student financing. See our Payment Plan FAQ to find related programs that qualify.
Can I take this course online (remote learning)?
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!
- You will need your own computer and copy of any required software. If you don’t have the software, you can usually do a free trial or purchase your own license. If you need assistance, contact us at hello@nobledesktop.com
What happens if I need to miss a session?
You have some options:
- You can watch a recording of the session. We will provide any course materials.
- If you can’t come into the classroom but can still attend remotely, we will provide you with the Zoom login information.
- You can use your free retake to make up any missed class time.
