1× knowledge

Website Designing / Subject

Intermediate

Build intermediate website-design skills with UI components, UX foundations, information architecture, wireframes, prototypes, Figma, image assets, effects and animation.

Your Progress

Learning Summary

0 of 112 topics completed
Quizzes Completed 0Best Quiz Score —Current Level Not startedContinue Choose a topic

Suggested sequence

Learning roadmap

Topics follow the Admin display order

Intermediate

112 topics
  1. User Interface Design
  2. UI Design Principles
  3. Design Systems
  4. UI Components
  5. Buttons
  6. Input Fields
  7. Dropdowns
  8. Checkboxes
  9. Radio Buttons
  10. Toggles
  11. Tabs
  12. Accordions
  13. Breadcrumbs
  14. Pagination
  15. Modals
  16. Tooltips
  17. Alerts
  18. Notifications
  19. Cards
  20. Data Tables
  21. Search Interfaces
  22. Navigation Bars
  23. Side Navigation
  24. Mobile Navigation
  25. Hamburger Menus
  26. User Experience Fundamentals
  27. User-Centered Design
  28. User Research
  29. User Personas
  30. User Needs
  31. User Goals
  32. User Stories
  33. User Journeys
  34. Customer Journey Maps
  35. User Flows
  36. Task Flows
  37. Information Architecture
  38. Sitemap Design
  39. Navigation Architecture
  40. Content Hierarchy
  41. Interaction Design
  42. Usability
  43. Learnability
  44. Discoverability
  45. Affordances
  46. Feedback
  47. Error Prevention
  48. Wireframe Fundamentals
  49. Low-Fidelity Wireframes
  50. Mid-Fidelity Wireframes
  51. High-Fidelity Wireframes
  52. Paper Wireframes
  53. Digital Wireframes
  54. Website Wireframes
  55. Mobile Wireframes
  56. Wireframe Components
  57. Wireframe Annotation
  58. Prototyping Fundamentals
  59. Low-Fidelity Prototypes
  60. High-Fidelity Prototypes
  61. Interactive Prototypes
  62. Clickable Prototypes
  63. Navigation Prototypes
  64. Microinteraction Prototypes
  65. Prototype Testing
  66. Figma
  67. Figma Frames
  68. Figma Components
  69. Figma Variants
  70. Figma Auto Layout
  71. Figma Constraints
  72. Figma Styles
  73. Figma Variables
  74. Figma Prototyping
  75. Adobe Photoshop
  76. Image Editing
  77. Image Optimization
  78. Adobe Illustrator
  79. Vector Graphics
  80. SVG Design
  81. Canva
  82. Browser Developer Tools
  83. Raster Graphics
  84. Vector Graphics
  85. JPEG
  86. PNG
  87. GIF
  88. WebP
  89. AVIF
  90. SVG
  91. Icons
  92. Icon Systems
  93. Favicons
  94. Image Compression
  95. Image Optimization
  96. Responsive Images
  97. Background Images
  98. CSS Gradients
  99. Border Radius
  100. Box Shadow
  101. Text Shadow
  102. Opacity
  103. Gradients
  104. CSS Filters
  105. CSS Transforms
  106. CSS Transitions
  107. CSS Animations
  108. Keyframe Animations
  109. Hover Effects
  110. Focus Effects
  111. CSS Custom Properties
  112. CSS Variables

Topics

112 published topics

  1. 81 CanvaLearn Canva through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  2. 82 Browser Developer ToolsLearn Browser Developer Tools through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  3. 83 Raster GraphicsLearn Raster Graphics through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  4. 84 Vector GraphicsLearn Web Vector Graphics through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  5. 85 JPEGLearn JPEG through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  6. 86 PNGLearn PNG through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  7. 87 GIFLearn GIF through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  8. 88 WebPLearn WebP through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  9. 89 AVIFLearn AVIF through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  10. 90 SVGLearn SVG through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  11. 91 IconsLearn Icons through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  12. 92 Icon SystemsLearn Icon Systems through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  13. 93 FaviconsLearn Favicons through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  14. 94 Image CompressionLearn Image Compression through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  15. 95 Image OptimizationLearn Web Image Optimization through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  16. 96 Responsive ImagesLearn Responsive Images through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  17. 97 Background ImagesLearn Background Images through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  18. 98 CSS GradientsLearn CSS Gradients through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  19. 99 Border RadiusLearn Border Radius through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning
  20. 100 Box ShadowLearn Box Shadow through a detailed website-design lesson with examples, exercises and practice questions.Intermediate · 16 min read · 120 min learning