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
  • Front-end Development in Liferay
  • Preview
    Adding Custom Branding to the Liferay Platform
  • Front End Development Tools in Liferay
  • Setting Up the Front-End Development Environment
  • Exercise: Setting Up the Front-End Development Environment
  • UI Frameworks
  • Liferay's Experience Language: Lexicon
  • Exercise: Liferay's Experience Language: Lexicon
  • Modern JavaScript Design
  • Freemarker Templates in Liferay
  • Theme Development
  • Adding Custom Branding to Liferay with Themes
  • Exercise: Adding Custom Branding to Liferay with Themes
  • Adding Custom Styling to the Platform
  • Exercise: Adding Custom Styling to the Platform
  • Adding Custom JavaScript
  • Exercise: Adding Custom JavaScript
  • Configuring the Theme
  • Exercise: Configuring the Theme
  • Themelets
  • Exercise: Themelets
  • Importing Resources and Embedding Applications
  • Optional Exercise: Importing and Embedding Applications
  • Layout Templates
  • Controlling Page Layouts with Layout Templates
  • Exercise: Controlling Page Layouts with Layout Templates
  • Customizing Widgets with Templates
  • Using Templates in Liferay
  • Application Display Templates
  • Exercise: Application Display Templates
  • Web Content Templates
  • Exercise: Web Content Templates
  • Page Fragments
  • Exercise: Page Fragments
  • Context Contributors & Theme Contributors
  • Developing Widgets and Apps
  • Single Page Applications
  • Exercise: Single Page Applications
  • NPM SDK
  • Building Applications and Widgets with Java Script
  • Exercise: Building Applications and Widgets with JavaScript
  • Best Practices for Front End Development
  • 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
  • Front-end Development in Liferay
  • Preview
    Adding Custom Branding to the Liferay Platform
  • Front End Development Tools in Liferay
  • Setting Up the Front-End Development Environment
  • Exercise: Setting Up the Front-End Development Environment
  • UI Frameworks
  • Liferay's Experience Language: Lexicon
  • Exercise: Liferay's Experience Language: Lexicon
  • Modern JavaScript Design
  • Freemarker Templates in Liferay
  • Theme Development
  • Adding Custom Branding to Liferay with Themes
  • Exercise: Adding Custom Branding to Liferay with Themes
  • Adding Custom Styling to the Platform
  • Exercise: Adding Custom Styling to the Platform
  • Adding Custom JavaScript
  • Exercise: Adding Custom JavaScript
  • Configuring the Theme
  • Exercise: Configuring the Theme
  • Themelets
  • Exercise: Themelets
  • Importing Resources and Embedding Applications
  • Optional Exercise: Importing and Embedding Applications
  • Layout Templates
  • Controlling Page Layouts with Layout Templates
  • Exercise: Controlling Page Layouts with Layout Templates
  • Customizing Widgets with Templates
  • Using Templates in Liferay
  • Application Display Templates
  • Exercise: Application Display Templates
  • Web Content Templates
  • Exercise: Web Content Templates
  • Page Fragments
  • Exercise: Page Fragments
  • Context Contributors & Theme Contributors
  • Developing Widgets and Apps
  • Single Page Applications
  • Exercise: Single Page Applications
  • NPM SDK
  • Building Applications and Widgets with Java Script
  • Exercise: Building Applications and Widgets with JavaScript
  • Best Practices for Front End Development
  • Cover to Cover
  • Next Steps