Front-End Developer

Build modern websites with the latest front-end technologies.

What You'll Learn

For front-end developers serious about the integration of company branding with modern technologies, the Front-End Developer course teaches you how to realize your brand using Liferay.

You’ll learn how to control both global and specific presentation as well as how to maintain design integrity while allowing content creators to edit quickly.

Instructor

Brandon Pettit

Brandon Pettit joined the Liferay team in 2012. Since then, he's contributed to both training delivery and the development of course curriculum before becoming the Project Manager of the Curriculum team. He enjoys serving others through Liferay education. When not working, he can be found reading, taking a walk, or playing his favorite Nintendo games.

Curriculum3 days

  • Introduction
  • Course Topics 2 min
  • Front-end Development in Liferay
  • Preview
    Adding Custom Branding to the Liferay Platform 4 min
  • Front End Development Tools in Liferay 4 min
  • Setting Up the Front-End Development Environment 2 min
  • Exercise: Setting Up the Front-End Development Environment 14 min
  • UI Frameworks
  • Liferay's Experience Language: Lexicon 5 min
  • Exercise: Liferay's Experience Language: Lexicon 5 min
  • Modern JavaScript Design 3 min
  • Freemarker Templates in Liferay 4 min
  • Theme Development
  • Adding Custom Branding to Liferay with Themes 10 min
  • Exercise: Adding Custom Branding to Liferay with Themes 21 min
  • Adding Custom Styling to the Platform 8 min
  • Exercise: Adding Custom Styling to the Platform 20 min
  • Adding Custom JavaScript 4 min
  • Exercise: Adding Custom JavaScript 5 min
  • Configuring the Theme 11 min
  • Exercise: Configuring the Theme 12 min
  • Themelets 3 min
  • Exercise: Themelets 11 min
  • Importing Resources and Embedding Applications 11 min
  • Optional Exercise: Importing and Embedding Applications 3 min
  • Layout Templates
  • Controlling Page Layouts with Layout Templates 6 min
  • Exercise: Controlling Page Layouts with Layout Templates 7 min
  • Customizing Widgets with Templates
  • Using Templates in Liferay 2 min
  • Application Display Templates 5 min
  • Exercise: Application Display Templates 13 min
  • Web Content Templates 5 min
  • Exercise: Web Content Templates 15 min
  • Page Fragments 4 min
  • Exercise: Page Fragments 14 min
  • Context Contributors & Theme Contributors 4 min
  • Developing Widgets and Apps
  • Single Page Applications 3 min
  • Exercise: Single Page Applications 2 min
  • NPM SDK 1 min
  • Building Applications and Widgets with Java Script 3 min
  • Exercise: Building Applications and Widgets with JavaScript 6 min
  • Best Practices for Front End Development 4 min
  • Cover to Cover
  • Next Steps

What You'll Learn

For front-end developers serious about the integration of company branding with modern technologies, the Front-End Developer course teaches you how to realize your brand using Liferay.

You’ll learn how to control both global and specific presentation as well as how to maintain design integrity while allowing content creators to edit quickly.

Instructor

Brandon Pettit

Brandon Pettit joined the Liferay team in 2012. Since then, he's contributed to both training delivery and the development of course curriculum before becoming the Project Manager of the Curriculum team. He enjoys serving others through Liferay education. When not working, he can be found reading, taking a walk, or playing his favorite Nintendo games.

Curriculum3 days

  • Introduction
  • Course Topics 2 min
  • Front-end Development in Liferay
  • Preview
    Adding Custom Branding to the Liferay Platform 4 min
  • Front End Development Tools in Liferay 4 min
  • Setting Up the Front-End Development Environment 2 min
  • Exercise: Setting Up the Front-End Development Environment 14 min
  • UI Frameworks
  • Liferay's Experience Language: Lexicon 5 min
  • Exercise: Liferay's Experience Language: Lexicon 5 min
  • Modern JavaScript Design 3 min
  • Freemarker Templates in Liferay 4 min
  • Theme Development
  • Adding Custom Branding to Liferay with Themes 10 min
  • Exercise: Adding Custom Branding to Liferay with Themes 21 min
  • Adding Custom Styling to the Platform 8 min
  • Exercise: Adding Custom Styling to the Platform 20 min
  • Adding Custom JavaScript 4 min
  • Exercise: Adding Custom JavaScript 5 min
  • Configuring the Theme 11 min
  • Exercise: Configuring the Theme 12 min
  • Themelets 3 min
  • Exercise: Themelets 11 min
  • Importing Resources and Embedding Applications 11 min
  • Optional Exercise: Importing and Embedding Applications 3 min
  • Layout Templates
  • Controlling Page Layouts with Layout Templates 6 min
  • Exercise: Controlling Page Layouts with Layout Templates 7 min
  • Customizing Widgets with Templates
  • Using Templates in Liferay 2 min
  • Application Display Templates 5 min
  • Exercise: Application Display Templates 13 min
  • Web Content Templates 5 min
  • Exercise: Web Content Templates 15 min
  • Page Fragments 4 min
  • Exercise: Page Fragments 14 min
  • Context Contributors & Theme Contributors 4 min
  • Developing Widgets and Apps
  • Single Page Applications 3 min
  • Exercise: Single Page Applications 2 min
  • NPM SDK 1 min
  • Building Applications and Widgets with Java Script 3 min
  • Exercise: Building Applications and Widgets with JavaScript 6 min
  • Best Practices for Front End Development 4 min
  • Cover to Cover
  • Next Steps