Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

advanced-html-and-css-syllabus

The Advanced HTML & CSS course offers comprehensive training on advanced CSS topics including SVG, CSS variables, gradients, and responsive design. The course includes group classes in NYC and onsite training, covering practical skills like styling navigation bars, creating forms, and implementing CSS transitions and transforms. For more information, interested individuals can contact Noble Desktop via email or visit their website.

Uploaded by

Karunamoorthy Periasamy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

advanced-html-and-css-syllabus

The Advanced HTML & CSS course offers comprehensive training on advanced CSS topics including SVG, CSS variables, gradients, and responsive design. The course includes group classes in NYC and onsite training, covering practical skills like styling navigation bars, creating forms, and implementing CSS transitions and transforms. For more information, interested individuals can contact Noble Desktop via email or visit their website.

Uploaded by

Karunamoorthy Periasamy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Advanced HTML & CSS

Take your CSS skills to the next level with this comprehensive training course. Learn about
COURSE SYLLABUS

advanced topics such as SVG, CSS variables, gradients, shadows, positioning, transitions,
transforms, responsive images, and more to help you code professional looking webpages.

Group classes in NYC and onsite training is available for this course.
For more information, email corporate@nobledesktop.com or visit:
https://www.nobledesktop.com/classes/web-development-level2

hello@nobledesktop.com • (212) 226-4149

Course Outline

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
,

Course Syllabus | Advanced HTML & CSS 1


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

Course Syllabus | Advanced HTML & CSS 2


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

Course Syllabus | Advanced HTML & CSS 3


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

Course Syllabus | Advanced HTML & CSS 4

You might also like