{"id":32692,"date":"2026-03-23T13:08:39","date_gmt":"2026-03-23T07:38:39","guid":{"rendered":"https:\/\/www.w3webschool.com\/blog\/?p=32692"},"modified":"2026-09-21T13:11:51","modified_gmt":"2026-09-21T07:41:51","slug":"ui-ux-design-course-syllabus","status":"publish","type":"post","link":"https:\/\/www.w3webschool.com\/blog\/ui-ux-design-course-syllabus\/","title":{"rendered":"Updated UI UX Design Course Syllabus 2026 | Ultimate Guide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"32692\" class=\"elementor elementor-32692\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a7b38f0 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"a7b38f0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-702e379\" data-id=\"702e379\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4765d06 elementor-widget elementor-widget-html\" data-id=\"4765d06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .hero-course-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  \/* Page Wrapper *\/\r\n  .hero-course-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 20px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Main White Card Layout Container *\/\r\n  .hero-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);\r\n    padding: 44px 50px;\r\n  }\r\n\r\n  \/* Badge Pill Top *\/\r\n  .hero-badge-pill {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 6px 16px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .hero-badge-pill::before {\r\n    content: \"\u2022\";\r\n    margin-right: 8px;\r\n    font-size: 14px;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Title Section *\/\r\n  .hero-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 40px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  \/* Paragraphs Styling *\/\r\n  .hero-intro-p {\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n    color: #475569;\r\n    margin-bottom: 18px;\r\n  }\r\n\r\n  .hero-intro-p a {\r\n    color: #2563EB;\r\n    text-decoration: underline;\r\n    text-underline-offset: 3px;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .hero-course-wrapper strong.kw-bold {\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n  }\r\n\r\n  \/* Divider placement before metadata bar *\/\r\n  .hero-divider {\r\n    height: 1px;\r\n    background-color: #E2E8F0;\r\n    margin: 32px 0;\r\n    border: none;\r\n  }\r\n\r\n  \/* Author & Metadata Bar *\/\r\n  .hero-meta-bar {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n    gap: 20px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .author-info {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n    text-decoration: none;\r\n  }\r\n\r\n  .author-avatar {\r\n    width: 52px !important;\r\n    height: 52px !important;\r\n    min-width: 52px !important;\r\n    min-height: 52px !important;\r\n    max-width: 52px !important;\r\n    max-height: 52px !important;\r\n    border-radius: 50% !important;\r\n    object-fit: cover !important;\r\n    display: block;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .author-details {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n\r\n  .author-name {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n  }\r\n\r\n  .author-role {\r\n    font-size: 12px;\r\n    color: #64748B;\r\n    font-weight: 400;\r\n    margin-top: 2px;\r\n  }\r\n\r\n  .hero-meta-stats {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 24px;\r\n  }\r\n\r\n  .meta-stat-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    color: #64748B;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .meta-stat-item svg {\r\n    width: 16px;\r\n    height: 16px;\r\n    stroke: #64748B;\r\n    stroke-width: 2;\r\n    fill: none;\r\n  }\r\n\r\n  .hero-share-block {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .share-label {\r\n    font-size: 13px;\r\n    color: #64748B;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .share-btn-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .share-btn {\r\n    width: 34px;\r\n    height: 34px;\r\n    border-radius: 8px;\r\n    background: #F8FAFC;\r\n    border: 1px solid #E2E8F0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #475569;\r\n    text-decoration: none;\r\n    transition: all 0.2s ease;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .share-btn:hover {\r\n    background: #EFF6FF;\r\n    border-color: #2563EB;\r\n    color: #2563EB;\r\n  }\r\n\r\n  .share-btn svg {\r\n    width: 15px;\r\n    height: 15px;\r\n    fill: currentColor;\r\n  }\r\n\r\n  \/* Grid: Image on Left + Quick Highlights Box on Right *\/\r\n  .hero-media-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 320px;\r\n    gap: 24px;\r\n    align-items: stretch;\r\n  }\r\n\r\n  .hero-image-box {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    border: 1px solid #E2E8F0;\r\n  }\r\n\r\n  .hero-featured-image {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n    object-fit: cover;\r\n  }\r\n\r\n  \/* Quick Highlights Sidebar *\/\r\n  .hero-highlights-card {\r\n    background: #F8FAFC;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 16px;\r\n    padding: 24px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  .highlights-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .highlights-header svg {\r\n    width: 18px;\r\n    height: 18px;\r\n    fill: none;\r\n    stroke: #2563EB;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .highlights-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n\r\n  .highlights-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    line-height: 1.5;\r\n    color: #334155;\r\n  }\r\n\r\n  .highlights-check {\r\n    color: #2563EB;\r\n    font-weight: 800;\r\n    font-size: 14px;\r\n    line-height: 1;\r\n    margin-top: 1px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  \/* Responsive Design Rules *\/\r\n  @media (max-width: 992px) {\r\n    .hero-media-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .hero-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .hero-main-title {\r\n      font-size: 28px;\r\n    }\r\n\r\n    .hero-meta-bar {\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n    }\r\n\r\n    .hero-meta-stats {\r\n      width: 100%;\r\n      justify-content: space-between;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"hero-course-wrapper\">\r\n  <div class=\"hero-card-container\">\r\n    \r\n    <!-- Category Badge Pill -->\r\n    <section class=\"hero-badge-pill\"><strong class=\"kw-bold\">UI UX DESIGN COURSE SYLLABUS<\/strong><\/section>\r\n\r\n    <!-- Title Header -->\r\n    <h1 class=\"hero-main-title\"><strong class=\"kw-bold\">UI UX Design Course Syllabus<\/strong> (2026 Guide)<\/h1>\r\n\r\n    <!-- Intro Text Paragraphs -->\r\n    <p class=\"hero-intro-p\">Do you want to know what an updated <strong class=\"kw-bold\">UI UX design course syllabus<\/strong> covers? Thinking about whether this is right for you or answers all your queries! Don\u2019t worry. UI UX design skills are vital for anyone who wants to build top-notch digital experiences.<\/p>\r\n    \r\n    <p class=\"hero-intro-p\">With the growing digital design market, demand for UX\/UI designers has also increased. According to <a href=\"https:\/\/onehour.digital\/blog\/ui-designer-career-statistics\" rel=\"nofollow noopener\" target=\"_blank\">Onehour<\/a>, the UX roles have seen a rapid growth of 29.2% since 2019.<\/p>\r\n\r\n    <p class=\"hero-intro-p\">In this article, you will learn what companies look for when hiring a UI\/UX professional. You will also learn about what topics to cover, design tools to master, and practical workflows to build an industry-ready portfolio.<\/p>\r\n\r\n    <hr class=\"hero-divider\">\r\n\r\n    <!-- Author & Metadata Line -->\r\n    <div class=\"hero-meta-bar\">\r\n      \r\n      <a href=\"https:\/\/www.w3webschool.com\/blog\/author\/poulamidalal\/\" class=\"author-info\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/12\/Poulami-Dalal-scaled-1.webp\" class=\"author-avatar lazyload\" alt=\"Poulami Dalal\" title=\"\"><noscript><img decoding=\"async\" class=\"author-avatar\" src=\"http:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/12\/Poulami-Dalal-scaled-1.webp\" alt=\"Poulami Dalal\" title=\"\"><\/noscript>\r\n        <div class=\"author-details\">\r\n          <span class=\"author-name\">Poulami Dalal<\/span>\r\n          <span class=\"author-role\">Content Marketing Executive<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <div class=\"hero-meta-stats\">\r\n        <div class=\"meta-stat-item\">\r\n          <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n          <span>8 min read<\/span>\r\n        <\/div>\r\n        <div class=\"meta-stat-item\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><\/svg>\r\n          <span>Last Updated 2026<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hero-share-block\">\r\n        <span class=\"share-label\">Share:<\/span>\r\n        <div class=\"share-btn-group\">\r\n          <!-- X \/ Twitter -->\r\n          <a href=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.w3webschool.com%2Fblog%2Fui-ux-design-course-syllabus%2F&amp;text=UI%20UX%20Design%20Course%20Syllabus%20(2026%20Guide)\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"share-btn\" aria-label=\"X\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg>\r\n          <\/a>\r\n          <!-- LinkedIn -->\r\n          <a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwww.w3webschool.com%2Fblog%2Fui-ux-design-course-syllabus%2F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"share-btn\" aria-label=\"LinkedIn\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\"><\/path><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"><\/rect><circle cx=\"4\" cy=\"4\" r=\"2\"><\/circle><\/svg>\r\n          <\/a>\r\n          <!-- WhatsApp -->\r\n          <a href=\"https:\/\/wa.me\/?text=UI%20UX%20Design%20Course%20Syllabus%20(2026%20Guide)%20https%3A%2F%2Fwww.w3webschool.com%2Fblog%2Fui-ux-design-course-syllabus%2F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"share-btn\" aria-label=\"WhatsApp\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12.011 1.026c-6.046 0-10.963 4.917-10.963 10.963 0 1.933.504 3.821 1.462 5.485l-1.554 5.679 5.811-1.523c1.602.875 3.417 1.336 5.244 1.336 6.047 0 10.964-4.918 10.964-10.964 0-2.93-1.141-5.684-3.213-7.756a10.89 10.89 0 0 0-7.751-3.22zm6.183 15.539c-.261.734-1.289 1.341-2.124 1.517-.573.121-1.32.217-3.834-.823-3.217-1.331-5.289-4.593-5.45-4.808-.16-.215-1.309-1.741-1.309-3.322 0-1.581.828-2.359 1.122-2.68.294-.321.642-.401.856-.401.214 0 .428.001.615.011.198.01.464-.075.727.556.268.642.909 2.219.989 2.38.08.16.134.347.027.561-.107.214-.161.347-.321.535-.16.188-.337.42-.481.564-.16.16-.327.334-.141.655.187.321.832 1.373 1.787 2.223 1.229 1.095 2.264 1.435 2.585 1.595.321.16.508.134.695-.08.187-.214.802-.935 1.016-1.256.214-.321.428-.268.722-.16.294.107 1.87.882 2.191 1.043.321.16.535.241.615.375.08.134.08.774-.181 1.508z\"\/><\/svg>\r\n          <\/a>\r\n          <!-- Copy Link Button (With inline handler for instant copying) -->\r\n          <button class=\"share-btn\" onclick=\"navigator.clipboard.writeText('https:\/\/www.w3webschool.com\/blog\/ui-ux-design-course-syllabus\/'); alert('Link copied to clipboard!');\" aria-label=\"Copy Link\" type=\"button\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"><\/path><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"><\/path><\/svg>\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Image + Quick Highlights Grid -->\r\n    <div class=\"hero-media-grid\">\r\n      \r\n      <!-- Left Featured Image -->\r\n      <div class=\"hero-image-box\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/03\/UI-UX-Design-Course-Syllabus.png\" class=\"hero-featured-image lazyload\" alt=\"UI UX Design Course Syllabus\" title=\"\"><noscript><img decoding=\"async\" class=\"hero-featured-image\" src=\"http:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/03\/UI-UX-Design-Course-Syllabus.png\" alt=\"UI UX Design Course Syllabus\" title=\"\"><\/noscript>\r\n      <\/div>\r\n\r\n      <!-- Right Side Quick Highlights Box -->\r\n      <div class=\"hero-highlights-card\">\r\n        <div class=\"highlights-header\">\r\n          <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\r\n          <span>Quick Highlights<\/span>\r\n        <\/div>\r\n        <ul class=\"highlights-list\">\r\n          <li class=\"highlights-item\">\r\n            <span class=\"highlights-check\">\u2713<\/span>\r\n            <span><strong>Highlight real-world case studies<\/strong> and user flows.<\/span>\r\n          <\/li>\r\n          <li class=\"highlights-item\">\r\n            <span class=\"highlights-check\">\u2713<\/span>\r\n            <span><strong>Show mastery of Figma, Wireframing<\/strong>, and Prototyping.<\/span>\r\n          <\/li>\r\n          <li class=\"highlights-item\">\r\n            <span class=\"highlights-check\">\u2713<\/span>\r\n            <span><strong>Demonstrate user research & problem-solving<\/strong> skills.<\/span>\r\n          <\/li>\r\n          <li class=\"highlights-item\">\r\n            <span class=\"highlights-check\">\u2713<\/span>\r\n            <span><strong>Incorporate modern AI design tools<\/strong> & portfolio building.<\/span>\r\n          <\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2b2bb40 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"2b2bb40\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3b97376\" data-id=\"3b97376\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1308de7 elementor-widget elementor-widget-html\" data-id=\"1308de7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .syllabus-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .syllabus-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 20px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .syllabus-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* SEO Eyebrow Badge *\/\r\n  .syllabus-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 6px 14px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .syllabus-eyebrow-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    background-color: #2563EB;\r\n    border-radius: 50%;\r\n    display: inline-block;\r\n  }\r\n\r\n  .syllabus-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    color: #0F172A;\r\n    letter-spacing: -0.025em;\r\n    margin-bottom: 18px;\r\n    display: block;\r\n  }\r\n\r\n  .syllabus-intro-text {\r\n    font-size: 16px;\r\n    line-height: 1.7;\r\n    color: #475569;\r\n    margin-bottom: 36px;\r\n  }\r\n\r\n  \/* Modern Desktop Editorial Table *\/\r\n  .syllabus-table-wrapper {\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    border-radius: 18px;\r\n    border: 1px solid #E2E8F0;\r\n    margin-bottom: 32px;\r\n    background: #FFFFFF;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.015);\r\n  }\r\n\r\n  .syllabus-desktop-table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    text-align: left;\r\n  }\r\n\r\n  .syllabus-desktop-table th {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    color: #475569;\r\n    background-color: #F8FAFC;\r\n    padding: 18px 24px;\r\n    border-bottom: 1px solid #E2E8F0;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n  }\r\n\r\n  .syllabus-desktop-table td {\r\n    font-size: 15px;\r\n    color: #1E293B;\r\n    padding: 20px 24px;\r\n    border-bottom: 1px solid #F1F5F9;\r\n    line-height: 1.5;\r\n    transition: background-color 0.2s ease;\r\n  }\r\n\r\n  .syllabus-desktop-table tr:last-child td {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .syllabus-desktop-table tr:hover td {\r\n    background-color: #F8FAFC;\r\n  }\r\n\r\n  .syllabus-module-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 800;\r\n    font-size: 13px;\r\n    color: #2563EB;\r\n    background-color: #EFF6FF;\r\n    padding: 6px 12px;\r\n    border-radius: 8px;\r\n    display: inline-block;\r\n    border: 1px solid rgba(37, 99, 235, 0.12);\r\n  }\r\n\r\n  .syllabus-topic-text {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    font-size: 16px;\r\n  }\r\n\r\n  \/* Modern Mobile Cards Layout *\/\r\n  .syllabus-mobile-cards {\r\n    display: none;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .syllabus-mobile-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 16px;\r\n    padding: 18px 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\r\n  }\r\n\r\n  .syllabus-mobile-topic {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    line-height: 1.4;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .syllabus-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 18px;\r\n    padding: 24px;\r\n    display: flex;\r\n    gap: 18px;\r\n    align-items: flex-start;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .syllabus-tip-icon-box {\r\n    width: 42px;\r\n    height: 42px;\r\n    min-width: 42px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .syllabus-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .syllabus-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .syllabus-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  .syllabus-note-text {\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    color: #1E293B;\r\n  }\r\n\r\n  \/* Full-width Pill CTA Button (Exact Screenshot Style) *\/\r\n  .syllabus-cta-wrapper {\r\n    width: 100%;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .syllabus-cta-button {\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    gap: 12px !important;\r\n    width: 100% !important;\r\n    background-color: #2563EB !important;\r\n    color: #FFFFFF !important;\r\n    font-family: 'Manrope', sans-serif !important;\r\n    font-size: 20px !important;\r\n    font-weight: 700 !important;\r\n    padding: 22px 30px !important;\r\n    border-radius: 9999px !important;\r\n    text-decoration: none !important;\r\n    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;\r\n    transition: all 0.2s ease !important;\r\n    text-align: center !important;\r\n  }\r\n\r\n  .syllabus-cta-button span {\r\n    color: #FFFFFF !important;\r\n    display: inline-block !important;\r\n    line-height: 1 !important;\r\n  }\r\n\r\n  .syllabus-cta-button:hover {\r\n    background-color: #1D4ED8 !important;\r\n    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;\r\n  }\r\n\r\n  .syllabus-cta-button svg {\r\n    width: 22px !important;\r\n    height: 22px !important;\r\n    stroke: #FFFFFF !important;\r\n    fill: none !important;\r\n    stroke-width: 2.8 !important;\r\n    stroke-linecap: round !important;\r\n    stroke-linejoin: round !important;\r\n    display: inline-block !important;\r\n  }\r\n\r\n  \/* Responsive Design Rules *\/\r\n  @media (max-width: 768px) {\r\n    .syllabus-section-wrapper {\r\n      padding: 30px 16px;\r\n    }\r\n\r\n    .syllabus-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .syllabus-main-title {\r\n      font-size: 26px;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .syllabus-intro-text {\r\n      font-size: 14px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .syllabus-table-wrapper {\r\n      display: none;\r\n    }\r\n\r\n    .syllabus-mobile-cards {\r\n      display: flex;\r\n    }\r\n\r\n    .syllabus-tip-card {\r\n      padding: 18px;\r\n      gap: 14px;\r\n      border-radius: 14px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .syllabus-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .syllabus-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n\r\n    .syllabus-note-text {\r\n      font-size: 13.5px;\r\n    }\r\n\r\n    .syllabus-cta-button {\r\n      font-size: 16px !important;\r\n      padding: 16px 20px !important;\r\n    }\r\n\r\n    .syllabus-cta-button svg {\r\n      width: 18px !important;\r\n      height: 18px !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"syllabus-section-wrapper\">\r\n  <div class=\"syllabus-card-container\">\r\n    \r\n    <!-- SEO Eyebrow Badge -->\r\n    <div class=\"syllabus-eyebrow\">\r\n      <span class=\"syllabus-eyebrow-dot\"><\/span>\r\n      <span>Structured Learning Path<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"syllabus-main-title\">\r\n      Complete UI UX Design Course Syllabus\r\n    <\/section>\r\n\r\n    <!-- Top Intro Paragraph -->\r\n    <p class=\"syllabus-intro-text\">\r\n      The Complete UI UX design course syllabus covers basics to advanced modules such as design foundation, user research & analysis, wireframing, prototyping, UI design, UX writing, mobile design, and more; which will be discussed below.\r\n    <\/p>\r\n\r\n    <!-- Desktop Editorial Table -->\r\n    <div class=\"syllabus-table-wrapper\">\r\n      <table class=\"syllabus-desktop-table\">\r\n        <thead>\r\n          <tr>\r\n            <th style=\"width: 25%;\">Modules<\/th>\r\n            <th style=\"width: 75%;\">Topics<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 1<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">Design Foundation<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 2<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">User Research and Analysis<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 3<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">Wireframing<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 4<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">UI Design<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 5<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">Prototyping<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 6<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">UX Writing<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 7<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">Mobile and Web Design Best Practices<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 8<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">Portfolio and Behance Setup<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 9<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">Final Project and Review<\/span><\/td>\r\n          <\/tr>\r\n          <tr>\r\n            <td><span class=\"syllabus-module-badge\">Module 10<\/span><\/td>\r\n            <td><span class=\"syllabus-topic-text\">Interview Preparation<\/span><\/td>\r\n          <\/tr>\r\n        <\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <!-- Mobile Stacked Cards Layout -->\r\n    <div class=\"syllabus-mobile-cards\">\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 1<\/span>\r\n        <div class=\"syllabus-mobile-topic\">Design Foundation<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 2<\/span>\r\n        <div class=\"syllabus-mobile-topic\">User Research and Analysis<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 3<\/span>\r\n        <div class=\"syllabus-mobile-topic\">Wireframing<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 4<\/span>\r\n        <div class=\"syllabus-mobile-topic\">UI Design<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 5<\/span>\r\n        <div class=\"syllabus-mobile-topic\">Prototyping<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 6<\/span>\r\n        <div class=\"syllabus-mobile-topic\">UX Writing<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 7<\/span>\r\n        <div class=\"syllabus-mobile-topic\">Mobile and Web Design Best Practices<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 8<\/span>\r\n        <div class=\"syllabus-mobile-topic\">Portfolio and Behance Setup<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 9<\/span>\r\n        <div class=\"syllabus-mobile-topic\">Final Project and Review<\/div>\r\n      <\/div>\r\n      <div class=\"syllabus-mobile-card\">\r\n        <span class=\"syllabus-module-badge\">Module 10<\/span>\r\n        <div class=\"syllabus-mobile-topic\">Interview Preparation<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"syllabus-tip-card\">\r\n      <div class=\"syllabus-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"syllabus-tip-content\">\r\n        <span class=\"syllabus-tip-label\">Expert Tip<\/span>\r\n        <p class=\"syllabus-note-text\">\r\n          The Complete UI UX design course syllabus covers basics to advanced modules such as design foundation, user research & analysis, wireframing, prototyping, UI design, UX writing, mobile design, and more; which will be discussed below.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Exact Pill CTA Button matching Screenshot -->\r\n    <div class=\"syllabus-cta-wrapper\">\r\n      <a href=\"https:\/\/www.w3webschool.com\/ui-ux-design-course-in-kolkata\/\" class=\"syllabus-cta-button\" target=\"_blank\" rel=\"noopener\">\r\n        <span>Explore UI UX Course<\/span>\r\n        <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-79cd77a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"79cd77a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5774c7a\" data-id=\"5774c7a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e6b4cb1 elementor-widget elementor-widget-html\" data-id=\"e6b4cb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .qs-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .qs-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 20px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .qs-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Badge & Title *\/\r\n  .qs-badge-pill {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 6px 14px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .qs-badge-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    background-color: #2563EB;\r\n    border-radius: 50%;\r\n    display: inline-block;\r\n  }\r\n\r\n  .qs-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    color: #0F172A;\r\n    letter-spacing: -0.025em;\r\n    margin-bottom: 16px;\r\n    display: block;\r\n  }\r\n\r\n  .qs-intro-text {\r\n    font-size: 16px;\r\n    line-height: 1.7;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Top Stats Bar *\/\r\n  .qs-stats-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .qs-stat-card {\r\n    background: #F8FAFC;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 16px;\r\n    padding: 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .qs-stat-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #64748B;\r\n  }\r\n\r\n  .qs-stat-value {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  \/* Key Highlights Glass Card Layout *\/\r\n  .qs-highlights-glass-card {\r\n    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 18px;\r\n    padding: 32px;\r\n    margin-bottom: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.015);\r\n  }\r\n\r\n  .qs-subtitle {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    margin-bottom: 24px;\r\n    display: block;\r\n    letter-spacing: -0.01em;\r\n  }\r\n\r\n  .qs-highlights-list {\r\n    list-style: none;\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 16px 24px;\r\n  }\r\n\r\n  .qs-highlight-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 12px;\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    color: #334155;\r\n  }\r\n\r\n  .qs-check-icon {\r\n    width: 22px;\r\n    height: 22px;\r\n    min-width: 22px;\r\n    background: #EFF6FF;\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-weight: 800;\r\n    font-size: 12px;\r\n    margin-top: 2px;\r\n  }\r\n\r\n  \/* Expert Note Card *\/\r\n  .qs-expert-note-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 18px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .qs-expert-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);\r\n  }\r\n\r\n  .qs-expert-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .qs-expert-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .qs-expert-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  .qs-expert-text {\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    color: #1E293B;\r\n  }\r\n\r\n  \/* Responsive Design Rules *\/\r\n  @media (max-width: 868px) {\r\n    .qs-stats-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 12px;\r\n    }\r\n\r\n    .qs-highlights-list {\r\n      grid-template-columns: 1fr;\r\n      gap: 16px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .qs-section-wrapper {\r\n      padding: 30px 16px;\r\n    }\r\n\r\n    .qs-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .qs-main-title {\r\n      font-size: 26px;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .qs-intro-text {\r\n      font-size: 14px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .qs-highlights-glass-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .qs-subtitle {\r\n      font-size: 18px;\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    .qs-expert-note-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 14px;\r\n    }\r\n\r\n    .qs-expert-icon-box {\r\n      width: 38px;\r\n      height: 38px;\r\n      min-width: 38px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .qs-expert-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n\r\n    .qs-expert-text {\r\n      font-size: 13.5px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"qs-section-wrapper\">\r\n  <div class=\"qs-card-container\">\r\n    \r\n    <!-- SEO Eyebrow Badge -->\r\n    <div class=\"qs-badge-pill\">\r\n      <span class=\"qs-badge-dot\"><\/span>\r\n      <span>Executive Overview<\/span>\r\n    <\/div>\r\n\r\n    <!-- Section Title Replacement -->\r\n    <section class=\"qs-main-title\">\r\n      Quick Summary\r\n    <\/section>\r\n\r\n    <!-- Intro Text -->\r\n    <p class=\"qs-intro-text\">\r\n      Planning to start a career in UI\/UX Design? This guide explains the complete UI UX Design Course Syllabus (2026) in a simple and structured way. You'll learn what topics are covered, which tools you'll use, what projects you'll build, and the skills needed to become a job-ready UI\/UX designer.\r\n    <\/p>\r\n\r\n    <!-- Top Metadata Stats Bar -->\r\n    <div class=\"qs-stats-grid\">\r\n      <div class=\"qs-stat-card\">\r\n        <span class=\"qs-stat-label\">Best For<\/span>\r\n        <div class=\"qs-stat-value\">Students, fresh graduates, career changers, freelancers, and anyone planning to learn UI\/UX Design.<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"qs-stat-card\">\r\n        <span class=\"qs-stat-label\">Reading Time<\/span>\r\n        <div class=\"qs-stat-value\">10\u201312 Minutes<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"qs-stat-card\">\r\n        <span class=\"qs-stat-label\">Level<\/span>\r\n        <div class=\"qs-stat-value\">Beginner to Advanced<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Highlights Editorial Glass Card -->\r\n    <div class=\"qs-highlights-glass-card\">\r\n      <section class=\"qs-subtitle\">Key Syllabus Highlights<\/section>\r\n      \r\n      <ul class=\"qs-highlights-list\">\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Complete UI\/UX learning roadmap<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>UX research & design thinking<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Wireframing and user flows<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>UI design with Figma<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Interactive prototyping<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Design systems & components<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Usability testing basics<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Real-world portfolio projects<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Industry tools & best practices<\/span>\r\n        <\/li>\r\n        <li class=\"qs-highlight-item\">\r\n          <span class=\"qs-check-icon\">\u2713<\/span>\r\n          <span>Career and job opportunities<\/span>\r\n        <\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Note Card -->\r\n    <div class=\"qs-expert-note-card\">\r\n      <div class=\"qs-expert-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"qs-expert-content\">\r\n        <span class=\"qs-expert-label\">Expert Tip<\/span>\r\n        <p class=\"qs-expert-text\">\r\n          Focus on real projects and a strong portfolio, not just learning design tools. Employers hire designers who can solve real user problems.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-aaece9f elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"aaece9f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d7148fd\" data-id=\"d7148fd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2f3af62 elementor-widget elementor-widget-html\" data-id=\"2f3af62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .module-intro-paragraph:last-of-type {\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 1<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 1: Design Foundation\r\n    <\/section>\r\n\r\n    <!-- Short Introductions -->\r\n    <p class=\"module-intro-paragraph\">\r\n      In Module 1, the UI UX Design course explores the design fundamentals, analysing why it is valuable for digital growth. A clear idea of design basics helps students understand the principles that create digital user interfaces.\r\n    <\/p>\r\n    <p class=\"module-intro-paragraph\">\r\n      Here you can master the visual hierarchy and core design elements. These help you build a clear idea of how a website\u2019s structure, balance, and visual hierarchy boost user perception and user experience.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Understanding the concept of UI and UI<\/li>\r\n        <li>Design thinning process<\/li>\r\n        <li>Current trends in UI\/UX<\/li>\r\n        <li>Tools Overview<\/li>\r\n        <li>Color typography, and layout basics<\/li>\r\n        <li>Visual hierarchy<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          In Module 1, the UI UX Design course explores the design fundamentals, analysing why it is valuable for digital growth. A clear idea of design basics helps students understand the principles that create digital user interfaces.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-01adaff elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"01adaff\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-52a486a\" data-id=\"52a486a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4a02681 elementor-widget elementor-widget-html\" data-id=\"4a02681\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 2<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 2: User Research and Analysis\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      In the UI UX Design course, User research and analysis are conducted to understand users clearly before making designs for them. Here you can learn how to collect insights, analyse user behaviour, and find out user needs to build meaningful and user-focused product experiences.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Understanding users<\/li>\r\n        <li>Learn user interviews, surveys, and observation techniques<\/li>\r\n        <li>User personas<\/li>\r\n        <li>Competitor analysis<\/li>\r\n        <li>User journey mapping<\/li>\r\n        <li>Empathy maps<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          In the UI UX Design course, User research and analysis are conducted to understand users clearly before making designs for them. Here you can learn how to collect insights, analyse user behaviour, and find out user needs to build meaningful and user-focused product experiences.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8000641 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"8000641\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ca60e8a\" data-id=\"ca60e8a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5887576 elementor-widget elementor-widget-html\" data-id=\"5887576\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .module-intro-paragraph:last-of-type {\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 3<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 3: Wireframing\r\n    <\/section>\r\n\r\n    <!-- Short Introductions -->\r\n    <p class=\"module-intro-paragraph\">\r\n      Module 3 covers the area of wireframing, which is a major pillar of design success in this highly competitive digital domain. Here, you can get a clear idea of how to plan layouts, content structure, and user flows before creating a visual design.\r\n    <\/p>\r\n    <p class=\"module-intro-paragraph\">\r\n      This topic covers the details on designing low and mid-fidelity wireframes and user flows.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Low-Fidelity Wireframes<\/li>\r\n        <li>Mid-Fidelity Wireframes<\/li>\r\n        <li>Information Architecture<\/li>\r\n        <li>User Flows and task flows<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          Module 3 covers the area of wireframing, which is a major pillar of design success in this highly competitive digital domain. Here, you can get a clear idea of how to plan layouts, content structure, and user flows before creating a visual design.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0f208d9 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"0f208d9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5650897\" data-id=\"5650897\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0c57092 elementor-widget elementor-widget-html\" data-id=\"0c57092\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 4<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 4: UI Design\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      Module 4 covers topics of UI Design, which helps you convert wireframes into attention-grabbing interfaces. Here, you will learn UI design principles and patterns to make appealing and highly functional digital screens for web and mobile devices.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Designing for Different Screens<\/li>\r\n        <li>Design systems<\/li>\r\n        <li>Grids, components, and design patterns<\/li>\r\n        <li>Component Libraries<\/li>\r\n        <li>Typography Hierarchy<\/li>\r\n        <li>Micro-Interactions<\/li>\r\n        <li>Responsive UI for mobile and web<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          Module 4 covers topics of UI Design, which helps you convert wireframes into attention-grabbing interfaces. Here, you will learn UI design principles and patterns to make appealing and highly functional digital screens for web and mobile devices.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e2a1435 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"e2a1435\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7e6d011\" data-id=\"7e6d011\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ec88b1e elementor-widget elementor-widget-html\" data-id=\"ec88b1e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 5<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 5: Prototyping\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      Module 5 offers a guide on prototyping, which helps learners to make interactive designs. Here, you can get a complete idea of how to stimulate user interactions, refine design flows, and test user experiences depending on practical reviews.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>High-Fidelity Prototypes<\/li>\r\n        <li>Interactive Prototyping<\/li>\r\n        <li>Design transitions and Micro-interactions,<\/li>\r\n        <li>User flow creation<\/li>\r\n        <li>Usability testing and feedback loops<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          Module 5 offers a guide on prototyping, which helps learners to make interactive designs. Here, you can get a complete idea of how to stimulate user interactions, refine design flows, and test user experiences depending on practical reviews.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0df5b24 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"0df5b24\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a568188\" data-id=\"a568188\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f0317e4 elementor-widget elementor-widget-html\" data-id=\"f0317e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 6<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 6: UX Writing\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      Module 6 discusses creating meaningful, short, and intuitive content for users and digital interfaces. Here, you can learn why clear UX writing is important, and how improving it helps you boost usability. This also helps in increasing user experience.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Tone and voice guidelines<\/li>\r\n        <li>Learn to write clear microcopy for buttons, forms, and error states<\/li>\r\n        <li>Learn to write Onboarding screens<\/li>\r\n        <li>Error messages and system communication<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          Module 6 discusses creating meaningful, short, and intuitive content for users and digital interfaces. Here, you can learn why clear UX writing is important, and how improving it helps you boost usability. This also helps in increasing user experience.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5d5584b elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"5d5584b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a0c38fc\" data-id=\"a0c38fc\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a6ec44e elementor-widget elementor-widget-html\" data-id=\"a6ec44e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 7<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 7: Mobile and Web Design Best Practices\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      Module 7 offers a brief guide on mobile and web design best practices, which are vital in designing highly interactive user interfaces. Here, you will find out the differences in designs and the must-consider factors for web and mobile platforms.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Responsive and adaptive design<\/li>\r\n        <li>Touch-target guidelines<\/li>\r\n        <li>Web accessibility standards<\/li>\r\n        <li>Learn about navigational patterns for web and mobile<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          Module 7 offers a brief guide on mobile and web design best practices, which are vital in designing highly interactive user interfaces. Here, you will find out the differences in designs and the must-consider factors for web and mobile platforms.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3bc71cd elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"3bc71cd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cbfb6cc\" data-id=\"cbfb6cc\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ce09b6d elementor-widget elementor-widget-html\" data-id=\"ce09b6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 8<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 8: Portfolio and Behance Setup\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      The major aspect of the UI UX course syllabus is portfolio and Behance setup. This module focuses on building a professional portfolio to attract employers. Here, you can also get complete guidance on how to present your design works professionally.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Case Studies<\/li>\r\n        <li>Structure Behance\/portfolio<\/li>\r\n        <li>Presentation Techniques<\/li>\r\n        <li>Design Challenges<\/li>\r\n        <li>Career Guidance<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          The major aspect of the UI UX course syllabus is portfolio and Behance setup. This module focuses on building a professional portfolio to attract employers. Here, you can also get complete guidance on how to present your design works professionally.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cd69817 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"cd69817\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a41eff2\" data-id=\"a41eff2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-628d6a5 elementor-widget elementor-widget-html\" data-id=\"628d6a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 9<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 9: Final Project and Review\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      This module helps you to use all the design skills that you have learned throughout the program. Here, you can create compelling UI UX projects, present professionally, and get industry-specific feedback.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>Topics Covered<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">The topics included in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>Prepare a UI UX project with the trainer\u2019s help<\/li>\r\n        <li>Feedback rounds<\/li>\r\n        <li>Final project presentation<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          This module helps you to use all the design skills that you have learned throughout the program. Here, you can create compelling UI UX projects, present professionally, and get industry-specific feedback.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9e09649 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"9e09649\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c2648c0\" data-id=\"c2648c0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-51fc288 elementor-widget elementor-widget-html\" data-id=\"51fc288\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .module-section-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .module-section-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    background-color: #F8FAFC;\r\n    padding: 40px 20px;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .module-card-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);\r\n    padding: 50px;\r\n  }\r\n\r\n  \/* Header Structure *\/\r\n  .module-header-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .module-number-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n  }\r\n\r\n  .module-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 38px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  .module-intro-paragraph {\r\n    font-size: 16px;\r\n    line-height: 1.75;\r\n    color: #475569;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  \/* Topics Card *\/\r\n  .module-editorial-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .module-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    letter-spacing: -0.01em;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-card-title-icon {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EFF6FF;\r\n    border-radius: 8px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #2563EB;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .module-card-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: #475569;\r\n  }\r\n\r\n  .module-topics-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .module-topics-list li {\r\n    font-size: 15px;\r\n    color: #334155;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    padding-left: 24px;\r\n  }\r\n\r\n  .module-topics-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Expert Tip Card *\/\r\n  .module-tip-card {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.2);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .module-tip-icon-box {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: #2563EB;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  .module-tip-icon-box svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n  }\r\n\r\n  .module-tip-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .module-tip-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Rules *\/\r\n  @media (max-width: 768px) {\r\n    .module-section-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .module-card-container {\r\n      padding: 28px 20px;\r\n      border-radius: 20px;\r\n    }\r\n\r\n    .module-main-title {\r\n      font-size: 26px;\r\n    }\r\n\r\n    .module-intro-paragraph {\r\n      font-size: 14.5px;\r\n    }\r\n\r\n    .module-editorial-card {\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-card {\r\n      padding: 20px;\r\n      gap: 14px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .module-tip-icon-box {\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .module-tip-icon-box svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"module-section-wrapper\">\r\n  <div class=\"module-card-container\">\r\n    \r\n    <!-- Module Header Meta -->\r\n    <div class=\"module-header-meta\">\r\n      <span class=\"module-number-badge\">Module 10<\/span>\r\n    <\/div>\r\n\r\n    <!-- Title Section -->\r\n    <section class=\"module-main-title\">\r\n      Module 10: Interview Preparation\r\n    <\/section>\r\n\r\n    <!-- Short Introduction -->\r\n    <p class=\"module-intro-paragraph\">\r\n      Here, you are offered training on resume building, mock interview sessions, and a Q&A round on topics mentioned above.\r\n    <\/p>\r\n\r\n    <!-- Topics Covered Card -->\r\n    <div class=\"module-editorial-card\">\r\n      <section class=\"module-card-title\">\r\n        <span class=\"module-card-title-icon\">\ud83d\udcda<\/span>\r\n        <span>What You Will Find Out<\/span>\r\n      <\/section>\r\n      <p class=\"module-card-text\">Key offerings in this module:<\/p>\r\n      <ul class=\"module-topics-list\">\r\n        <li>A complete list of popular interview questions<\/li>\r\n        <li>Industry-led updated knowledge<\/li>\r\n        <li>Hands-on training on live client projects<\/li>\r\n        <li>Strong communication and presentation skills<\/li>\r\n        <li>Internships<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Bottom Expert Tip Card -->\r\n    <div class=\"module-tip-card\">\r\n      <div class=\"module-tip-icon-box\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"><\/path><\/svg>\r\n      <\/div>\r\n      <div class=\"module-tip-content\">\r\n        <span class=\"module-tip-label\">Expert Tip<\/span>\r\n        <p class=\"module-card-text\">\r\n          Here, you are offered training on resume building, mock interview sessions, and a Q&A round on topics mentioned above to make you career-ready.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-30d0771 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"30d0771\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-300c660\" data-id=\"300c660\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-91127c5 elementor-widget elementor-widget-html\" data-id=\"91127c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .blog-roadmap-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .blog-roadmap-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 24px 20px; \/* Base padding updated for proper margins *\/\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Compact Editorial Header *\/\r\n  .blog-roadmap-header {\r\n    border-bottom: 2px solid #E2E8F0;\r\n    padding-bottom: 12px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .blog-roadmap-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    display: block;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .blog-roadmap-subtitle {\r\n    font-size: 14.5px;\r\n    color: #64748B;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  \/* Compact Timeline List *\/\r\n  .blog-roadmap-timeline {\r\n    position: relative;\r\n    padding-left: 20px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  \/* Continuous Left Line *\/\r\n  .blog-roadmap-timeline::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 6px;\r\n    bottom: 6px;\r\n    left: 5px;\r\n    width: 2px;\r\n    background: #CBD5E1;\r\n  }\r\n\r\n  .blog-roadmap-step {\r\n    position: relative;\r\n    padding-left: 18px;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .blog-roadmap-step:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  \/* Compact Node Dot *\/\r\n  .blog-roadmap-node {\r\n    position: absolute;\r\n    left: -19px;\r\n    top: 5px;\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 50%;\r\n    background: #FFFFFF;\r\n    border: 2px solid #2563EB;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* Editorial Compact Box *\/\r\n  .blog-roadmap-card {\r\n    background: #F8FAFC;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 8px;\r\n    padding: 12px 16px;\r\n    width: 100%;\r\n  }\r\n\r\n  .blog-roadmap-card-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 4px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .blog-roadmap-step-num {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 2px 6px;\r\n    border-radius: 4px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .blog-roadmap-step-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    display: inline;\r\n  }\r\n\r\n  .blog-roadmap-desc {\r\n    font-size: 13.5px;\r\n    line-height: 1.5;\r\n    color: #475569;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .blog-roadmap-meta-inline {\r\n    font-size: 12.5px;\r\n    line-height: 1.4;\r\n    color: #64748B;\r\n    border-top: 1px dashed #E2E8F0;\r\n    padding-top: 6px;\r\n  }\r\n\r\n  .blog-roadmap-meta-inline span {\r\n    color: #1E293B;\r\n    font-weight: 600;\r\n  }\r\n\r\n  \/* Editorial Note Box *\/\r\n  .blog-roadmap-note {\r\n    background: #EFF6FF;\r\n    border-left: 3px solid #2563EB;\r\n    border-radius: 0 6px 6px 0;\r\n    padding: 12px 16px;\r\n  }\r\n\r\n  .blog-roadmap-note-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    color: #1E40AF;\r\n    letter-spacing: 0.03em;\r\n    display: block;\r\n    margin-bottom: 2px;\r\n  }\r\n\r\n  .blog-roadmap-note-text {\r\n    font-size: 13.5px;\r\n    line-height: 1.5;\r\n    color: #1E3A8A;\r\n  }\r\n\r\n  \/* Responsive Adjustments for Mobile Screen Fit *\/\r\n  @media (max-width: 600px) {\r\n    .blog-roadmap-wrapper {\r\n      padding: 16px 16px 16px 12px; \/* Side gaps fixed so cards don't cut on small screens *\/\r\n    }\r\n\r\n    .blog-roadmap-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .blog-roadmap-timeline {\r\n      padding-left: 14px; \/* Reduced timeline offset for narrow screens *\/\r\n    }\r\n\r\n    .blog-roadmap-timeline::before {\r\n      left: 4px;\r\n    }\r\n\r\n    .blog-roadmap-step {\r\n      padding-left: 12px; \/* Extra breathing space for internal card text *\/\r\n    }\r\n\r\n    .blog-roadmap-node {\r\n      left: -15px;\r\n    }\r\n\r\n    .blog-roadmap-card {\r\n      padding: 10px 12px;\r\n    }\r\n\r\n    .blog-roadmap-step-title {\r\n      font-size: 15px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"blog-roadmap-wrapper\">\r\n\r\n  <!-- Editorial Header -->\r\n  <section class=\"blog-roadmap-header\">\r\n    <section class=\"blog-roadmap-title\">UI UX Designer Career Roadmap<\/section>\r\n    <p class=\"blog-roadmap-subtitle\">A step-by-step editorial guide detailing the complete progression from a beginner to a Senior Product Designer.<\/p>\r\n  <\/section>\r\n\r\n  <!-- Compact Vertical Flow -->\r\n  <div class=\"blog-roadmap-timeline\">\r\n\r\n    <!-- Step 1 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 01<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Beginner<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Kickstart your design journey by understanding core digital interface principles and aesthetics.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Basic Design Aesthetics &nbsp;|&nbsp; <strong>Outcome:<\/strong> Understand the primary scope of UI\/UX design.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 2 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 02<\/span>\r\n          <section class=\"blog-roadmap-step-title\">UX Fundamentals<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Grasp core user experience theories, cognitive usability rules, and classic design laws.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Empathy, Heuristics, UX Laws &nbsp;|&nbsp; <strong>Outcome:<\/strong> Identify usability issues in existing products.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 3 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 03<\/span>\r\n          <section class=\"blog-roadmap-step-title\">User Research<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Gather qualitative and quantitative insights directly from target users to validate decisions.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Interviews, Surveys, Personas &nbsp;|&nbsp; <strong>Outcome:<\/strong> Translate user pain points into actionable design strategies.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 4 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 04<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Wireframing<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Structure interface visual hierarchy, content organization, and underlying user flows.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Information Architecture, Low\/Mid Wireframes &nbsp;|&nbsp; <strong>Outcome:<\/strong> Draft clean structural blueprints.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 5 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 05<\/span>\r\n          <section class=\"blog-roadmap-step-title\">UI Design<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Transform wireframes into visually appealing, polished, and functional screen layouts.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Colors, Typography, Layout Grids &nbsp;|&nbsp; <strong>Outcome:<\/strong> Craft high-fidelity production-ready screens.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 6 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 06<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Interactive Prototype<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Simulate realistic user interactions, page transitions, and micro-animations.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Smart Animation, Interactive Testing &nbsp;|&nbsp; <strong>Outcome:<\/strong> Validate user flows with clickable prototypes.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 7 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 07<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Design System<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Build scalable, reusable component libraries to streamline long-term workflows.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Components, Variants, Tokens &nbsp;|&nbsp; <strong>Outcome:<\/strong> Maintain UI consistency across large applications.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 8 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 08<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Portfolio Building<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Document end-to-end design thinking through clear, structured case studies.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Storytelling, Case Studies, Behance &nbsp;|&nbsp; <strong>Outcome:<\/strong> Present a compelling hiring-ready portfolio.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 9 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 09<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Internship<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Gain exposure to actual client requirements and cross-functional team workflows.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Collaboration, Developer Handoff &nbsp;|&nbsp; <strong>Outcome:<\/strong> Understand real-world product lifecycles.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 10 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 10<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Junior UI UX Designer<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Land your first full-time role and take direct ownership of core interface features.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Feature Execution, Team Integration &nbsp;|&nbsp; <strong>Outcome:<\/strong> Deliver functional product features consistently.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 11 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 11<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Mid-Level Designer<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Drive complex user journeys, lead user testing initiatives, and optimize key metrics.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Data-driven UX, A\/B Testing &nbsp;|&nbsp; <strong>Outcome:<\/strong> Balance user needs effectively with business goals.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 12 -->\r\n    <div class=\"blog-roadmap-step\">\r\n      <div class=\"blog-roadmap-node\"><\/div>\r\n      <div class=\"blog-roadmap-card\">\r\n        <div class=\"blog-roadmap-card-header\">\r\n          <span class=\"blog-roadmap-step-num\">Step 12<\/span>\r\n          <section class=\"blog-roadmap-step-title\">Senior Product Designer<\/section>\r\n        <\/div>\r\n        <p class=\"blog-roadmap-desc\">Shape product strategy, mentor design talent, and oversee overall UX architecture.<\/p>\r\n        <div class=\"blog-roadmap-meta-inline\">\r\n          <strong>Focus:<\/strong> Leadership, Product Strategy, Systems &nbsp;|&nbsp; <strong>Outcome:<\/strong> Direct end-to-end design strategy for businesses.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Editorial Tip Box -->\r\n  <div class=\"blog-roadmap-note\">\r\n    <section class=\"blog-roadmap-note-title\">Career Insight<\/section>\r\n    <p class=\"blog-roadmap-note-text\">\r\n      Focus on showcasing your <strong>problem-solving process<\/strong> rather than just visual mockups. Recruiters look for designers who clearly explain how research and user insights guided their final design decisions.\r\n    <\/p>\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-427d391 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"427d391\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5c638b8\" data-id=\"5c638b8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3288515 elementor-widget elementor-widget-html\" data-id=\"3288515\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .tools-comp-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .tools-comp-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 30px 16px;\r\n    color: #334155;\r\n    background-color: #FAFAFC;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Editorial Header *\/\r\n  .tools-comp-header {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 16px;\r\n    padding: 24px;\r\n    margin-bottom: 24px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n  }\r\n\r\n  .tools-comp-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .tools-comp-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    display: block;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .tools-comp-subtitle {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n  }\r\n\r\n  \/* Desktop Table Wrapper *\/\r\n  .tools-table-container {\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 12px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .tools-comp-table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    text-align: left;\r\n    font-size: 13.5px;\r\n  }\r\n\r\n  .tools-comp-table th {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    background: #F8FAFC;\r\n    padding: 12px 14px;\r\n    border-bottom: 2px solid #E2E8F0;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .tools-comp-table td {\r\n    padding: 12px 14px;\r\n    border-bottom: 1px solid #F1F5F9;\r\n    vertical-align: middle;\r\n    line-height: 1.45;\r\n  }\r\n\r\n  .tools-comp-table tr:last-child td {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .tools-comp-table tr:hover {\r\n    background-color: #F8FAFC;\r\n  }\r\n\r\n  .tool-name-tag {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .badge-diff {\r\n    display: inline-block;\r\n    padding: 2px 8px;\r\n    border-radius: 4px;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    font-family: 'Manrope', sans-serif;\r\n  }\r\n\r\n  .diff-easy { background: #DCFCE7; color: #15803D; }\r\n  .diff-med { background: #FEF3C7; color: #B45309; }\r\n  .diff-hard { background: #FEE2E2; color: #B91C1C; }\r\n\r\n  .text-adv { color: #166534; font-weight: 500; }\r\n  .text-lim { color: #991B1B; font-weight: 500; }\r\n\r\n  \/* Mobile Stacked Cards (Hidden on Desktop) *\/\r\n  .tools-mobile-cards {\r\n    display: none;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .tools-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 10px;\r\n    padding: 14px;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\r\n  }\r\n\r\n  .tools-card-top {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    border-bottom: 1px solid #F1F5F9;\r\n    padding-bottom: 8px;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .tools-card-row {\r\n    font-size: 13px;\r\n    line-height: 1.5;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .tools-card-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n  }\r\n\r\n  \/* Expert Recommendation Bottom Box *\/\r\n  .tools-comp-recommendation {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.25);\r\n    border-radius: 12px;\r\n    padding: 16px 20px;\r\n    border-left: 4px solid #2563EB;\r\n  }\r\n\r\n  .recommend-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    color: #1E40AF;\r\n    letter-spacing: 0.03em;\r\n    display: block;\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .recommend-text {\r\n    font-size: 13.5px;\r\n    line-height: 1.5;\r\n    color: #1E3A8A;\r\n  }\r\n\r\n  \/* Responsive Switching *\/\r\n  @media (max-width: 768px) {\r\n    .tools-table-container {\r\n      display: none;\r\n    }\r\n\r\n    .tools-mobile-cards {\r\n      display: flex;\r\n    }\r\n\r\n    .tools-comp-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .tools-comp-header {\r\n      padding: 16px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .tools-comp-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .tools-comp-subtitle {\r\n      font-size: 13px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"tools-comp-wrapper\">\r\n\r\n  <!-- Section Header -->\r\n  <section class=\"tools-comp-header\">\r\n    <span class=\"tools-comp-badge\">Industry Standard Tech Stack<\/span>\r\n    <section class=\"tools-comp-title\">Popular UI UX Design Tools Comparison<\/section>\r\n    <p class=\"tools-comp-subtitle\">\r\n      The most-used industry-led tools you can master by joining the UI UX Design Course provided by W3 Web School are mentioned here. Compare their difficulty, ideal usage, advantages, and limitations below.\r\n    <\/p>\r\n  <\/section>\r\n\r\n  <!-- Desktop Comparison Table -->\r\n  <div class=\"tools-table-container\">\r\n    <table class=\"tools-comp-table\">\r\n      <thead>\r\n        <tr>\r\n          <th>Tool<\/th>\r\n          <th>Best For<\/th>\r\n          <th>Difficulty<\/th>\r\n          <th>Industry Usage<\/th>\r\n          <th>Advantages<\/th>\r\n          <th>Limitations<\/th>\r\n        <\/tr>\r\n      <\/thead>\r\n      <tbody>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Figma<\/span><\/td>\r\n          <td>Interface Design & Prototyping<\/td>\r\n          <td><span class=\"badge-diff diff-easy\">Easy<\/span><\/td>\r\n          <td>95% (Global Standard)<\/td>\r\n          <td class=\"text-adv\">Real-time collaboration, cloud storage<\/td>\r\n          <td class=\"text-lim\">Requires stable internet connection<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Miro<\/span><\/td>\r\n          <td>UX Brainstorming & Mind Mapping<\/td>\r\n          <td><span class=\"badge-diff diff-easy\">Easy<\/span><\/td>\r\n          <td>80% (Research Teams)<\/td>\r\n          <td class=\"text-adv\">Infinite canvas, rich wireframe widgets<\/td>\r\n          <td class=\"text-lim\">Not designed for high-fi UI design<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Notion<\/span><\/td>\r\n          <td>UX Documentation & Research Ops<\/td>\r\n          <td><span class=\"badge-diff diff-easy\">Easy<\/span><\/td>\r\n          <td>75% (Agile Teams)<\/td>\r\n          <td class=\"text-adv\">Flexible wikis, database management<\/td>\r\n          <td class=\"text-lim\">Lacks graphical canvas features<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Maze<\/span><\/td>\r\n          <td>Remote Usability Testing<\/td>\r\n          <td><span class=\"badge-diff diff-med\">Moderate<\/span><\/td>\r\n          <td>65% (Product Research)<\/td>\r\n          <td class=\"text-adv\">Automated heatmap & funnel analytics<\/td>\r\n          <td class=\"text-lim\">Paid plans are relatively expensive<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Adobe Illustrator<\/span><\/td>\r\n          <td>Vector Graphics & Iconography<\/td>\r\n          <td><span class=\"badge-diff diff-hard\">Hard<\/span><\/td>\r\n          <td>85% (Graphic\/UI)<\/td>\r\n          <td class=\"text-adv\">Precision vector control, scalable art<\/td>\r\n          <td class=\"text-lim\">Steep learning curve, no UI prototyping<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Adobe Photoshop<\/span><\/td>\r\n          <td>Image Editing & Asset Prep<\/td>\r\n          <td><span class=\"badge-diff diff-hard\">Hard<\/span><\/td>\r\n          <td>80% (Creative Agencies)<\/td>\r\n          <td class=\"text-adv\">Advanced raster pixel editing<\/td>\r\n          <td class=\"text-lim\">Heavy file size, legacy UI workflow<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">HTML<\/span><\/td>\r\n          <td>Interface Structure & Semantics<\/td>\r\n          <td><span class=\"badge-diff diff-easy\">Easy<\/span><\/td>\r\n          <td>90% (Front-End\/Design)<\/td>\r\n          <td class=\"text-adv\">Clean developer handoff, Web standards<\/td>\r\n          <td class=\"text-lim\">Requires code knowledge<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">CSS<\/span><\/td>\r\n          <td>Interface Styling & Responsive Layouts<\/td>\r\n          <td><span class=\"badge-diff diff-med\">Moderate<\/span><\/td>\r\n          <td>90% (Front-End\/Design)<\/td>\r\n          <td class=\"text-adv\">Pixel-perfect styling control<\/td>\r\n          <td class=\"text-lim\">Layout bugs without clear architecture<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Bootstrap<\/span><\/td>\r\n          <td>Responsive Framework Layouts<\/td>\r\n          <td><span class=\"badge-diff diff-easy\">Easy<\/span><\/td>\r\n          <td>70% (Web Development)<\/td>\r\n          <td class=\"text-adv\">Fast pre-built grid component library<\/td>\r\n          <td class=\"text-lim\">Generic look if uncustomized<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Webflow<\/span><\/td>\r\n          <td>No-Code Production Websites<\/td>\r\n          <td><span class=\"badge-diff diff-med\">Moderate<\/span><\/td>\r\n          <td>60% (Freelance\/Agency)<\/td>\r\n          <td class=\"text-adv\">Visual coding, live CMS deployment<\/td>\r\n          <td class=\"text-lim\">Subscription cost per project platform<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Zeplin<\/span><\/td>\r\n          <td>Developer Handoff & Specifications<\/td>\r\n          <td><span class=\"badge-diff diff-easy\">Easy<\/span><\/td>\r\n          <td>55% (Product Teams)<\/td>\r\n          <td class=\"text-adv\">Automatic code snippet generation<\/td>\r\n          <td class=\"text-lim\">Redundant if using Figma dev mode<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Axure<\/span><\/td>\r\n          <td>Complex Logic Wireframes<\/td>\r\n          <td><span class=\"badge-diff diff-hard\">Hard<\/span><\/td>\r\n          <td>45% (Enterprise UX)<\/td>\r\n          <td class=\"text-adv\">Conditional logic, dynamic data state<\/td>\r\n          <td class=\"text-lim\">Outdated UI, high complexity<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">ProtoPie<\/span><\/td>\r\n          <td>Advanced Sensor Micro-Interactions<\/td>\r\n          <td><span class=\"badge-diff diff-med\">Moderate<\/span><\/td>\r\n          <td>50% (Mobile Product)<\/td>\r\n          <td class=\"text-adv\">Supports hardware sensors & variables<\/td>\r\n          <td class=\"text-lim\">Separate application workflow required<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"tool-name-tag\">Proto.io<\/span><\/td>\r\n          <td>Rapid Mobile App Prototypes<\/td>\r\n          <td><span class=\"badge-diff diff-easy\">Easy<\/span><\/td>\r\n          <td>40% (Startup Pitching)<\/td>\r\n          <td class=\"text-adv\">Rich built-in mobile UI component blocks<\/td>\r\n          <td class=\"text-lim\">Less flexible for custom UI logic<\/td>\r\n        <\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n\r\n  <!-- Mobile Stacked Cards -->\r\n  <div class=\"tools-mobile-cards\">\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Figma<\/span>\r\n        <span class=\"badge-diff diff-easy\">Easy<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Interface Design & Prototyping<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 95% (Global Standard)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Real-time collaboration, cloud storage<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Requires stable internet connection<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Miro<\/span>\r\n        <span class=\"badge-diff diff-easy\">Easy<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> UX Brainstorming & Mind Mapping<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 80% (Research Teams)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Infinite canvas, rich wireframe widgets<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Not designed for high-fi UI design<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Notion<\/span>\r\n        <span class=\"badge-diff diff-easy\">Easy<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> UX Documentation & Research Ops<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 75% (Agile Teams)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Flexible wikis, database management<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Lacks graphical canvas features<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Maze<\/span>\r\n        <span class=\"badge-diff diff-med\">Moderate<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Remote Usability Testing<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 65% (Product Research)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Automated heatmap & funnel analytics<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Paid plans are relatively expensive<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Adobe Illustrator<\/span>\r\n        <span class=\"badge-diff diff-hard\">Hard<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Vector Graphics & Iconography<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 85% (Graphic\/UI)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Precision vector control, scalable art<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Steep learning curve, no UI prototyping<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Adobe Photoshop<\/span>\r\n        <span class=\"badge-diff diff-hard\">Hard<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Image Editing & Asset Prep<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 80% (Creative Agencies)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Advanced raster pixel editing<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Heavy file size, legacy UI workflow<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">HTML & CSS<\/span>\r\n        <span class=\"badge-diff diff-med\">Moderate<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Web Layouts & Frontend Handoff<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 90% (Front-End\/Design)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Direct production control over design UI<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Requires fundamental coding knowledge<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Bootstrap<\/span>\r\n        <span class=\"badge-diff diff-easy\">Easy<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Responsive Framework Layouts<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 70% (Web Development)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Fast pre-built grid component library<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Generic look if uncustomized<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Webflow<\/span>\r\n        <span class=\"badge-diff diff-med\">Moderate<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> No-Code Production Websites<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 60% (Freelance\/Agency)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Visual coding, live CMS deployment<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Subscription cost per project platform<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Zeplin<\/span>\r\n        <span class=\"badge-diff diff-easy\">Easy<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Developer Handoff & Specs<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 55% (Product Teams)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Automatic code snippet generation<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Redundant if using Figma dev mode<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">Axure<\/span>\r\n        <span class=\"badge-diff diff-hard\">Hard<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Complex Logic Wireframes<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 45% (Enterprise UX)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Conditional logic, dynamic data state<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Outdated UI, high complexity<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tools-card\">\r\n      <div class=\"tools-card-top\">\r\n        <span class=\"tool-name-tag\">ProtoPie & Proto.io<\/span>\r\n        <span class=\"badge-diff diff-med\">Moderate<\/span>\r\n      <\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Best For:<\/span> Advanced Mobile Prototyping<\/div>\r\n      <div class=\"tools-card-row\"><span class=\"tools-card-label\">Industry Usage:<\/span> 50% (Mobile Apps)<\/div>\r\n      <div class=\"tools-card-row text-adv\"><span class=\"tools-card-label\">Advantages:<\/span> Micro-interactions, hardware integration<\/div>\r\n      <div class=\"tools-card-row text-lim\"><span class=\"tools-card-label\">Limitations:<\/span> Extra learning curve outside core tools<\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Expert Recommendation Card -->\r\n  <div class=\"tools-comp-recommendation\">\r\n    <section class=\"recommend-title\">Expert Recommendation<\/section>\r\n    <p class=\"recommend-text\">\r\n      To stand out as a modern Product Designer, focus heavily on mastering <strong>Figma<\/strong> for design\/prototyping, <strong>Miro<\/strong> for research, and basic <strong>HTML\/CSS<\/strong> for seamless collaboration with developers.\r\n    <\/p>\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6997e3f elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"6997e3f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a296a36\" data-id=\"a296a36\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b653dc0 elementor-widget elementor-widget-html\" data-id=\"b653dc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .editorial-comp-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .editorial-comp-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 30px 16px;\r\n    color: #334155;\r\n    background-color: #FAFAFC;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Editorial Header Container *\/\r\n  .editorial-comp-header {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 16px;\r\n    padding: 24px;\r\n    margin-bottom: 24px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n  }\r\n\r\n  .editorial-comp-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .editorial-comp-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    display: block;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .editorial-comp-subtitle {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n  }\r\n\r\n  \/* Desktop Table Wrapper *\/\r\n  .editorial-table-container {\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 12px;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .editorial-comp-table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    text-align: left;\r\n    font-size: 13.5px;\r\n  }\r\n\r\n  .editorial-comp-table th {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 800;\r\n    padding: 14px 16px;\r\n    border-bottom: 2px solid #E2E8F0;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .editorial-comp-table th.col-feature {\r\n    color: #0F172A;\r\n    background: #F8FAFC;\r\n    width: 20%;\r\n  }\r\n\r\n  .editorial-comp-table th.col-uiux {\r\n    color: #1E40AF;\r\n    background: #EFF6FF;\r\n    width: 40%;\r\n    border-top: 3px solid #2563EB;\r\n  }\r\n\r\n  .editorial-comp-table th.col-graphic {\r\n    color: #6B21A8;\r\n    background: #FAF5FF;\r\n    width: 40%;\r\n    border-top: 3px solid #9333EA;\r\n  }\r\n\r\n  .editorial-comp-table td {\r\n    padding: 12px 16px;\r\n    border-bottom: 1px solid #F1F5F9;\r\n    vertical-align: middle;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .editorial-comp-table tr:last-child td {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .feature-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    font-size: 13.5px;\r\n  }\r\n\r\n  .uiux-cell {\r\n    background: #FFFFFF;\r\n    color: #1E293B;\r\n  }\r\n\r\n  .graphic-cell {\r\n    background: #FFFFFF;\r\n    color: #1E293B;\r\n  }\r\n\r\n  .highlight-blue {\r\n    color: #2563EB;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .highlight-purple {\r\n    color: #9333EA;\r\n    font-weight: 600;\r\n  }\r\n\r\n  \/* Mobile Stacked Cards (Hidden on Desktop) *\/\r\n  .editorial-mobile-cards {\r\n    display: none;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .mobile-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 12px;\r\n    padding: 16px;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\r\n  }\r\n\r\n  .mobile-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    margin-bottom: 12px;\r\n    padding-bottom: 6px;\r\n    border-bottom: 2px solid #E2E8F0;\r\n  }\r\n\r\n  .mobile-split {\r\n    display: block;\r\n  }\r\n\r\n  .mobile-box {\r\n    padding: 10px;\r\n    border-radius: 8px;\r\n    font-size: 12.5px;\r\n    line-height: 1.4;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .mobile-box:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .box-uiux {\r\n    background: #EFF6FF;\r\n    border: 1px solid #DBEAFE;\r\n  }\r\n\r\n  .box-graphic {\r\n    background: #FAF5FF;\r\n    border: 1px solid #F3E8FF;\r\n  }\r\n\r\n  .box-tag {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    display: block;\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .tag-blue { color: #2563EB; }\r\n  .tag-purple { color: #9333EA; }\r\n\r\n  \/* Bottom Stacked Layout *\/\r\n  .editorial-bottom-container {\r\n    display: block;\r\n    width: 100%;\r\n  }\r\n\r\n  .editorial-card-recruiter {\r\n    background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%);\r\n    border: 1px solid rgba(37, 99, 235, 0.25);\r\n    border-radius: 12px;\r\n    padding: 20px;\r\n    border-left: 4px solid #2563EB;\r\n    margin-bottom: 16px;\r\n    width: 100%;\r\n  }\r\n\r\n  .editorial-card-career {\r\n    background: linear-gradient(135deg, #FAF5FF 0%, #FFFFFF 100%);\r\n    border: 1px solid rgba(147, 51, 234, 0.25);\r\n    border-radius: 12px;\r\n    padding: 20px;\r\n    border-left: 4px solid #9333EA;\r\n    margin-bottom: 16px;\r\n    width: 100%;\r\n  }\r\n\r\n  .card-badge-blue {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    color: #1E40AF;\r\n    letter-spacing: 0.03em;\r\n    display: block;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .card-badge-purple {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    color: #6B21A8;\r\n    letter-spacing: 0.03em;\r\n    display: block;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .card-text {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #334155;\r\n  }\r\n\r\n  \/* Two Column Left-Right Flex Layout inside Choice Card *\/\r\n  .career-split-row {\r\n    display: flex;\r\n    gap: 20px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  .career-col-left, .career-col-right {\r\n    flex: 1;\r\n    background: rgba(255, 255, 255, 0.6);\r\n    border-radius: 8px;\r\n    padding: 12px 14px;\r\n    border: 1px solid #F3E8FF;\r\n  }\r\n\r\n  .career-col-left {\r\n    border-left: 3px solid #2563EB;\r\n  }\r\n\r\n  .career-col-right {\r\n    border-left: 3px solid #9333EA;\r\n  }\r\n\r\n  .career-list {\r\n    margin-top: 6px;\r\n    padding-left: 18px;\r\n    font-size: 13.5px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .career-list li {\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .takeaway-box {\r\n    background: #F8FAFC;\r\n    border: 1px dashed #CBD5E1;\r\n    border-radius: 8px;\r\n    padding: 14px 18px;\r\n    font-size: 13.5px;\r\n    line-height: 1.5;\r\n    color: #475569;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* Responsive Switching *\/\r\n  @media (max-width: 768px) {\r\n    .editorial-table-container {\r\n      display: none;\r\n    }\r\n\r\n    .editorial-mobile-cards {\r\n      display: flex;\r\n    }\r\n\r\n    .career-split-row {\r\n      flex-direction: column;\r\n      gap: 12px;\r\n    }\r\n\r\n    .editorial-comp-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .editorial-comp-header {\r\n      padding: 16px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .editorial-comp-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .editorial-comp-subtitle {\r\n      font-size: 13px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"editorial-comp-wrapper\">\r\n\r\n  <!-- Editorial Section Header -->\r\n  <section class=\"editorial-comp-header\">\r\n    <span class=\"editorial-comp-badge\">Career Roadmap Comparison<\/span>\r\n    <section class=\"editorial-comp-title\">UI UX Design Course Syllabus vs Graphic Design Course Syllabus<\/section>\r\n    <p class=\"editorial-comp-subtitle\">\r\n      Although both careers involve creativity, their learning path and job roles are different. UI\/UX Design focuses on designing user-friendly websites and mobile apps, while Graphic Design focuses on branding, marketing, and visual communication. This comparison will help you choose the right career path.\r\n    <\/p>\r\n  <\/section>\r\n\r\n  <!-- Desktop Two-Column Comparison Table -->\r\n  <div class=\"editorial-table-container\">\r\n    <table class=\"editorial-comp-table\">\r\n      <thead>\r\n        <tr>\r\n          <th class=\"col-feature\">Feature<\/th>\r\n          <th class=\"col-uiux\">UI\/UX Design Syllabus<\/th>\r\n          <th class=\"col-graphic\">Graphic Design Syllabus<\/th>\r\n        <\/tr>\r\n      <\/thead>\r\n      <tbody>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Learning Focus<\/span><\/td>\r\n          <td class=\"uiux-cell\">User experience, usability heuristics, & digital interfaces<\/td>\r\n          <td class=\"graphic-cell\">Visual layout hierarchy, branding, & print media aesthetics<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Software & Tools<\/span><\/td>\r\n          <td class=\"uiux-cell\"><span class=\"highlight-blue\">Figma, Framer, Adobe XD<\/span><\/td>\r\n          <td class=\"graphic-cell\"><span class=\"highlight-purple\">Photoshop, Illustrator, InDesign<\/span><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Projects<\/span><\/td>\r\n          <td class=\"uiux-cell\">Mobile apps, SaaS web portals, design systems, dashboards<\/td>\r\n          <td class=\"graphic-cell\">Brand logos, marketing posters, brochures, packaging<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Portfolio Type<\/span><\/td>\r\n          <td class=\"uiux-cell\">In-depth case studies, user research, & clickable prototypes<\/td>\r\n          <td class=\"graphic-cell\">Visual branding showcases & creative graphic designs<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Job Roles<\/span><\/td>\r\n          <td class=\"uiux-cell\">UI\/UX Designer, Product Designer, Interaction Designer<\/td>\r\n          <td class=\"graphic-cell\">Graphic Designer, Brand Identity Designer, Visual Artist<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Average Salary<\/span><\/td>\r\n          <td class=\"uiux-cell\"><span class=\"highlight-blue\">Generally higher in tech & IT sector<\/span><\/td>\r\n          <td class=\"graphic-cell\">Varies by media industry & creative experience<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Industries<\/span><\/td>\r\n          <td class=\"uiux-cell\">IT, Software, Startups, E-commerce, Product Tech<\/td>\r\n          <td class=\"graphic-cell\">Advertising agencies, Publishing, Media, Printing<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Creativity Type<\/span><\/td>\r\n          <td class=\"uiux-cell\">Functional, logical, problem-solving usability design<\/td>\r\n          <td class=\"graphic-cell\">Expressive visual art, emotional messaging, & aesthetics<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Coding Requirement<\/span><\/td>\r\n          <td class=\"uiux-cell\">Basic HTML\/CSS knowledge is helpful for developer handoff<\/td>\r\n          <td class=\"graphic-cell\">Usually not required<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Future Scope & Demand<\/span><\/td>\r\n          <td class=\"uiux-cell\"><span class=\"highlight-blue\">High demand in scaling digital tech products<\/span><\/td>\r\n          <td class=\"graphic-cell\"><span class=\"highlight-purple\">Strong steady demand in marketing & creative agencies<\/span><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td><span class=\"feature-label\">Learning Curve<\/span><\/td>\r\n          <td class=\"uiux-cell\">Moderate (Requires analytical & user empathy skills)<\/td>\r\n          <td class=\"graphic-cell\">Moderate (Requires visual creative composition skills)<\/td>\r\n        <\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n\r\n  <!-- Mobile Stacked Feature Cards -->\r\n  <div class=\"editorial-mobile-cards\">\r\n\r\n    <div class=\"mobile-card\">\r\n      <section class=\"mobile-card-title\">Learning Focus & Tools<\/section>\r\n      <div class=\"mobile-split\">\r\n        <div class=\"mobile-box box-uiux\">\r\n          <span class=\"box-tag tag-blue\">UI\/UX Design<\/span>\r\n          <strong>Focus:<\/strong> User experience & digital products<br>\r\n          <strong>Tools:<\/strong> Figma, Framer, Adobe XD\r\n        <\/div>\r\n        <div class=\"mobile-box box-graphic\">\r\n          <span class=\"box-tag tag-purple\">Graphic Design<\/span>\r\n          <strong>Focus:<\/strong> Branding & visual design<br>\r\n          <strong>Tools:<\/strong> Photoshop, Illustrator, InDesign\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mobile-card\">\r\n      <section class=\"mobile-card-title\">Projects & Portfolio<\/section>\r\n      <div class=\"mobile-split\">\r\n        <div class=\"mobile-box box-uiux\">\r\n          <span class=\"box-tag tag-blue\">UI\/UX Design<\/span>\r\n          <strong>Projects:<\/strong> Apps, websites, dashboards<br>\r\n          <strong>Portfolio:<\/strong> Case studies & prototypes\r\n        <\/div>\r\n        <div class=\"mobile-box box-graphic\">\r\n          <span class=\"box-tag tag-purple\">Graphic Design<\/span>\r\n          <strong>Projects:<\/strong> Logos, posters, brochures<br>\r\n          <strong>Portfolio:<\/strong> Branding & creative designs\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mobile-card\">\r\n      <section class=\"mobile-card-title\">Career Opportunities & Salary<\/section>\r\n      <div class=\"mobile-split\">\r\n        <div class=\"mobile-box box-uiux\">\r\n          <span class=\"box-tag tag-blue\">UI\/UX Design<\/span>\r\n          <strong>Roles:<\/strong> UI\/UX Designer, Product Designer<br>\r\n          <strong>Salary:<\/strong> Generally higher in tech\r\n        <\/div>\r\n        <div class=\"mobile-box box-graphic\">\r\n          <span class=\"box-tag tag-purple\">Graphic Design<\/span>\r\n          <strong>Roles:<\/strong> Graphic Designer, Brand Designer<br>\r\n          <strong>Salary:<\/strong> Varies by industry & experience\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mobile-card\">\r\n      <section class=\"mobile-card-title\">Industries & Skills<\/section>\r\n      <div class=\"mobile-split\">\r\n        <div class=\"mobile-box box-uiux\">\r\n          <span class=\"box-tag tag-blue\">UI\/UX Design<\/span>\r\n          <strong>Industries:<\/strong> IT, SaaS, Startups, E-commerce<br>\r\n          <strong>Coding:<\/strong> Basic HTML\/CSS is helpful\r\n        <\/div>\r\n        <div class=\"mobile-box box-graphic\">\r\n          <span class=\"box-tag tag-purple\">Graphic Design<\/span>\r\n          <strong>Industries:<\/strong> Advertising, Media, Printing<br>\r\n          <strong>Coding:<\/strong> Usually not required\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mobile-card\">\r\n      <section class=\"mobile-card-title\">Future Scope & Learning Curve<\/section>\r\n      <div class=\"mobile-split\">\r\n        <div class=\"mobile-box box-uiux\">\r\n          <span class=\"box-tag tag-blue\">UI\/UX Design<\/span>\r\n          <strong>Scope:<\/strong> High demand in digital products<br>\r\n          <strong>Curve:<\/strong> Analytical & empathetic focus\r\n        <\/div>\r\n        <div class=\"mobile-box box-graphic\">\r\n          <span class=\"box-tag tag-purple\">Graphic Design<\/span>\r\n          <strong>Scope:<\/strong> Strong demand in creative agencies<br>\r\n          <strong>Curve:<\/strong> Visual composition focus\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Bottom Block Layout -->\r\n  <div class=\"editorial-bottom-container\">\r\n\r\n    <!-- Row 1: Recruiter Tip Card -->\r\n    <div class=\"editorial-card-recruiter\">\r\n      <span class=\"card-badge-blue\">Recruiter's Tip<\/span>\r\n      <p class=\"card-text\">\r\n        Employers value real projects and a strong portfolio more than software knowledge. Choose the course that matches your career goals and interests.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Row 2: Choice Card (Left & Right Split) -->\r\n    <div class=\"editorial-card-career\">\r\n      <span class=\"card-badge-purple\">Which One Should You Choose?<\/span>\r\n      \r\n      <div class=\"career-split-row\">\r\n        <!-- Left Side: UI\/UX Design -->\r\n        <div class=\"career-col-left\">\r\n          <p class=\"card-text\"><strong style=\"color: #2563EB;\">Choose UI\/UX Design if you want to:<\/strong><\/p>\r\n          <ul class=\"career-list\">\r\n            <li>Design websites and mobile apps<\/li>\r\n            <li>Build digital products<\/li>\r\n            <li>Work in the tech industry<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n\r\n        <!-- Right Side: Graphic Design -->\r\n        <div class=\"career-col-right\">\r\n          <p class=\"card-text\"><strong style=\"color: #9333EA;\">Choose Graphic Design if you want to:<\/strong><\/p>\r\n          <ul class=\"career-list\">\r\n            <li>Create logos and branding<\/li>\r\n            <li>Design marketing materials<\/li>\r\n            <li>Work in creative agencies<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Takeaway Summary Box -->\r\n    <div class=\"takeaway-box\">\r\n      <strong>Quick Takeaway:<\/strong> Choose UI\/UX Design for a career in digital product design, or Graphic Design if you enjoy branding and visual creativity. Both offer great career opportunities when backed by practical projects and a strong portfolio.\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4a1911b elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4a1911b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9a268de\" data-id=\"9a268de\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a8a2a93 elementor-widget elementor-widget-html\" data-id=\"a8a2a93\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .seo-compact-career * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-compact-career {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 24px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .seo-career-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 12px;\r\n    padding: 20px;\r\n    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);\r\n  }\r\n\r\n  .seo-career-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 8px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-career-intro {\r\n    font-size: 13.5px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .seo-medium-link {\r\n    color: #2563EB;\r\n    font-weight: 600;\r\n    text-decoration: underline;\r\n    transition: color 0.15s ease;\r\n  }\r\n\r\n  .seo-medium-link:hover {\r\n    color: #1D4ED8;\r\n  }\r\n\r\n  .seo-pills-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n    margin-bottom: 10px;\r\n    display: block;\r\n  }\r\n\r\n  \/* Compact Chips \/ Pills Container *\/\r\n  .seo-roles-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n  }\r\n\r\n  .seo-role-chip {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12.5px;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    background: #F1F5F9;\r\n    border: 1px solid #E2E8F0;\r\n    padding: 6px 12px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    transition: all 0.15s ease;\r\n  }\r\n\r\n  .seo-role-chip:hover {\r\n    background: #EFF6FF;\r\n    border-color: #BFDBFE;\r\n    color: #2563EB;\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .seo-compact-career {\r\n      padding: 16px 10px;\r\n    }\r\n\r\n    .seo-career-card {\r\n      padding: 16px;\r\n    }\r\n\r\n    .seo-career-title {\r\n      font-size: 18px;\r\n    }\r\n\r\n    .seo-career-intro {\r\n      font-size: 13px;\r\n    }\r\n\r\n    .seo-role-chip {\r\n      font-size: 11.5px;\r\n      padding: 5px 10px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-compact-career\">\r\n  <section class=\"seo-career-card\">\r\n    <section class=\"seo-career-title\">Career Opportunities<\/section>\r\n    \r\n    <p class=\"seo-career-intro\">\r\n      You might notice that there is a sudden rise in the employment rate for UI UX designers. According to <a href=\"https:\/\/medium.com\/@niyachristine\/digital-creatives-product-makers-and-business-leaders-this-is-our-time-ab55cac87007\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-medium-link\">Medium<\/a>, the employment rate is expected to increase by 23% by 2031. Explore the high-paying career options available in this specific domain.\r\n    <\/p>\r\n\r\n    <section class=\"seo-pills-label\">Available Job Roles<\/section>\r\n\r\n    <div class=\"seo-roles-container\">\r\n      <span class=\"seo-role-chip\">UI UX Designer<\/span>\r\n      <span class=\"seo-role-chip\">UX Writer<\/span>\r\n      <span class=\"seo-role-chip\">UX Designer<\/span>\r\n      <span class=\"seo-role-chip\">UI Designer<\/span>\r\n      <span class=\"seo-role-chip\">UX Researcher<\/span>\r\n      <span class=\"seo-role-chip\">Product Designer<\/span>\r\n      <span class=\"seo-role-chip\">Usability Analyst<\/span>\r\n      <span class=\"seo-role-chip\">Creative Designer<\/span>\r\n      <span class=\"seo-role-chip\">Interaction Designer<\/span>\r\n      <span class=\"seo-role-chip\">UX Strategist<\/span>\r\n      <span class=\"seo-role-chip\">Information Architect<\/span>\r\n    <\/div>\r\n  <\/section>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f271358 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f271358\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4bcd419\" data-id=\"4bcd419\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1bdcd6c elementor-widget elementor-widget-html\" data-id=\"1bdcd6c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .seo-df-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-df-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 24px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Section Title *\/\r\n  .seo-df-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  \/* Two Column Main Container *\/\r\n  .seo-df-main-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 20px;\r\n  }\r\n\r\n  \/* Premium White Card Standard *\/\r\n  .seo-df-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 24px;\r\n    padding: 20px 24px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .seo-df-card-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    margin-bottom: 8px;\r\n    align-self: flex-start;\r\n  }\r\n\r\n  .seo-df-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    margin-bottom: 8px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-df-text {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n  }\r\n\r\n  .seo-df-link {\r\n    color: #2563EB;\r\n    font-weight: 600;\r\n    text-decoration: underline;\r\n    transition: color 0.15s ease;\r\n  }\r\n\r\n  .seo-df-link:hover {\r\n    color: #1D4ED8;\r\n  }\r\n\r\n  \/* Responsive Design *\/\r\n  @media (max-width: 768px) {\r\n    .seo-df-main-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 16px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 550px) {\r\n    .seo-df-wrapper {\r\n      padding: 16px 10px;\r\n    }\r\n\r\n    .seo-df-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .seo-df-card {\r\n      border-radius: 18px;\r\n      padding: 16px;\r\n    }\r\n\r\n    .seo-df-text {\r\n      font-size: 13px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-df-wrapper\">\r\n  \r\n  <section class=\"seo-df-title\">UI UX Design Course Duration and Fees<\/section>\r\n\r\n  <!-- Desktop Two-Column Layout -->\r\n  <div class=\"seo-df-main-grid\">\r\n\r\n    <!-- Course Duration Card -->\r\n    <section class=\"seo-df-card\">\r\n      <span class=\"seo-df-card-badge\">Duration<\/span>\r\n      <section class=\"seo-df-card-title\">Course Duration<\/section>\r\n      <p class=\"seo-df-text\">\r\n        The UI UX Course generally takes 6 months to complete. <a href=\"https:\/\/www.w3webschool.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-df-link\">W3 Web School<\/a> offers a Job-Ready <a href=\"https:\/\/www.w3webschool.com\/ui-ux-design-course-in-kolkata\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-df-link\">UI UX Design course in kolkata<\/a>, where you can learn design basics to advanced topics like user research, prototyping, and wireframing. You can also get practical training on 6+ real case studies, 12+ tools, and placement assistance.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Course Fee Card -->\r\n    <section class=\"seo-df-card\">\r\n      <span class=\"seo-df-card-badge\">Fee Structure<\/span>\r\n      <section class=\"seo-df-card-title\">Fee Structure<\/section>\r\n      <p class=\"seo-df-text\">\r\n        The UI UX Design course fee usually ranges from \u20b935,000 to \u20b950,000. At <a href=\"https:\/\/www.w3webschool.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-df-link\">W3 Web School<\/a>, you get special offers or limited-time discounts along with an easy EMI payment facility.\r\n      <\/p>\r\n    <\/section>\r\n\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-741cc79 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"741cc79\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8cce7b3\" data-id=\"8cce7b3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e3880ac elementor-widget elementor-widget-html\" data-id=\"e3880ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .seo-impact-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-impact-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 32px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Typography Base *\/\r\n  .seo-impact-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 12px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-impact-intro {\r\n    font-size: 14.5px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .seo-impact-link {\r\n    color: #2563EB;\r\n    font-weight: 600;\r\n    text-decoration: underline;\r\n    transition: color 0.15s ease;\r\n  }\r\n\r\n  .seo-impact-link:hover {\r\n    color: #1D4ED8;\r\n  }\r\n\r\n  \/* Desktop Comparison Table *\/\r\n  .seo-table-container {\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 24px;\r\n    padding: 8px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .seo-impact-table {\r\n    width: 100%;\r\n    border-collapse: separate;\r\n    border-spacing: 0;\r\n    text-align: left;\r\n  }\r\n\r\n  .seo-impact-table th {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    padding: 16px;\r\n    color: #0F172A;\r\n    background: #F8FAFC;\r\n    border-bottom: 2px solid #E2E8F0;\r\n  }\r\n\r\n  .seo-impact-table th:first-child {\r\n    border-top-left-radius: 16px;\r\n    width: 25%;\r\n  }\r\n\r\n  .seo-impact-table th:nth-child(2) {\r\n    color: #D97706;\r\n    width: 35%;\r\n  }\r\n\r\n  .seo-impact-table th:nth-child(3) {\r\n    color: #16A34A;\r\n    width: 40%;\r\n    border-top-right-radius: 16px;\r\n  }\r\n\r\n  .seo-impact-table td {\r\n    font-size: 13.5px;\r\n    line-height: 1.5;\r\n    padding: 14px 16px;\r\n    color: #334155;\r\n    border-bottom: 1px solid #F1F5F9;\r\n    vertical-align: top;\r\n  }\r\n\r\n  .seo-impact-table tr:last-child td {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .seo-impact-table td:first-child {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    background: #FAFAFC;\r\n  }\r\n\r\n  \/* Mobile Stacked Comparison Cards *\/\r\n  .seo-mobile-stacked {\r\n    display: none;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .seo-stacked-row-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 16px;\r\n    padding: 14px;\r\n    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);\r\n  }\r\n\r\n  .seo-stacked-factor-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    margin-bottom: 10px;\r\n    padding-bottom: 6px;\r\n    border-bottom: 1px solid #F1F5F9;\r\n    display: block;\r\n  }\r\n\r\n  .seo-stacked-val-box {\r\n    margin-bottom: 8px;\r\n    padding: 8px 10px;\r\n    border-radius: 8px;\r\n    font-size: 13px;\r\n    line-height: 1.4;\r\n  }\r\n\r\n  .seo-stacked-val-box:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .seo-stacked-val-box.short {\r\n    background: #FFFBEB;\r\n    border: 1px solid #FEF3C7;\r\n    color: #92400E;\r\n  }\r\n\r\n  .seo-stacked-val-box.long {\r\n    background: #F0FDF4;\r\n    border: 1px solid #DCFCE7;\r\n    color: #166534;\r\n  }\r\n\r\n  .seo-stacked-val-label {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    display: block;\r\n    margin-bottom: 2px;\r\n  }\r\n\r\n  \/* Two Premium Comparison Cards Below Table *\/\r\n  .seo-cards-comparison-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 20px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .seo-comp-card {\r\n    background: #FFFFFF;\r\n    border-radius: 24px;\r\n    padding: 24px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .seo-comp-card.warning {\r\n    border: 1px solid #FDE68A;\r\n    border-top: 4px solid #F59E0B;\r\n  }\r\n\r\n  .seo-comp-card.success {\r\n    border: 1px solid #BBF7D0;\r\n    border-top: 4px solid #10B981;\r\n  }\r\n\r\n  .seo-comp-card-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    margin-bottom: 12px;\r\n    align-self: flex-start;\r\n  }\r\n\r\n  .seo-comp-card.warning .seo-comp-card-badge {\r\n    background: #FFFBEB;\r\n    color: #D97706;\r\n  }\r\n\r\n  .seo-comp-card.success .seo-comp-card-badge {\r\n    background: #F0FDF4;\r\n    color: #16A34A;\r\n  }\r\n\r\n  .seo-comp-card-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    margin-bottom: 10px;\r\n    display: block;\r\n  }\r\n\r\n  \/* Bottom Editorial Recommendation & Quick Decision Box *\/\r\n  .seo-rec-box {\r\n    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);\r\n    border-radius: 24px;\r\n    padding: 24px 28px;\r\n    color: #FFFFFF;\r\n    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n\r\n  .seo-rec-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #38BDF8;\r\n    background: rgba(56, 189, 248, 0.1);\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    align-self: flex-start;\r\n  }\r\n\r\n  .seo-rec-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    color: #FFFFFF;\r\n    display: block;\r\n  }\r\n\r\n  .seo-quick-decision {\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 16px;\r\n    padding: 16px;\r\n  }\r\n\r\n  .seo-quick-decision-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #38BDF8;\r\n    margin-bottom: 6px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-rec-text {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #94A3B8;\r\n  }\r\n\r\n  .seo-rec-text-light {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #E2E8F0;\r\n  }\r\n\r\n  \/* Mobile Breakpoints *\/\r\n  @media (max-width: 768px) {\r\n    .seo-table-container {\r\n      display: none;\r\n    }\r\n\r\n    .seo-mobile-stacked {\r\n      display: flex;\r\n    }\r\n\r\n    .seo-cards-comparison-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 16px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 550px) {\r\n    .seo-impact-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .seo-impact-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .seo-comp-card {\r\n      border-radius: 18px;\r\n      padding: 18px;\r\n    }\r\n\r\n    .seo-rec-box {\r\n      border-radius: 18px;\r\n      padding: 20px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-impact-wrapper\">\r\n\r\n  <!-- Top Heading & Intro -->\r\n  <section class=\"seo-impact-title\">Impact of UI UX Design Course Duration<\/section>\r\n  \r\n  <p class=\"seo-impact-intro\">\r\n    Choosing the right course duration can influence your skills, depth of knowledge, and job-readiness. Let\u2019s explore how different course durations impact your UI\/UX design journey.\r\n  <\/p>\r\n\r\n  <!-- Middle: Large Responsive Comparison Table (Desktop) -->\r\n  <div class=\"seo-table-container\">\r\n    <table class=\"seo-impact-table\">\r\n      <thead>\r\n        <tr>\r\n          <th>Key Factors<\/th>\r\n          <th>3-Month Course<\/th>\r\n          <th>6-Month Course (Advanced)<\/th>\r\n        <\/tr>\r\n      <\/thead>\r\n      <tbody>\r\n        <tr>\r\n          <td>Modules Covered<\/td>\r\n          <td>Basic Concepts Only<\/td>\r\n          <td>Complete Beginners to Advanced UI UX Design Modules<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Tools Exposure<\/td>\r\n          <td>Access to Limited Tools<\/td>\r\n          <td>Training on Advanced tools like Figma, Zeplin, Miro, ProtoPie, Hotjar, Behance<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Practical Experience<\/td>\r\n          <td>Basic Assignments Only<\/td>\r\n          <td>Live Projects + Real Case Studies<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Portfolio Strength<\/td>\r\n          <td>Beginner Level<\/td>\r\n          <td>Industry-ready Portfolio<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Job Readiness<\/td>\r\n          <td>No Job Ready Training<\/td>\r\n          <td>Fully Job Ready<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Freelancing Skills<\/td>\r\n          <td>Not Covered<\/td>\r\n          <td>Fully Covered<\/td>\r\n        <\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n\r\n  <!-- Mobile Stacked Comparison Cards -->\r\n  <div class=\"seo-mobile-stacked\">\r\n    <div class=\"seo-stacked-row-card\">\r\n      <span class=\"seo-stacked-factor-title\">Modules Covered<\/span>\r\n      <div class=\"seo-stacked-val-box short\">\r\n        <span class=\"seo-stacked-val-label\">3-Month Course<\/span>\r\n        Basic Concepts Only\r\n      <\/div>\r\n      <div class=\"seo-stacked-val-box long\">\r\n        <span class=\"seo-stacked-val-label\">6-Month Course (Advanced)<\/span>\r\n        Complete Beginners to Advanced UI UX Design Modules\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"seo-stacked-row-card\">\r\n      <span class=\"seo-stacked-factor-title\">Tools Exposure<\/span>\r\n      <div class=\"seo-stacked-val-box short\">\r\n        <span class=\"seo-stacked-val-label\">3-Month Course<\/span>\r\n        Access to Limited Tools\r\n      <\/div>\r\n      <div class=\"seo-stacked-val-box long\">\r\n        <span class=\"seo-stacked-val-label\">6-Month Course (Advanced)<\/span>\r\n        Training on Advanced tools like Figma, Zeplin, Miro, ProtoPie, Hotjar, Behance\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"seo-stacked-row-card\">\r\n      <span class=\"seo-stacked-factor-title\">Practical Experience<\/span>\r\n      <div class=\"seo-stacked-val-box short\">\r\n        <span class=\"seo-stacked-val-label\">3-Month Course<\/span>\r\n        Basic Assignments Only\r\n      <\/div>\r\n      <div class=\"seo-stacked-val-box long\">\r\n        <span class=\"seo-stacked-val-label\">6-Month Course (Advanced)<\/span>\r\n        Live Projects + Real Case Studies\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"seo-stacked-row-card\">\r\n      <span class=\"seo-stacked-factor-title\">Portfolio Strength<\/span>\r\n      <div class=\"seo-stacked-val-box short\">\r\n        <span class=\"seo-stacked-val-label\">3-Month Course<\/span>\r\n        Beginner Level\r\n      <\/div>\r\n      <div class=\"seo-stacked-val-box long\">\r\n        <span class=\"seo-stacked-val-label\">6-Month Course (Advanced)<\/span>\r\n        Industry-ready Portfolio\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"seo-stacked-row-card\">\r\n      <span class=\"seo-stacked-factor-title\">Job Readiness<\/span>\r\n      <div class=\"seo-stacked-val-box short\">\r\n        <span class=\"seo-stacked-val-label\">3-Month Course<\/span>\r\n        No Job Ready Training\r\n      <\/div>\r\n      <div class=\"seo-stacked-val-box long\">\r\n        <span class=\"seo-stacked-val-label\">6-Month Course (Advanced)<\/span>\r\n        Fully Job Ready\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"seo-stacked-row-card\">\r\n      <span class=\"seo-stacked-factor-title\">Freelancing Skills<\/span>\r\n      <div class=\"seo-stacked-val-box short\">\r\n        <span class=\"seo-stacked-val-label\">3-Month Course<\/span>\r\n        Not Covered\r\n      <\/div>\r\n      <div class=\"seo-stacked-val-box long\">\r\n        <span class=\"seo-stacked-val-label\">6-Month Course (Advanced)<\/span>\r\n        Fully Covered\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Two Premium Comparison Cards Below Table -->\r\n  <div class=\"seo-cards-comparison-grid\">\r\n    <!-- Card 1: 3-Month Course -->\r\n    <section class=\"seo-comp-card warning\">\r\n      <span class=\"seo-comp-card-badge\">Short-Term Program<\/span>\r\n      <section class=\"seo-comp-card-title\">3-Month Course<\/section>\r\n      <p class=\"seo-impact-intro\" style=\"margin-bottom: 0;\">\r\n        Short-term courses are ideal for beginners who just want a quick training on UI UX design basic concepts. You will get a basic idea of topics with limited tools training, practical experience, and limited or no real design project experience. These courses don\u2019t make you fully job-ready. That\u2019s the major drawback of these short courses.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Card 2: 6-Month Advanced Course -->\r\n    <section class=\"seo-comp-card success\">\r\n      <span class=\"seo-comp-card-badge\">Comprehensive Program<\/span>\r\n      <section class=\"seo-comp-card-title\">6-Month Advanced Course<\/section>\r\n      <p class=\"seo-impact-intro\" style=\"margin-bottom: 0;\">\r\n        On the other hand, a long-term UI UX Design Course delivers a more detailed industry-led program. You will get complete UI UX Design training on modern design tools, frameworks, libraries, and work on real-world client projects with placement support. Long-duration courses transform you into a job-ready candidate for this modern digital design world.\r\n      <\/p>\r\n    <\/section>\r\n  <\/div>\r\n\r\n  <!-- Bottom Editorial Recommendation & Quick Decision Box -->\r\n  <section class=\"seo-rec-box\">\r\n    <div>\r\n      <span class=\"seo-rec-badge\">Editorial Recommendation<\/span>\r\n      <section class=\"seo-rec-title\" style=\"margin-top: 8px;\">Editorial Recommendation<\/section>\r\n    <\/div>\r\n    \r\n    <p class=\"seo-rec-text-light\">\r\n      If you want to become an UI UX Designer, a short-term course in not recommended. You need complete hands-on training, advanced skills, and real-worth projects exposure.\r\n    <\/p>\r\n\r\n    <div class=\"seo-quick-decision\">\r\n      <span class=\"seo-quick-decision-title\">Quick Decision Box<\/span>\r\n      <p class=\"seo-rec-text\">\r\n        <a href=\"https:\/\/www.w3webschool.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-impact-link\" style=\"color: #60A5FA;\">W3 Web School<\/a>\u2019s <a href=\"https:\/\/www.w3webschool.com\/ui-ux-design-course-in-kolkata\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-impact-link\" style=\"color: #60A5FA;\">UI UX Design Course in Kolkata<\/a> is designed to prepare you a job-ready candidate with live client project experience.\r\n      <\/p>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c2aad2e elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"c2aad2e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-090d999\" data-id=\"090d999\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-90ed6cc elementor-widget elementor-widget-html\" data-id=\"90ed6cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .seo-stats-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-stats-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 24px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Section Title *\/\r\n  .seo-stats-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 16px;\r\n    display: block;\r\n  }\r\n\r\n  \/* Main Card *\/\r\n  .seo-stat-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 24px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n    border-left: 4px solid #2563EB;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .seo-stat-desc {\r\n    font-size: 14.5px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n  }\r\n\r\n  .seo-stats-link {\r\n    color: #2563EB;\r\n    font-weight: 600;\r\n    text-decoration: underline;\r\n    transition: color 0.15s ease;\r\n  }\r\n\r\n  .seo-stats-link:hover {\r\n    color: #1D4ED8;\r\n  }\r\n\r\n  \/* Insight Bottom Card *\/\r\n  .seo-insight-card {\r\n    background: #0F172A;\r\n    border-radius: 12px;\r\n    padding: 14px 20px;\r\n    color: #94A3B8;\r\n    font-size: 12.5px;\r\n    line-height: 1.5;\r\n    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);\r\n  }\r\n\r\n  \/* Mobile Breakpoints *\/\r\n  @media (max-width: 550px) {\r\n    .seo-stats-wrapper {\r\n      padding: 16px 10px;\r\n    }\r\n\r\n    .seo-stats-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .seo-stat-card {\r\n      padding: 16px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .seo-stat-desc {\r\n      font-size: 13.5px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-stats-wrapper\">\r\n\r\n  <!-- Section Title -->\r\n  <section class=\"seo-stats-title\">UI UX Industry Statistics (2026)<\/section>\r\n\r\n  <!-- Content Card -->\r\n  <section class=\"seo-stat-card\">\r\n    <p class=\"seo-stat-desc\">\r\n      According to <a href=\"https:\/\/www.ambitionbox.com\/profile\/ui-or-ux-designer-salary\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-stats-link\">Ambitionbox<\/a>, a fresher UI UX Designer in India can get up to \u20b94.4 lac to \u20b94.9 Lacs per annum, and it can depend on years of working.\r\n      <br><br>\r\n      The <a href=\"https:\/\/www.ambitionbox.com\/profile\/ui-or-ux-designer-salary\/kolkata-location\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-stats-link\">Ambitionbox<\/a> also reveals that an UI UX Designer fresher can earn up to \u20b94.7 lacs annual package in Kolkata, West Bengal.\r\n    <\/p>\r\n  <\/section>\r\n\r\n  <!-- Bottom Insight Card -->\r\n  <section class=\"seo-insight-card\">\r\n    The numbers above are illustrative placeholders and can be updated with the latest verified industry data.\r\n  <\/section>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e444568 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"e444568\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-901e00d\" data-id=\"901e00d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-639ebac elementor-widget elementor-widget-html\" data-id=\"639ebac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .seo-benefits-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-benefits-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 32px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Section Title & Intro *\/\r\n  .seo-benefits-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 12px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-benefits-intro {\r\n    font-size: 14.5px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .seo-benefits-link {\r\n    color: #2563EB;\r\n    font-weight: 600;\r\n    text-decoration: underline;\r\n    transition: color 0.15s ease;\r\n  }\r\n\r\n  .seo-benefits-link:hover {\r\n    color: #1D4ED8;\r\n  }\r\n\r\n  \/* Bullets Card Container *\/\r\n  .seo-bullets-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 24px 28px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .seo-benefits-list {\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n\r\n  .seo-benefits-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 12px;\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n  }\r\n\r\n  .seo-bullet-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: #2563EB;\r\n    border-radius: 50%;\r\n    margin-top: 8px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .seo-item-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n  }\r\n\r\n  \/* Bottom Expert Insight Card *\/\r\n  .seo-expert-card {\r\n    background: #0F172A;\r\n    border-radius: 20px;\r\n    padding: 24px;\r\n    color: #FFFFFF;\r\n    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);\r\n    border-left: 4px solid #2563EB;\r\n  }\r\n\r\n  .seo-expert-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #38BDF8;\r\n    background: rgba(56, 189, 248, 0.1);\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .seo-expert-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    color: #FFFFFF;\r\n    margin-bottom: 8px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-expert-desc {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #94A3B8;\r\n  }\r\n\r\n  \/* Responsive Design *\/\r\n  @media (max-width: 550px) {\r\n    .seo-benefits-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .seo-benefits-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .seo-bullets-card {\r\n      border-radius: 16px;\r\n      padding: 18px;\r\n    }\r\n\r\n    .seo-expert-card {\r\n      border-radius: 16px;\r\n      padding: 18px;\r\n    }\r\n\r\n    .seo-benefits-item {\r\n      font-size: 13.5px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-benefits-wrapper\">\r\n\r\n  <!-- Section Title & Intro -->\r\n  <section class=\"seo-benefits-title\">Benefits of Learning UI UX Design<\/section>\r\n  <p class=\"seo-benefits-intro\">\r\n    UI\/UX Design is one of the fastest-growing career fields in the digital industry. A well-structured UI UX Design course helps you learn practical skills, build a strong portfolio, and prepare for real design projects. Whether you want a full-time job or freelance opportunities, these skills can open multiple career paths. To explore more about career scope, read our detailed guide on <a href=\"https:\/\/www.w3webschool.com\/blog\/is-ui-ux-design-a-good-career\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-benefits-link\">is UI UX design a good career<\/a>.\r\n  <\/p>\r\n\r\n  <!-- Bullet Points Container -->\r\n  <div class=\"seo-bullets-card\">\r\n    <ul class=\"seo-benefits-list\">\r\n      <li class=\"seo-benefits-item\">\r\n        <span class=\"seo-bullet-dot\"><\/span>\r\n        <div>\r\n          <span class=\"seo-item-title\">Practical Skills:<\/span> Learn how to solve real user problems through user research, wireframing, prototyping, and interface design.\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"seo-benefits-item\">\r\n        <span class=\"seo-bullet-dot\"><\/span>\r\n        <div>\r\n          <span class=\"seo-item-title\">Industry-Standard Tools:<\/span> Gain hands-on experience with tools like Figma, Adobe XD, Framer, Miro, and other popular design platforms.\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"seo-benefits-item\">\r\n        <span class=\"seo-bullet-dot\"><\/span>\r\n        <div>\r\n          <span class=\"seo-item-title\">Portfolio Development:<\/span> Build real-world projects and UX case studies that showcase your skills to recruiters and clients.\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"seo-benefits-item\">\r\n        <span class=\"seo-bullet-dot\"><\/span>\r\n        <div>\r\n          <span class=\"seo-item-title\">Better Career Opportunities:<\/span> Qualify for roles such as UI Designer, UX Designer, Product Designer, and Interaction Designer across various industries.\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"seo-benefits-item\">\r\n        <span class=\"seo-bullet-dot\"><\/span>\r\n        <div>\r\n          <span class=\"seo-item-title\">Freelancing Opportunities:<\/span> Work with startups, agencies, or international clients by creating websites, mobile apps, and digital product designs.\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"seo-benefits-item\">\r\n        <span class=\"seo-bullet-dot\"><\/span>\r\n        <div>\r\n          <span class=\"seo-item-title\">High Industry Demand:<\/span> As businesses continue to build digital products, skilled UI\/UX designers remain in strong demand across the IT industry.\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"seo-benefits-item\">\r\n        <span class=\"seo-bullet-dot\"><\/span>\r\n        <div>\r\n          <span class=\"seo-item-title\">Continuous Career Growth:<\/span> With experience, you can progress from Junior UI\/UX Designer to Senior Designer, Product Designer, or Design Lead.\r\n        <\/div>\r\n      <\/li>\r\n    <\/ul>\r\n  <\/div>\r\n\r\n  <!-- Small Expert Insight Card -->\r\n  <section class=\"seo-expert-card\">\r\n    <span class=\"seo-expert-badge\">Expert Insight<\/span>\r\n    <section class=\"seo-expert-title\">Expert Insight<\/section>\r\n    <p class=\"seo-expert-desc\">\r\n      Learning design software is only the first step. The biggest career advantage comes from building a strong portfolio with real projects, as recruiters usually evaluate your practical work before your certificates.\r\n    <\/p>\r\n  <\/section>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4eb5ba7 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4eb5ba7\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9468d70\" data-id=\"9468d70\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ff6cc52 elementor-widget elementor-widget-html\" data-id=\"ff6cc52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .seo-checklist-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-checklist-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 32px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Section Title & Intro *\/\r\n  .seo-checklist-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 12px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-checklist-intro {\r\n    font-size: 14.5px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  \/* Checklist Grid *\/\r\n  .seo-checklist-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 16px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  \/* Green Accent Checklist Card *\/\r\n  .seo-check-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    padding: 20px 24px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n    border-left: 4px solid #10B981;\r\n    display: flex;\r\n    flex-direction: column;\r\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\r\n  }\r\n\r\n  .seo-check-card:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);\r\n    border-color: #CBD5E1;\r\n    border-left-color: #10B981;\r\n  }\r\n\r\n  .seo-check-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .seo-check-icon {\r\n    font-size: 16px;\r\n    line-height: 1;\r\n  }\r\n\r\n  .seo-check-item-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n  }\r\n\r\n  .seo-check-desc {\r\n    font-size: 13.5px;\r\n    line-height: 1.5;\r\n    color: #475569;\r\n  }\r\n\r\n  \/* Quick Tip \/ Decision Card *\/\r\n  .seo-quick-tip-card {\r\n    background: #0F172A;\r\n    border-radius: 20px;\r\n    padding: 24px;\r\n    color: #FFFFFF;\r\n    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);\r\n    border-left: 4px solid #10B981;\r\n  }\r\n\r\n  .seo-tip-badge {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #34D399;\r\n    background: rgba(52, 211, 153, 0.1);\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    display: inline-block;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .seo-tip-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    color: #FFFFFF;\r\n    margin-bottom: 8px;\r\n    display: block;\r\n  }\r\n\r\n  .seo-tip-desc {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: #94A3B8;\r\n  }\r\n\r\n  \/* Responsive Design *\/\r\n  @media (max-width: 768px) {\r\n    .seo-checklist-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 12px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 550px) {\r\n    .seo-checklist-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .seo-checklist-title {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .seo-check-card {\r\n      border-radius: 16px;\r\n      padding: 16px;\r\n    }\r\n\r\n    .seo-quick-tip-card {\r\n      border-radius: 16px;\r\n      padding: 18px;\r\n    }\r\n\r\n    .seo-check-item-title {\r\n      font-size: 15px;\r\n    }\r\n\r\n    .seo-check-desc {\r\n      font-size: 13px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-checklist-wrapper\">\r\n\r\n  <!-- Section Title & Intro -->\r\n  <section class=\"seo-checklist-title\">Before Joining a UI UX Design Course<\/section>\r\n  <p class=\"seo-checklist-intro\">\r\n    Choosing the right UI\/UX course is just as important as learning the skills. Before enrolling, make sure the course matches your career goals and provides practical training, real projects, and portfolio support.\r\n  <\/p>\r\n\r\n  <!-- Green Checklist Cards Grid -->\r\n  <div class=\"seo-checklist-grid\">\r\n\r\n    <!-- Item 1 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Clear career goals<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        Know whether you want a job, freelance career, or career switch.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Item 2 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Industry-standard tools<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        Ensure the course includes Figma, Framer, Miro, and other modern design tools.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Item 3 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Real-world projects<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        Choose a course that offers hands-on assignments and live case studies.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Item 4 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Portfolio support<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        A strong portfolio is essential for interviews and freelance opportunities.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Item 5 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Mentor guidance<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        Learn from experienced designers with practical industry knowledge.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Item 6 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Placement assistance<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        Check if the institute provides interview preparation and career support.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Item 7 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Flexible learning options<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        Choose online or classroom training based on your schedule.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <!-- Item 8 -->\r\n    <section class=\"seo-check-card\">\r\n      <div class=\"seo-check-header\">\r\n        <span class=\"seo-check-icon\">\u2705<\/span>\r\n        <section class=\"seo-check-item-title\">Student reviews<\/section>\r\n      <\/div>\r\n      <p class=\"seo-check-desc\">\r\n        Read genuine reviews and success stories before making your decision.\r\n      <\/p>\r\n    <\/section>\r\n\r\n  <\/div>\r\n\r\n  <!-- Bottom Quick Tip \/ Decision Card -->\r\n  <section class=\"seo-quick-tip-card\">\r\n    <span class=\"seo-tip-badge\">Quick Tip<\/span>\r\n    <section class=\"seo-tip-title\">Quick Tip<\/section>\r\n    <p class=\"seo-tip-desc\">\r\n      Don't choose a course based only on fees. Focus on practical learning, portfolio development, mentor support, and placement assistance to become job-ready.\r\n    <\/p>\r\n  <\/section>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3679d5b elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"3679d5b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6c75786\" data-id=\"6c75786\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-14f7bc4 elementor-widget elementor-widget-html\" data-id=\"14f7bc4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FAQ Schema Markup (JSON-LD for Ultra SEO) -->\r\n<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"How long will it take to become a skilled UI UX Designer?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Usually, a UI UX design course takes 6 months to complete. With real client projects and a strong portfolio, you will become job-ready in just 6 months.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Does a UI UX Certification help you get a job?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Yes, of course. A UI UX design certification can help a learner catch the attention of employers, as the design field is growing rapidly. However, a robust design portfolio and hands-on live projects are major factors.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Is coding knowledge essential for UI UX design?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"No, coding is not essential for UI UX designers. Many designers often don\u2019t feel the need to write code while designing. If you have basic knowledge of HTML and CSS, this might help you communicate effectively with developers. This boosts your design decisions.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"What are the different job opportunities I can get after the UI UX Design course completion?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Some institutions do not offer 100% placements. The majority of them provide 100% job assistance to students once the UI UX course is completed. The different job opportunities they can get are: UI UX Designer, UX Writer, UX Researcher, Product Designer, Usability Analyst, Creative Designer, Interaction Designer, UX Strategist, and Information Architect.\"\r\n      }\r\n    }\r\n  ]\r\n}\r\n<\/script>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .seo-faq-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-faq-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 32px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Section Title *\/\r\n  .seo-faq-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 24px;\r\n    display: block;\r\n  }\r\n\r\n  \/* FAQ List Container *\/\r\n  .seo-faq-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n\r\n  \/* Pure CSS Accordion Item *\/\r\n  .seo-faq-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n    overflow: hidden;\r\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\r\n  }\r\n\r\n  .seo-faq-card:hover {\r\n    border-color: #CBD5E1;\r\n    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);\r\n  }\r\n\r\n  \/* Hidden Checkbox Controller *\/\r\n  .seo-faq-toggle {\r\n    display: none;\r\n  }\r\n\r\n  \/* Question Header (Clickable Area) *\/\r\n  .seo-faq-question {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 16.5px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    padding: 20px 24px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    line-height: 1.4;\r\n  }\r\n\r\n  \/* Plus\/Minus Pure CSS Icon *\/\r\n  .seo-faq-icon {\r\n    width: 28px;\r\n    height: 28px;\r\n    background: #F1F5F9;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    margin-left: 16px;\r\n    transition: background 0.2s ease, transform 0.2s ease;\r\n    position: relative;\r\n  }\r\n\r\n  .seo-faq-icon::before,\r\n  .seo-faq-icon::after {\r\n    content: '';\r\n    position: absolute;\r\n    background-color: #0F172A;\r\n    border-radius: 2px;\r\n    transition: transform 0.2s ease;\r\n  }\r\n\r\n  \/* Horizontal bar *\/\r\n  .seo-faq-icon::before {\r\n    width: 12px;\r\n    height: 2px;\r\n  }\r\n\r\n  \/* Vertical bar *\/\r\n  .seo-faq-icon::after {\r\n    width: 2px;\r\n    height: 12px;\r\n  }\r\n\r\n  \/* Answer Content Container *\/\r\n  .seo-faq-answer {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;\r\n    padding: 0 24px;\r\n    font-size: 14.5px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n  }\r\n\r\n  \/* Open State Styles (Pure CSS :checked magic) *\/\r\n  .seo-faq-toggle:checked ~ .seo-faq-question {\r\n    color: #2563EB;\r\n  }\r\n\r\n  .seo-faq-toggle:checked ~ .seo-faq-question .seo-faq-icon {\r\n    background: #EFF6FF;\r\n    color: #2563EB;\r\n  }\r\n\r\n  .seo-faq-toggle:checked ~ .seo-faq-question .seo-faq-icon::after {\r\n    transform: rotate(90deg);\r\n    opacity: 0;\r\n  }\r\n\r\n  .seo-faq-toggle:checked ~ .seo-faq-question .seo-faq-icon::before {\r\n    background-color: #2563EB;\r\n  }\r\n\r\n  .seo-faq-toggle:checked ~ .seo-faq-answer {\r\n    max-height: 500px; \/* Big enough to fit long text *\/\r\n    padding: 0 24px 20px 24px;\r\n    transition: max-height 0.3s ease-in-out, padding 0.3s ease;\r\n  }\r\n\r\n  \/* Responsive Adjustments *\/\r\n  @media (max-width: 550px) {\r\n    .seo-faq-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .seo-faq-title {\r\n      font-size: 20px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .seo-faq-card {\r\n      border-radius: 12px;\r\n    }\r\n\r\n    .seo-faq-question {\r\n      font-size: 14.5px;\r\n      padding: 16px;\r\n    }\r\n\r\n    .seo-faq-answer {\r\n      padding: 0 16px;\r\n      font-size: 13.5px;\r\n    }\r\n\r\n    .seo-faq-toggle:checked ~ .seo-faq-answer {\r\n      padding: 0 16px 16px 16px;\r\n    }\r\n\r\n    .seo-faq-icon {\r\n      width: 24px;\r\n      height: 24px;\r\n      margin-left: 12px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-faq-wrapper\">\r\n\r\n  <!-- Section Title -->\r\n  <section class=\"seo-faq-title\">Frequently Asked Questions<\/section>\r\n\r\n  <!-- Accordion List -->\r\n  <div class=\"seo-faq-list\">\r\n\r\n    <!-- FAQ Item 1 -->\r\n    <section class=\"seo-faq-card\">\r\n      <input type=\"checkbox\" id=\"faq-1\" class=\"seo-faq-toggle\">\r\n      <label for=\"faq-1\" class=\"seo-faq-question\">\r\n        <span>How long will it take to become a skilled UI UX Designer?<\/span>\r\n        <span class=\"seo-faq-icon\"><\/span>\r\n      <\/label>\r\n      <div class=\"seo-faq-answer\">\r\n        <p>Usually, a UI UX design course takes 6 months to complete. With real client projects and a strong portfolio, you will become job-ready in just 6 months.<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- FAQ Item 2 -->\r\n    <section class=\"seo-faq-card\">\r\n      <input type=\"checkbox\" id=\"faq-2\" class=\"seo-faq-toggle\">\r\n      <label for=\"faq-2\" class=\"seo-faq-question\">\r\n        <span>Does a UI UX Certification help you get a job?<\/span>\r\n        <span class=\"seo-faq-icon\"><\/span>\r\n      <\/label>\r\n      <div class=\"seo-faq-answer\">\r\n        <p>Yes, of course. A UI UX design certification can help a learner catch the attention of employers, as the design field is growing rapidly. However, a robust design portfolio and hands-on live projects are major factors.<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- FAQ Item 3 -->\r\n    <section class=\"seo-faq-card\">\r\n      <input type=\"checkbox\" id=\"faq-3\" class=\"seo-faq-toggle\">\r\n      <label for=\"faq-3\" class=\"seo-faq-question\">\r\n        <span>Is coding knowledge essential for UI UX design?<\/span>\r\n        <span class=\"seo-faq-icon\"><\/span>\r\n      <\/label>\r\n      <div class=\"seo-faq-answer\">\r\n        <p>No, coding is not essential for UI UX designers. Many designers often don\u2019t feel the need to write code while designing. If you have basic knowledge of HTML and CSS, this might help you communicate effectively with developers. This boosts your design decisions.<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- FAQ Item 4 -->\r\n    <section class=\"seo-faq-card\">\r\n      <input type=\"checkbox\" id=\"faq-4\" class=\"seo-faq-toggle\">\r\n      <label for=\"faq-4\" class=\"seo-faq-question\">\r\n        <span>What are the different job opportunities I can get after the UI UX Design course completion?<\/span>\r\n        <span class=\"seo-faq-icon\"><\/span>\r\n      <\/label>\r\n      <div class=\"seo-faq-answer\">\r\n        <p>Some institutions do not offer 100% placements. The majority of them provide 100% job assistance to students once the UI UX course is completed. The different job opportunities they can get are: UI UX Designer, UX Writer, UX Researcher, Product Designer, Usability Analyst, Creative Designer, Interaction Designer, UX Strategist, and Information Architect.<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2730097 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"2730097\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7096d85\" data-id=\"7096d85\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1391c35 elementor-widget elementor-widget-html\" data-id=\"1391c35\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');\r\n\r\n  .seo-final-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .seo-final-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 32px 16px;\r\n    background-color: #FAFAFC;\r\n    color: #334155;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Main Card with Rounded Corners & Border *\/\r\n  .seo-final-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 24px;\r\n    padding: 36px 32px;\r\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);\r\n  }\r\n\r\n  \/* Section Title *\/\r\n  .seo-final-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    color: #0F172A;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.01em;\r\n    margin-bottom: 20px;\r\n    display: block;\r\n  }\r\n\r\n  \/* Content Paragraphs *\/\r\n  .seo-final-content {\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n    color: #475569;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  .seo-final-content p {\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .seo-final-content p:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .seo-final-link {\r\n    color: #2563EB;\r\n    font-weight: 600;\r\n    text-decoration: underline;\r\n    transition: color 0.15s ease;\r\n  }\r\n\r\n  .seo-final-link:hover {\r\n    color: #1D4ED8;\r\n  }\r\n\r\n  \/* Motivational Quote Card *\/\r\n  .seo-quote-card {\r\n    background: #F8FAFC;\r\n    border: 1px solid #E2E8F0;\r\n    border-left: 4px solid #2563EB;\r\n    border-radius: 16px;\r\n    padding: 20px 24px;\r\n  }\r\n\r\n  .seo-quote-text {\r\n    font-family: 'Roboto', sans-serif;\r\n    font-style: italic;\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    color: #0F172A;\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* Responsive Adjustments *\/\r\n  @media (max-width: 550px) {\r\n    .seo-final-wrapper {\r\n      padding: 20px 12px;\r\n    }\r\n\r\n    .seo-final-card {\r\n      border-radius: 18px;\r\n      padding: 24px 18px;\r\n    }\r\n\r\n    .seo-final-title {\r\n      font-size: 20px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .seo-final-content {\r\n      font-size: 14px;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .seo-quote-card {\r\n      border-radius: 12px;\r\n      padding: 16px 18px;\r\n    }\r\n\r\n    .seo-quote-text {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"seo-final-wrapper\">\r\n\r\n  <!-- Main Box with Rounded Corners & Border -->\r\n  <section class=\"seo-final-card\">\r\n\r\n    <!-- Section Title -->\r\n    <section class=\"seo-final-title\">Final Thoughts<\/section>\r\n\r\n    <!-- Main Content Paragraphs -->\r\n    <div class=\"seo-final-content\">\r\n      <p>\r\n        The detailed UI UX Design Course Syllabus highlighted above guides students or interested learners who want to start their creative journey in the digital design field. Step into a UI UX design journey where each topic takes you one step closer to designing engaging and user-intuitive interfaces.\r\n      <\/p>\r\n      <p>\r\n        I hope I have discussed all the important modules that a <a href=\"https:\/\/www.w3webschool.com\/ui-ux-design-course\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"seo-final-link\">UI UX Design course in Kolkata<\/a> should cover in the article. I have also mentioned the course duration, fees, and tools above.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Motivational Editorial Quote Card -->\r\n    <section class=\"seo-quote-card\">\r\n      <p class=\"seo-quote-text\">\r\n        Happy reading.\r\n      <\/p>\r\n    <\/section>\r\n\r\n  <\/section>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4ca9594 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4ca9594\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-30bf9b6\" data-id=\"30bf9b6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3cd935e elementor-widget elementor-widget-html\" data-id=\"3cd935e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- EEAT Author Bio Card (Elementor HTML Widget Compatible) -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@500;600;700;800&family=Roboto:wght@400;500&display=swap');\r\n\r\n  .w3-author-card * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .w3-author-card {\r\n    background: #ffffff;\r\n    border: 1.5px dashed #cbd5e1;\r\n    border-radius: 16px;\r\n    padding: 32px 16px;\r\n    box-shadow: 0 10px 25px -5px rgba(148, 163, 184, 0.1), 0 8px 10px -6px rgba(148, 163, 184, 0.1);\r\n    font-family: 'Roboto', sans-serif;\r\n    color: #334155;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    box-sizing: border-box;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  \/* Main Layout *\/\r\n  .w3-author-header {\r\n    display: flex;\r\n    gap: 24px;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .w3-author-avatar-wrap {\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  \/* Square Image Modification *\/\r\n  .w3-author-avatar {\r\n    width: 90px !important;\r\n    height: 90px !important;\r\n    border-radius: 8px !important;\r\n    object-fit: cover;\r\n    border: 3px solid #eff6ff !important;\r\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n    display: block;\r\n  }\r\n\r\n  .w3-author-content {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  \/* Badge *\/\r\n  .w3-verified-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    background-color: #eff6ff;\r\n    color: #1d4ed8;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    padding: 4px 10px;\r\n    border-radius: 20px;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .w3-verified-badge svg {\r\n    width: 12px;\r\n    height: 12px;\r\n    fill: currentColor;\r\n  }\r\n\r\n  \/* Typography Replacement: Section Tags instead of Heading Tags *\/\r\n  .w3-section-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: #64748b;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    margin-bottom: 4px;\r\n    display: block;\r\n  }\r\n\r\n  .w3-author-name-row {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 2px;\r\n  }\r\n\r\n  .w3-author-name {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    color: #0f172a;\r\n    line-height: 1.2;\r\n    display: block;\r\n  }\r\n\r\n  .w3-blue-tick {\r\n    width: 20px;\r\n    height: 20px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .w3-author-role {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    color: #2563eb;\r\n    margin-bottom: 16px;\r\n    display: block;\r\n  }\r\n\r\n  \/* Meta Info Row *\/\r\n  .w3-author-meta {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 16px;\r\n    padding: 12px 16px;\r\n    background-color: #f8fafc;\r\n    border-radius: 8px;\r\n    border: 1px solid #f1f5f9;\r\n    font-size: 13px;\r\n    color: #475569;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .w3-meta-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .w3-meta-item strong {\r\n    font-family: 'Manrope', sans-serif;\r\n    color: #0f172a;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .w3-meta-divider {\r\n    color: #cbd5e1;\r\n  }\r\n\r\n  \/* Bio Text *\/\r\n  .w3-author-bio {\r\n    font-size: 15px;\r\n    line-height: 1.65;\r\n    color: #334155;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .w3-author-bio p {\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .w3-author-bio p:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  \/* Editorial Standards Sub-box *\/\r\n  .w3-standards-box {\r\n    background: #fafafa;\r\n    border: 1px solid #e2e8f0;\r\n    border-left: 4px solid #2563eb;\r\n    border-radius: 0 8px 8px 0;\r\n    padding: 16px 20px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .w3-standards-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: #0f172a;\r\n    margin-bottom: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .w3-standards-text {\r\n    font-size: 13px;\r\n    line-height: 1.6;\r\n    color: #475569;\r\n  }\r\n\r\n  \/* Actions \/ Social Placeholder Row *\/\r\n  .w3-author-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .w3-linkedin-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 10px 20px;\r\n    border: 1.5px solid #0a66c2;\r\n    border-radius: 8px;\r\n    background-color: #ffffff;\r\n    color: #0a66c2;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    text-decoration: none;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .w3-linkedin-btn:hover {\r\n    background-color: #0a66c2;\r\n    color: #ffffff;\r\n    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.2);\r\n  }\r\n\r\n  .w3-linkedin-btn svg {\r\n    width: 18px;\r\n    height: 18px;\r\n    fill: currentColor;\r\n    transition: fill 0.2s ease;\r\n  }\r\n\r\n  \/* Mobile Responsive *\/\r\n  @media (max-width: 640px) {\r\n    .w3-author-card {\r\n      padding: 20px;\r\n    }\r\n\r\n    .w3-author-header {\r\n      flex-direction: column;\r\n      align-items: center;\r\n      text-align: center;\r\n    }\r\n\r\n    .w3-author-name-row {\r\n      justify-content: center;\r\n    }\r\n\r\n    .w3-author-meta {\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 8px;\r\n      text-align: center;\r\n    }\r\n\r\n    .w3-meta-divider {\r\n      display: none;\r\n    }\r\n\r\n    .w3-standards-box {\r\n      border-left: 1px solid #e2e8f0;\r\n      border-top: 4px solid #2563eb;\r\n      border-radius: 0 0 8px 8px;\r\n      text-align: left;\r\n    }\r\n\r\n    .w3-author-actions {\r\n      justify-content: center;\r\n    }\r\n\r\n    .w3-linkedin-btn {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"w3-author-card\">\r\n  <div class=\"w3-author-header\">\r\n    <div class=\"w3-author-avatar-wrap\">\r\n      <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/12\/Poulami-Dalal-scaled-1.webp\" alt=\"Poulami Dalal\" class=\"w3-author-avatar lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"http:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/12\/Poulami-Dalal-scaled-1.webp\" alt=\"Poulami Dalal\" class=\"w3-author-avatar\" loading=\"lazy\" title=\"\"><\/noscript>\r\n    <\/div>\r\n    \r\n    <div class=\"w3-author-content\">\r\n      <div class=\"w3-verified-badge\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/>\r\n        <\/svg>\r\n        Verified Author\r\n      <\/div>\r\n\r\n      <section class=\"w3-section-title\">About the Author<\/section>\r\n\r\n      <div class=\"w3-author-name-row\">\r\n        <section class=\"w3-author-name\">Poulami Dalal<\/section>\r\n        <svg class=\"w3-blue-tick\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#1D9BF0\"\/>\r\n          <path d=\"M9 12l2 2 4-4\" stroke=\"#FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <section class=\"w3-author-role\">Professional Content Writer<\/section>\r\n\r\n      <div class=\"w3-author-meta\">\r\n        <div class=\"w3-meta-item\">\r\n          <strong>Experience:<\/strong> 3+ Years\r\n        <\/div>\r\n        <span class=\"w3-meta-divider\">\u2022<\/span>\r\n        <div class=\"w3-meta-item\">\r\n          <strong>Content Type:<\/strong> SEO Blogs \u2022 Website Content \u2022 Career Guides\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"w3-author-bio\">\r\n        <p>Poulami Dalal is a professional content writer with more than three years of experience creating SEO-focused blogs, educational articles, website copy, and long-form career content. She specializes in simplifying complex topics into easy-to-understand, reader-friendly content that aligns with search intent and Google's EEAT principles.<\/p>\r\n        <p>Her writing is based on detailed research, industry trends, and practical digital marketing knowledge to ensure every article is accurate, trustworthy, and valuable for students, professionals, and job seekers.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"w3-standards-box\">\r\n        <section class=\"w3-standards-title\">\r\n          Writing & Editorial Standards\r\n        <\/section>\r\n        <div class=\"w3-standards-text\">\r\n          Every article written by Poulami Dalal follows a structured editorial workflow that includes topic research, fact verification, SEO optimization, readability checks, and periodic content updates. The goal is to provide helpful, trustworthy, and search-intent-focused information that delivers genuine value to readers.\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"w3-author-actions\">\r\n        <a href=\"https:\/\/www.linkedin.com\/in\/poulami-dalal\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"w3-linkedin-btn\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 10.9v8.37H9.2V10.9H6.46M7.83 6.74a1.6 1.6 0 0 0-1.6 1.6 1.6 1.6 0 0 0 1.6 1.6 1.6 1.6 0 0 0 1.6-1.6 1.6 1.6 0 0 0-1.6-1.6Z\"\/>\r\n          <\/svg>\r\n          View Verified LinkedIn Profile\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-73f3882 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"73f3882\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f199205\" data-id=\"f199205\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49d62d4 elementor-widget elementor-widget-html\" data-id=\"49d62d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');\r\n\r\n  .related-blogs-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .related-blogs-wrapper {\r\n    font-family: 'Roboto', sans-serif;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 60px 20px 40px 20px;\r\n    color: #0F172A;\r\n    background-color: #FFFFFF;\r\n    border-radius: 20px;\r\n    border: 1px solid #E2E8F0;\r\n    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);\r\n    -webkit-font-smoothing: antialiased;\r\n    position: relative;\r\n  }\r\n\r\n  .related-header-row {\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .related-section-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.08em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 6px 14px;\r\n    border-radius: 100px;\r\n    width: fit-content;\r\n    border: 1px solid rgba(37, 99, 235, 0.15);\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .related-main-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    color: #0F172A;\r\n    letter-spacing: -0.02em;\r\n  }\r\n\r\n  \/* Slider Container *\/\r\n  .related-slider-container {\r\n    display: flex;\r\n    gap: 28px;\r\n    overflow-x: auto;\r\n    scroll-behavior: smooth;\r\n    scroll-snap-type: x mandatory;\r\n    padding: 10px 4px 15px 4px;\r\n    -ms-overflow-style: none;\r\n    scrollbar-width: none;\r\n  }\r\n\r\n  .related-slider-container::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  \/* Card Styling *\/\r\n  .related-card {\r\n    flex: 0 0 calc(33.333% - 19px);\r\n    scroll-snap-align: start;\r\n    background: #FFFFFF;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);\r\n    display: flex;\r\n    flex-direction: column;\r\n    text-decoration: none;\r\n    color: inherit;\r\n    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n  }\r\n\r\n  .related-card:hover {\r\n    transform: translateY(-6px);\r\n    border-color: #2563EB;\r\n    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);\r\n  }\r\n\r\n  .related-thumb-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    aspect-ratio: 16 \/ 9;\r\n    overflow: hidden;\r\n    background: #F1F5F9;\r\n  }\r\n\r\n  .related-thumb-img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 0.4s ease;\r\n  }\r\n\r\n  .related-card:hover .related-thumb-img {\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .related-card-body {\r\n    padding: 24px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-grow: 1;\r\n  }\r\n\r\n  .related-meta-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .related-category {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #2563EB;\r\n    background: #EFF6FF;\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  .related-read-time {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-size: 13px;\r\n    color: #64748B;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .related-read-time svg {\r\n    width: 14px;\r\n    height: 14px;\r\n    stroke: #64748B;\r\n    stroke-width: 2;\r\n    fill: none;\r\n  }\r\n\r\n  .related-article-title {\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    line-height: 1.4;\r\n    color: #0F172A;\r\n    margin-bottom: 16px;\r\n    flex-grow: 1;\r\n    transition: color 0.2s ease;\r\n  }\r\n\r\n  .related-card:hover .related-article-title {\r\n    color: #2563EB;\r\n  }\r\n\r\n  .related-card-footer {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-family: 'Manrope', sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: #0F172A;\r\n    margin-top: auto;\r\n  }\r\n\r\n  .related-arrow-icon {\r\n    width: 16px;\r\n    height: 16px;\r\n    stroke: #0F172A;\r\n    stroke-width: 2.5;\r\n    fill: none;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n    transition: transform 0.2s ease, stroke 0.2s ease;\r\n  }\r\n\r\n  .related-card:hover .related-card-footer {\r\n    color: #2563EB;\r\n  }\r\n\r\n  .related-card:hover .related-arrow-icon {\r\n    transform: translateX(4px);\r\n    stroke: #2563EB;\r\n  }\r\n\r\n  \/* Bottom Dot Navigation (Mobile & Desktop Both) *\/\r\n  .slider-dots-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-top: 24px;\r\n    width: 100%;\r\n  }\r\n\r\n  .slider-dot {\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 100px;\r\n    background: #CBD5E1;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n  }\r\n\r\n  .slider-dot.active {\r\n    width: 32px;\r\n    background: #2563EB;\r\n  }\r\n\r\n  \/* Responsive Design *\/\r\n  @media (max-width: 992px) {\r\n    .related-card {\r\n      flex: 0 0 calc(50% - 14px);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .related-blogs-wrapper {\r\n      padding: 40px 16px 30px 16px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .related-header-row {\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .related-main-title {\r\n      font-size: 24px;\r\n    }\r\n\r\n    \/* Mobile Single Card View *\/\r\n    .related-slider-container {\r\n      gap: 16px;\r\n    }\r\n\r\n    .related-card {\r\n      flex: 0 0 88%;\r\n      scroll-snap-align: center;\r\n    }\r\n\r\n    .related-card-body {\r\n      padding: 18px;\r\n    }\r\n\r\n    .related-article-title {\r\n      font-size: 16px;\r\n    }\r\n\r\n    .slider-dots-container {\r\n      margin-top: 20px;\r\n    }\r\n\r\n    .slider-dot {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    .slider-dot.active {\r\n      width: 24px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"related-blogs-wrapper\">\r\n\r\n  <div class=\"related-header-row\">\r\n    <section class=\"related-section-tag\">Explore More<\/section>\r\n    <section class=\"related-main-title\">Related Articles<\/section>\r\n  <\/div>\r\n\r\n  <!-- Main Slider Container -->\r\n  <div class=\"related-slider-container\" id=\"blogsSlider\">\r\n\r\n    <!-- Card 1 -->\r\n    <a href=\"https:\/\/www.w3webschool.com\/blog\/ui-ux-designer-skills\/\" class=\"related-card\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <div class=\"related-thumb-wrap\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/07\/UIUX-Designer-Skills-1100x619.jpg\" alt=\"Essential UI UX Designer Skills\" class=\"related-thumb-img lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/07\/UIUX-Designer-Skills-1100x619.jpg\" alt=\"Essential UI UX Designer Skills\" class=\"related-thumb-img\" loading=\"lazy\" title=\"\"><\/noscript>\r\n      <\/div>\r\n      <div class=\"related-card-body\">\r\n        <div class=\"related-meta-row\">\r\n          <span class=\"related-category\">Skills Guide<\/span>\r\n          <span class=\"related-read-time\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n            6 min read\r\n          <\/span>\r\n        <\/div>\r\n        <section class=\"related-article-title\">Top Essential UI UX Designer Skills You Need in 2026<\/section>\r\n        <div class=\"related-card-footer\">\r\n          Read Article\r\n          <svg class=\"related-arrow-icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Card 2 -->\r\n    <a href=\"https:\/\/www.w3webschool.com\/blog\/ui-ux-designer-interview-questions\/\" class=\"related-card\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <div class=\"related-thumb-wrap\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2025\/12\/UIUX-Designer-Interview-Questions-1100x619.png\" alt=\"UI UX Designer Interview Questions\" class=\"related-thumb-img lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2025\/12\/UIUX-Designer-Interview-Questions-1100x619.png\" alt=\"UI UX Designer Interview Questions\" class=\"related-thumb-img\" loading=\"lazy\" title=\"\"><\/noscript>\r\n      <\/div>\r\n      <div class=\"related-card-body\">\r\n        <div class=\"related-meta-row\">\r\n          <span class=\"related-category\">Interview Prep<\/span>\r\n          <span class=\"related-read-time\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n            8 min read\r\n          <\/span>\r\n        <\/div>\r\n        <section class=\"related-article-title\">Top UI UX Designer Interview Questions & Expert Answers<\/section>\r\n        <div class=\"related-card-footer\">\r\n          Read Article\r\n          <svg class=\"related-arrow-icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Card 3 -->\r\n    <a href=\"https:\/\/www.w3webschool.com\/blog\/ui-ux-designer-resume\/\" class=\"related-card\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <div class=\"related-thumb-wrap\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/01\/UI-UX-Designer-Resume-1100x619.png\" alt=\"UI UX Designer Resume Guide\" class=\"related-thumb-img lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/01\/UI-UX-Designer-Resume-1100x619.png\" alt=\"UI UX Designer Resume Guide\" class=\"related-thumb-img\" loading=\"lazy\" title=\"\"><\/noscript>\r\n      <\/div>\r\n      <div class=\"related-card-body\">\r\n        <div class=\"related-meta-row\">\r\n          <span class=\"related-category\">Career Guide<\/span>\r\n          <span class=\"related-read-time\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n            5 min read\r\n          <\/span>\r\n        <\/div>\r\n        <section class=\"related-article-title\">How to Build an Impressive UI UX Designer Resume<\/section>\r\n        <div class=\"related-card-footer\">\r\n          Read Article\r\n          <svg class=\"related-arrow-icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Card 4 -->\r\n    <a href=\"https:\/\/www.w3webschool.com\/blog\/ui-ux-designer-salary-in-india\/\" class=\"related-card\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <div class=\"related-thumb-wrap\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/01\/UI-UX-Designer-Salary-in-India-1100x619.png\" alt=\"UI UX Designer Salary in India\" class=\"related-thumb-img lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/01\/UI-UX-Designer-Salary-in-India-1100x619.png\" alt=\"UI UX Designer Salary in India\" class=\"related-thumb-img\" loading=\"lazy\" title=\"\"><\/noscript>\r\n      <\/div>\r\n      <div class=\"related-card-body\">\r\n        <div class=\"related-meta-row\">\r\n          <span class=\"related-category\">Salary Insights<\/span>\r\n          <span class=\"related-read-time\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n            7 min read\r\n          <\/span>\r\n        <\/div>\r\n        <section class=\"related-article-title\">UI UX Designer Salary in India: Trends & Compensation Guide<\/section>\r\n        <div class=\"related-card-footer\">\r\n          Read Article\r\n          <svg class=\"related-arrow-icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Card 5 -->\r\n    <a href=\"https:\/\/www.w3webschool.com\/blog\/is-ui-ux-design-a-good-career\/\" class=\"related-card\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <div class=\"related-thumb-wrap\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/01\/Is-UI-UX-Design-a-Good-Career-1100x619.png\" alt=\"Is UI UX Design a Good Career\" class=\"related-thumb-img lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2026\/01\/Is-UI-UX-Design-a-Good-Career-1100x619.png\" alt=\"Is UI UX Design a Good Career\" class=\"related-thumb-img\" loading=\"lazy\" title=\"\"><\/noscript>\r\n      <\/div>\r\n      <div class=\"related-card-body\">\r\n        <div class=\"related-meta-row\">\r\n          <span class=\"related-category\">Career Choice<\/span>\r\n          <span class=\"related-read-time\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n            6 min read\r\n          <\/span>\r\n        <\/div>\r\n        <section class=\"related-article-title\">Is UI UX Design a Good Career Path? Scope & Growth<\/section>\r\n        <div class=\"related-card-footer\">\r\n          Read Article\r\n          <svg class=\"related-arrow-icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Card 6 -->\r\n    <a href=\"https:\/\/www.w3webschool.com\/blog\/future-of-ui-ux-design\/\" class=\"related-card\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <div class=\"related-thumb-wrap\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2025\/12\/The-Future-of-UI-UX-Design-1100x467.png\" alt=\"The Future of UI UX Design\" class=\"related-thumb-img lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2025\/12\/The-Future-of-UI-UX-Design-1100x467.png\" alt=\"The Future of UI UX Design\" class=\"related-thumb-img\" loading=\"lazy\" title=\"\"><\/noscript>\r\n      <\/div>\r\n      <div class=\"related-card-body\">\r\n        <div class=\"related-meta-row\">\r\n          <span class=\"related-category\">Industry Trends<\/span>\r\n          <span class=\"related-read-time\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n            8 min read\r\n          <\/span>\r\n        <\/div>\r\n        <section class=\"related-article-title\">The Future of UI UX Design: Key Trends Shaping the Industry<\/section>\r\n        <div class=\"related-card-footer\">\r\n          Read Article\r\n          <svg class=\"related-arrow-icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Card 7 -->\r\n    <a href=\"https:\/\/www.w3webschool.com\/blog\/ui-ux-tools\/\" class=\"related-card\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <div class=\"related-thumb-wrap\">\r\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/09\/UI-UX-Tools-1100x619.png\" alt=\"Essential UI UX Design Tools\" class=\"related-thumb-img lazyload\" loading=\"lazy\" title=\"\"><noscript><img decoding=\"async\" src=\"https:\/\/www.w3webschool.com\/blog\/wp-content\/uploads\/2024\/09\/UI-UX-Tools-1100x619.png\" alt=\"Essential UI UX Design Tools\" class=\"related-thumb-img\" loading=\"lazy\" title=\"\"><\/noscript>\r\n      <\/div>\r\n      <div class=\"related-card-body\">\r\n        <div class=\"related-meta-row\">\r\n          <span class=\"related-category\">Design Tools<\/span>\r\n          <span class=\"related-read-time\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n            7 min read\r\n          <\/span>\r\n        <\/div>\r\n        <section class=\"related-article-title\">Top Essential UI UX Design Tools Every Designer Must Know<\/section>\r\n        <div class=\"related-card-footer\">\r\n          Read Article\r\n          <svg class=\"related-arrow-icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n  <!-- Bottom Dots Navigation Container -->\r\n  <div class=\"slider-dots-container\" id=\"sliderDots\"><\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    const slider = document.getElementById('blogsSlider');\r\n    const dotsContainer = document.getElementById('sliderDots');\r\n    const cards = slider.querySelectorAll('.related-card');\r\n\r\n    if (slider && cards.length > 0) {\r\n      \r\n      const getCardsPerView = () => {\r\n        if (window.innerWidth <= 640) return 1;\r\n        if (window.innerWidth <= 992) return 2;\r\n        return 3;\r\n      };\r\n\r\n      const getGap = () => {\r\n        return window.innerWidth <= 640 ? 16 : 28;\r\n      };\r\n\r\n      const createDots = () => {\r\n        dotsContainer.innerHTML = '';\r\n        const cardsPerView = getCardsPerView();\r\n        const dotsCount = Math.ceil(cards.length \/ cardsPerView);\r\n\r\n        for (let i = 0; i < dotsCount; i++) {\r\n          const dot = document.createElement('button');\r\n          dot.classList.add('slider-dot');\r\n          if (i === 0) dot.classList.add('active');\r\n          dot.setAttribute('aria-label', `Go to slide ${i + 1}`);\r\n          dot.addEventListener('click', () => scrollToSlide(i));\r\n          dotsContainer.appendChild(dot);\r\n        }\r\n      };\r\n\r\n      const getStepWidth = () => {\r\n        const card = cards[0];\r\n        return (card.offsetWidth + getGap()) * getCardsPerView();\r\n      };\r\n\r\n      const scrollToSlide = (index) => {\r\n        const cardWidth = cards[0].offsetWidth + getGap();\r\n        const amount = index * cardWidth * getCardsPerView();\r\n        slider.scrollTo({ left: amount, behavior: 'smooth' });\r\n      };\r\n\r\n      const updateActiveDot = () => {\r\n        const scrollLeft = slider.scrollLeft;\r\n        const stepWidth = getStepWidth();\r\n        const activeIndex = Math.round(scrollLeft \/ stepWidth);\r\n        const dots = dotsContainer.querySelectorAll('.slider-dot');\r\n\r\n        dots.forEach((dot, idx) => {\r\n          dot.classList.toggle('active', idx === activeIndex);\r\n        });\r\n      };\r\n\r\n      slider.addEventListener('scroll', updateActiveDot);\r\n      \r\n      let resizeTimer;\r\n      window.addEventListener('resize', () => {\r\n        clearTimeout(resizeTimer);\r\n        resizeTimer = setTimeout(() => {\r\n          createDots();\r\n          updateActiveDot();\r\n        }, 150);\r\n      });\r\n\r\n      createDots();\r\n    }\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UI UX DESIGN COURSE SYLLABUS UI UX Design Course Syllabus (2026 Guide) Do you want to know what an updated UI UX design course syllabus covers? Thinking about whether this is right for you or answers all your queries! Don\u2019t worry. UI UX design skills are vital for anyone who wants to build top-notch digital &#8230; <a title=\"Updated UI UX Design Course Syllabus 2026 | Ultimate Guide\" class=\"read-more\" href=\"https:\/\/www.w3webschool.com\/blog\/ui-ux-design-course-syllabus\/\" aria-label=\"Read more about Updated UI UX Design Course Syllabus 2026 | Ultimate Guide\">Read more<\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"categories":[1626],"tags":[],"class_list":["post-32692","post","type-post","status-publish","format-standard","hentry","category-ui-ux-design"],"_links":{"self":[{"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/posts\/32692"}],"collection":[{"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/comments?post=32692"}],"version-history":[{"count":146,"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/posts\/32692\/revisions"}],"predecessor-version":[{"id":46891,"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/posts\/32692\/revisions\/46891"}],"wp:attachment":[{"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/media?parent=32692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/categories?post=32692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3webschool.com\/blog\/wp-json\/wp\/v2\/tags?post=32692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}