We're offering 20% off September Live Online classes! See which courses are applicable.   |   Details >

  
AccountIcon BigDataIcon BlogIcon default_resource_icon CartIcon checkmark_icon cloud_devops_icon computer_network_admin_icon cyber_security_icon gsa_schedule_icon human_resources_icon location_icon phone_icon plus_icon programming_software_icon project_management_icon redhat_linux_icon search_icon sonography_icon sql_database_icon webinar_icon

Search UMBC Training Centers

Programming

HTML5 and CSS

+ View more dates & times
    
                     
  • Overview

    Mobile-enabled web applications are important for modern websites. Therefore, today’s websites require deeper technical knowledge to produce a more interactive experience. To accomplish this, we need the new features that HTML5 and CSS3 have to offer. This course will teach basic web concepts alongside modern HTML5 tools starting with the very first lecture, making it appropriate for all skill levels. Whether you want a beginner’s HTML course, a refresher for a long time HTML coder, or a class that will challenge you with the latest HTML5 and CSS3 capabilities to prepare you for Angular, React, or Vue, this course is for you.

    We will learn to create mobile web apps using Media Queries and Responsive Design, HTML semantic tags, advanced CSS3 selectors, CSS transforms (translate, scale, rotate), CSS3 animation, CSS3 transitions, CSS rule prioritization, and much more.

  • Who Should Take This Course

    Audience

    This course is suitable for: Web designers and developers who want to strengthen their HTML5 and CSS3 skills, often in preparation for modern frameworks like React, Angular, and Vue.

    PREREQUISITES

    None

  • Schedule
  • Course Outline

    How This All Actually Works

    • Architecture of the web
    • How the W3C works
    • How to exploit modern browser capabilities

    Debugging Tools

    • Available tools
    • Node inspector
    • On-the-fly HTML/CSS changes
    • Inspecting HTTP packets
    • Emulating phones and tablets

    Page Setup

    • The proper structure of HTML
    • The most critical elements
    • SMS, phone calls and emails from pages

    Effective CSS Styling

    • Fundamental separation of concerns
    • Best practices on placing styles
    • Basic selectors
    • Selector specificity
    • !important and why not to use it
    • CSS resets

    Semantic Grouping

    • Why use them?
    • Section, article, nav, aside
    • Header, footer, main
    • Details, summary
    • Figure, caption

    Positioning with CSS

    • Position: absolute vs relative vs fixed vs static
    • The box model
    • Overflow
    • The art of centering

    How to Layout Pages with CSS3

    • Why tables are a fail
    • Floating divs
    • Display: inline-block
    • Flexbox layouts
    • Grid layouts

    Deep dive into Flexbox

    • How flex works
    • The two ways to think about flex
    • Wrapping flexbox
    • No-wrap flexbox

    Deep dive into Grid

    • How grid works
    • Lines, tracks, cells, and areas
    • Defining the grid
    • Placing elements in the grid

    Progressive Web Apps and Responsive Design

    • Mobile app development
    • PWAs defined
    • Responsive and Adaptive
    • Creating media queries
    • Offline caching of pages (time permitting)

    Modern CSS Formatting

    • Reinforcing structure vs style
    • Styling text
    • DataURIs for speed
    • Border effects

    Advanced CSS Selectors

    • Basic selectors reminder
    • Compound selectors
    • Relationship selectors
    • Attribute selectors
    • Pseudo-classes
    • :nth-child()
    • :not()
    • Pseudo-elements

    CSS Transforms and Transitions

    • Why use them?
    • Scaling
    • Translation
    • Rotation
    • Skewing
    • CSS animations and transitions
    • Advanced transitions

    Deep Dive into Tables

    • The legal structure of tables
    • Spanning
    • Styling techniques

    Best Practices with Forms

    • A complete form tag
    • The most useful inputs
    • Selects
    • Configuring the soft keyboard
    • How to write declarative data validations
  • FAQs
    Is there a discount available for current students?

    UMBC students and alumni, as well as students who have previously taken a public training course with UMBC Training Centers are eligible for a 10% discount, capped at $250. Please provide a copy of your UMBC student ID or an unofficial transcript or the name of the UMBC Training Centers course you have completed. Online courses are excluded from this offer.

    What is the cancellation and refund policy?

    Student will receive a refund of paid registration fees only if UMBC Training Centers receives a notice of cancellation at least 10 business days prior to the class start date for classes or the exam date for exams.

Contact Us