User Interface (UI) with React Training Overview
This Implementing UI Designs with React training course teaches attendees how to create dynamic, responsive, and visually appealing interfaces with React. Participants learn how to optimize graphic formats and use stock photos, illustrations, icons, and pre-built HTML5 and React themes to accelerate UI development. Additionally, this React course provides an in-depth exploration of CSS and explores your choice of 3 leading CSS frameworks: Bootstrap, Tailwind CSS, and Material UI.
Location and Pricing
Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.
In addition, some courses are available as live, instructor-led training from one of our partners.
Objectives
- Understand the importance of UI design in React applications
- Differentiate between raster and vector graphics and their application in web design
- Understand the use cases and optimizations for JPEG, GIF, PNG, WEBP, AVIF, and SVG formats in web interfaces
- Use stock photos, illustrations, and icons effectively in UI design
- Integrate pre-built HTML5 and React themes for rapid UI development
- Master slicing tools for optimizing images for web use
- Export and manage sliced images for various screen sizes and resolutions
- Implement web elements like favicons and logos and optimize image tags for React-based UI
- Apply background images, image sizing, and responsive design techniques
- Integrate images with JavaScript for dynamic UIs
- Implement CSS resets, selectors, box model, positioning, Flexbox, and Grid in React UIs
- Develop a deep understanding of CSS’s role in modern web design
- Integrate and customize CSS frameworks like Bootstrap, Tailwind CSS, and Material UI (select one) in React projects
- Use various styling methods in React, including inline styles, CSS stylesheets, modules, CSS-in-JS (e.g., Styled Components), and Sass
Prerequisites
All attendees must have significant experience with modern JavaScript/TypeScript, and React.
Outline
Expand All | Collapse All
Introduction
Graphics Software
- Adobe Photoshop
- Adobe Illustrator
- Gimp
- Inkscape
Web Browsers and Graphics
- Raster vs. Vector
- Canvas & WebGL (short overview)
Graphics File Formats
- JPEG, GIF, PNG
- WEBP & AVIF
- SVG
Graphics Resources
- Stock Photos
- Stock Illustrations
- Stock Icons
- Pre-Built HTML5 Themes
- Pre-Built React Themes
Image Slicing (Photoshop or Gimp)
- Slice Tool
- Slice Select Tool
- Slice Properties
- Exporting Slices
Using Images in a Webpage
- Favicon
- Logos (Raster vs. Vector)
- Image Tag
- Background Images
- Image Sizing
- Responsive Images
- Images and JavaScript
Typography
- Fonts Style Properties
- Serif vs. Sans-Serif
- Font Families
- Third-Party Fonts
- Google Fonts
- Font Sizing (fixed vs. relative)
CSS
- CSS Reset
- CSS Selectors
- CSS Box Model
- CSS Positioning
- CSS Flexbox
- CSS Grid
CSS Frameworks
- Bootstrap
- Tailwind CSS
- Material UI
Styling React
- Inline Styles
- CSS Stylesheets
- CSS Modules
- CSS-in-JS (Styled Components)
- Sass
Conclusion
Training Materials
All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub through documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.
Software Requirements
Students will need a free, personal GitHub account to access the courseware and permission to install Node.js, Visual Studio Code, and either Adobe Photoshop or Gimp on their computers. Also, students will need permission to install NPM Packages and Visual Studio Extensions. A cloud-based environment can be provided if students cannot configure a local environment.
