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
Starting a New Website from Scratch & Emmet Shortcuts
- Creating a new HTML page with Emmet shortcuts
- Adding content & styling it
Variable Fonts (from Google Fonts) & Unitless Line-Height
- Adding custom web fonts from Google Fonts
- Using font-weight
- Unitless line-height
Styling the Navbar
- Styling the Navbar
- Hover & Focus Link Styles
CSS Box Model: Content-Box vs. Border-Box
- How border-box is different than content-box
- Visualizing the box model in Chrome’s DevTools
- Fixing spacing issues around images
- Flexible padding: using percentage amounts
Section 2
SVG Sizing (Width & Height) and Embedding SVG
- How Width & Height Affect Sizing of SVG
- Embedding SVG (instead of linking)
- Styling SVG using CSS ,
- Using currentColor
CSS Position Property
- Static position & the normal document flow
- Relative position
- Absolute position
- The dynamic duo: relative parent, absolute child
- Fixed position
Fixed Position Navbar, RGBA, & Backdrop Filters
- Creating a fixed navbar on wide & tall screens
- RGBA color
- Blurring & desaturating a background with CSS backdrop filters
Improvements for Mobile Devices
- Preventing mobile text size adjustment
- Preventing a fixed navbar on short screens
- Dealing with the iPhone’s dynamic island (or notch)
- CSS calc()
Section 3
Background Gradients & Text Gradients
- CSS background gradients
- CSS text gradients
Multiple Backgrounds, Viewport Sizing (vw), & Clamp
- Multiple backgrounds on a single element
- Colorizing a photo by overlaying a transparent gradient
- Using viewport sizing units (vw)
- Using Clamp to set a min & max font size
Creating Columns with Flexbox
- Displaying content as columns using Flexbox
- Vertical alignment with Flexbox
Pseudo-Elements & the Content Property
- Using pseudo-elements
- The content property
- Seeing pseudo-elements in Chrome’s DevTools
Section 4
Attribute Selectors
- Adding link icons with attribute selectors
- “Ends with” attribute selector
- “Begins with” attribute selector
- “Contains” attribute selector
Relational Selectors
- Using first-child & last-child
- Using first-of-type
- Using nth-child
- Direct child/descendant selectors
CSS Variables (Custom Properties)
- Defining & using CSS variables
- The power of inheritance
Light & Dark Modes using CSS
- Styling webpages for light & dark modes
- Previewing light & dark modes in Chrome DevTools
- “Alt” text for embedded SVGS
Section 5
Creating Forms with HTML
- Creating a form & text inputs with labels
- Adding an email input, submit button, textarea, & select menu
- Fieldset, legend, & radio buttons
- Checkbox vs radio button
Styling Forms (with Attribute Selectors)
- Styling form elements
- Targeting inputs with attribute selectors
Relative Sizes: Em and Rem
- Em units
- Rem units
Section 6
Off-Screen Side Nav Using Only CSS
- Responsive off-screen navigation
- Toggling the navigation with a checkbox
- CSS transitions
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
CSS Transitions
- Using CSS transitions to animate elements on hover
- Adding easing
- Custom easing with Ceaser
CSS Transforms with Transitions
- Testing transforms using the DevTools
- Adding a scale transform & transitioning it
- Transform origin
- Adding a rotate transform
- 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.
