Programming
HTML5 and CSS
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.
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
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
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. Asynchronous 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.