Objective: To provide fundamental knowledge and tools for web design and development, focusing on popular platforms such as WordPress, Elementor, and Figma.

1. Introduction to Web Design and Development

   • Principles of digital design: colors, typography, composition, and accessibility.
   • Structure and workflow in website creation.
   • Understanding key concepts: domain, hosting, and servers.

2. WordPress Basics

   • Installation and initial setup of WordPress.
   • Overview of the WordPress admin dashboard.
   • Creating basic pages and posts.
   • Working with simple design themes.

3. Elementor Basics

   • Installing Elementor and learning its core features.
   • Building dynamic web pages using drag-and-drop tools.
   • Customizing layouts with widgets and design tools.

4. Using Figma for Web Design

   • Introduction to Figma as a web design tool.
   • Creating wireframes and designing user interfaces (UI).
   • Practicing basic design creation.

5. Translating Designs from Figma to Elementor

   • Understanding the process of converting Figma designs into Elementor websites.
   • Matching design elements in the website to the Figma mockups.

Year 15 – Advanced Web Design and Development

Objective: To enhance advanced skills in web design and development using WordPress, Elementor, and additional advanced tools.

1. Mastery of Elementor

   • Working with Elementor Pro: dynamic templates, creating custom headers and footers.
   • Building complex pages and advanced design systems.
   • Optimizing site performance built with Elementor.

2. WordPress + WooCommerce

   • Setting up WooCommerce for e-commerce websites.
   • Creating product pages, shopping carts, and checkout pages.
   • Customizing the shop layout with Elementor.

3. WordPress + JetEngine (Crocoblock)

   • Installing JetEngine for dynamic content.
   • Creating custom post types, relationships, and dynamic forms.
   • Applying advanced styling to dynamic content.

4. Essential Plugins for Web Development

   • Overview and setup of key plugins to enhance website performance:
     • WP Rocket – improving site speed.
     • RankMath/Yoast SEO – search engine optimization.
     • Elementor Addons – extending Elementor functionality.
     • Security and backup plugins (e.g., UpdraftPlus).

5. Perfecting Figma to Elementor Site Transfers

   • Working with complex designs in Figma.
   • Building websites that accurately reflect Figma mockups.
   • Ensuring responsive design and flawless element transfer.
     
     

Program Outcome:
By the end of the program, students will:

• Design and build professional-quality websites.
• Use Figma as a planning and design tool integrated with Elementor.
• Manage complex WordPress websites, including e-commerce and dynamic content.
• Work with advanced tools and optimize website design and performance.