Converting Webflow into Angular (2 thru 8) using FreeFormJS

Would you like to develop Angular websites using the Bootstrap-based, online editor Webflow?

3.65 (12 reviews)
Udemy
platform
English
language
Web Development
category
instructor
61
students
2 hours
content
Jan 2018
last update
$34.99
regular price

What you will learn

At the end of the course, students will be able to convert HTML/CSS files generated by Webflow into Angular 5 CLI (formerly Angular 2 CLI) format almost instantaneously.

Description

The problem we are solving is the ability to edit HTML web pages and CSS style sheets quickly and easily specifically for Google's Angular (formerly Angular 2) projects without having to edit HTML and CSS files manually. The Bootstrap-based Webflow website provides a WYSIWYG alternative over pure Bootstrap for Angular developers. FreeFormJS provides a method of converting Webflow projects into Angular format quickly and easily.  

This is not a course on how to develop websites or mobile apps using the Angular framework nor is it a course on how to use the Webflow online editor. Some basic functionality will be explained but it is assumed that the student is familiar or will become familiar with both Angular and Webflow separate from this course. This course will provide excellent references for both Angular and Webflow for those people wishing to learn those technologies in cooperation with this course.

This course is for anyone who wants a simpler method of editing HTML and CSS files without having to resort to learning a whole new framework (such as Bootstrap) or spend a lot of time editing HTML and CSS files directly.

Also, this is the first version of the course. It is going to be needing some refinements which are expected over time. We hope that you will be able to quickly learn how to use FreeFormJS and be able to benefit from its time-saving capabilities. We hope that you benefit greatly from what we have developed inside this product. It really does make web development a lot easier having a smooth transition from a WYSIWYG editor straight into an Angular project.

Content

Introduction to FreeFormJS

Introduction
A Brief History of the Universe (The FreeFormJS Universe)
Overview of this course
Course Content
What is the purpose of this course?

Angular 2 and how it relates to FreeFormJS

Overview of Angular 2
Overview of NodeJS
How to install NodeJS
How to install Angular 2
How to setup an Angular 2 project
How to run your server locally in Angular 2 developer mode
What is Angular 2?

Webflow and how it relates to FreeFormJS

Overview of Webflow
How to create a Webflow account
How to setup a Webflow project
How to find help on Webflow
How to Code Export your Webflow project
What is Webflow?

WebStorm and how it relates to FreeFormJS

Overview of WebStorm
How to install WebStorm

Visual Studio Code and how it relates to FreeFormJS

Overview of Visual Studio Code
How to install Visual Studio Code

FreeFormJS

Overview of FreeFormJS
How to create a FreeFormJS account
How to Convert your Webflow project into an Angular 2 project
How to Update your Angular 2 project with your latest Webflow project
How to set parameters for project conversion
How to set parameters for a project update
Where to find help on FreeFormJS
What is FreeFormJS?

ng-monitor

Overview of ng-monitor
How to install ng-monitor
How to use ng-monitor (part 1)
How to use ng-monitor (part 2)
What is ng-monitor?

HTML Editing with Webflow, Angular 2 and FreeFormJS

Overview of HTML Editing with Webflow, Angular 2 and FreeFormJS
How to preserve Angular 2 custom attributes between Webflow updates (part 1)
How to preserve Angular 2 custom attributes between Webflow updates (part 2)
How to embed Angular 2 style properties inside Webflow
What is HTML editing with respect to FreeFormJS?

Webflow Symbols as Angular 2 Components

Overview of Webflow Symbols
How to convert a Webflow Symbol into an Angular 2 Component
How to manage multiple ng-symbols
What is Webflow Symbol? Can you convert it into an Angular 2 Component?

Angular 2 Basic Routing and FreeFormJS

Overview of Angular 2's Basic Routing
Overview of Angular 2's Basic Routing main components
Overview of ng-router
Overview of app-routing.module.ts
How to override FreeFormJS's support for Angular 2's Basic Routing
Webflow project Refactoring Exercise
How does FreeFormJS provide support for Angular 2 Basic Routing?

Webflow Extensions

Overview of Webflow Extensions
Setting up a Webflow Extensions project in Webflow
How to use Webflow Extensions in your Angular 2 project
What are Webflow Extensions?

Screenshots

Converting Webflow into Angular (2 thru 8) using FreeFormJS - Screenshot_01Converting Webflow into Angular (2 thru 8) using FreeFormJS - Screenshot_02Converting Webflow into Angular (2 thru 8) using FreeFormJS - Screenshot_03Converting Webflow into Angular (2 thru 8) using FreeFormJS - Screenshot_04

Reviews

Guénaël
April 8, 2018
The course was useful, so that's good. BUT : 1. the 720-only video quality really pissed me off, since I really had trouble reading the code. That's just ridiculous. Upload a better version, that's just laziness not to do it. => the 3-star only evaluation comes from that, I find this unacceptable in 2018. 2. too much nugget-style kills the nugget principle ; as you need each film to be independent (eg a nugget) and you made a lot a too small pieces, you spend a lot of time repeating yourself. 1 min intro leading to another 1 min giving the how-to is ridiculous. So it's often boring. I know you tried to make it very educational but you went too far. => that's really "in my opinion", other people may prefer it as it is. I love using webflow + freeformjs + angular: it really changes things. Absolutely ideal for a startup iterating on its mvp the lean way. So overall, this is an amazing job you do with freeformjs (I'm a paying user now).
Marek
March 21, 2018
Very good, straightforward introduction on how to use FreeFormJS to convert and update Webflow projects to an Angular-friendly format.
Jared
February 12, 2018
The quizzes had some grammar and type mistakes. Overall the course was very insightful, quick, and to the point. (For context: I'm a full-time UX and UI Designer...) I've been using WebFlow as a front-end design tool for a couple months now. As I'm now working with a team of Angular5 developers, FreeFormJS has introduced a way for me to to build functional prototypes that also serve as a foundation for any back-end development. We've decreased our turn-around time and I've implemented FreeFormJS into my iteration phase. Beyond that, I impressed myself and my team today by showing off an Angular app I built directly in WebFlow. :D Thanks Perry!

Charts

Price

Converting Webflow into Angular (2 thru 8) using FreeFormJS - Price chart

Rating

Converting Webflow into Angular (2 thru 8) using FreeFormJS - Ratings chart

Enrollment distribution

Converting Webflow into Angular (2 thru 8) using FreeFormJS - Distribution chart

Related Topics

1445648
udemy ID
11/24/2017
course created date
1/10/2021
course indexed date
Bot
course submited by