SE Factory logo
SE Factory logoClose Icon
Close Icon

Choose which program you want to apply for:

FCS

Apply

FSW

Apply

FSD

Apply

UIX

Apply
HomeHello world!MilestonesProgramsHire talentTestimonialsFAQsContact usPartnersNewsletter

Webflow

$250 $200

Build stunning, responsive websites—without writing a single line of code! This hands-on course will teach you how to design, develop, and launch professional websites using Webflow. Whether you're a designer, marketer, or entrepreneur, you'll learn how to create custom web experiences with ease..

Course Info: 📅 May 5 – May 16 | ⏰ 5:00 PM – 7:00 PM | 🗓 MWF | 🌐 Online
Enroll Now

2 Weeks

12 hours

3+ Group Projects

Online

Certification of Completion

Curriculum
Learning Outcomes
Requirements & Prerequisites
Fees

Day 1: Getting Started with Webflow and Web DesignBasics

  • Overview of Webflow, its benefits, and comparison with other platforms (WordPress, Wix).
  • Webflow Interface Tour: Quick tour of Webflow’s Designer (workspace) and key sections (Designer, CMS, E-commerce).
  • Web Design Basics: Intro to HTML & CSS concepts (high-level; no coding required), understanding the Box Model, typography, and colors.

Day 2: Building Layouts in Webflow

  • Using Webflow Designer with sections, containers, and div blocks.
  • Responsive layouts with Flexbox and element positioning (relative, absolute, fixed, and sticky).
  • Creating Grid-Based Layouts with Webflow’s Grid system, adjusting designs for different screens, and customizing breakpoints.
Project: Design a landing page using Flexbox and Grid, including a header, main section, and footer.

Day 3: Styling and Advanced Layout Techniques

  • Understanding classes, global vs. combo classes, and applying styles like shadows, borders, gradients, and hover effects.
  • Creating reusable components (buttons, cards) and adding visual elements like background videos and images.
  • Advanced layout techniques, including overlapping elements and designing custom navigation menus.
Project: Create a portfolio page with sections for an “About Me,” “Projects,” and a custom navigation bar.

Day 4: Working with Webflow CMS

  • Introduction to Webflow CMS, understanding Collections and Collection Items.
  • Setting up CMS Collections, adding fields, and structuring dynamic content.
  • Connecting CMS Collections to dynamic pages, using filters and sorting options.
Project: Build a dynamic blog or portfolio page using Webflow CMS.

Day 5: Forms, Buttons, and User Interactions

  • Creating and styling forms, adding form elements (text fields, checkboxes, submit buttons), and setting up form submission actions.
  • Designing buttons and links with custom styles.
Project: Create a simple “Contact Me” page with a form, a submit button, and a custom thank-you message.

Day 6: Adding Interactions and Animations

  • Introduction to interactions and animations in Webflow, triggers, and animation basics (hover, click, scroll).
  • Creating micro-interactions like hover effects and designing simple animations.
  • Setting up scroll-triggered animations to enhance user experience.

Student Learning Outcomes

  • Create fully responsive, professional websites using Webflow’s Designer.

Course Objectives

  • Develop job-relevant skills with hands-on projects.
  • Earn a shareable career certificate from SE Factory.

Requiremnents

  • A well-functioning laptop.
  • Reliable internet connection.
  • A Webflow account (free or paid).
  • Google Chrome or another modern web browser.

Prerequisites

  • No prior coding or Webflow experience is required.
  • Basic computer skills and familiarity with using a web browser.
  • Experience with Git and GitHub.
  • Prior work or freelance experience. 
  • Optional: A basic understanding of web design concepts (helpful but not necessary).

$200 (VAT might apply).

Nour Mshawrab
Nour is a Full-Stack Web and Mobile Developer and UI/UX Designer. She’s currently an instructor at SE Factory, teaching UI/UX and Web Development, and has successfully guided over 10 batches of students.
Her passion and dedication to seeing her students grow is what drives her success.
Through her career path, Nour has had the chance to work with several startup owners, collaborating on various projects and helping them bring their ideas to life.
She has made significant contributions to building intuitive user interfaces, seamless web and mobile experiences, and providing practical insights that have helped these businesses grow and succeed.
SE FACTORY Pro
HomeHello world!MilestonesProgramsHire Talent
F&QsTestimonialsContact usPartners
© 2023 SE Factory SAL. All rights reserved.
Privacy policy