How to build a website - with prebuilt html templates?

Learning Team
1

I am learning Emberjs (coming from Angular ), how do I start building a website if I already have a HTML template (pick from https://html5up.net)? What is the process? I could not find any article on this process.

Is it this way?

  • Build a new Emberjs project
  • Create pages using the pre-built html/css (copy/paste)
  • Add features as we build.
2

That’s about right. Ember “templates” use HTMLBars which is (sort of) just a superset of HTML, meaning any HTML will work. So using a pre-built HTML file is as simple as copying and pasting into a template file and starting up ember s.

That said you’ll want to feel pretty comfortable with defining routes, route templates, and components and I would highly recommend walking through the Ember.js guides if you haven’t yet. The things you’ll want to pay most attention to are:

  • the concept of “nested” routes, meaning a child route renders inside its parent route. But if you’re used to Angular you should be familiar with the concepts of a single page application.
  • the router, defining your routes and paths, which of course are your “pages”
  • components, it’s likely you’ll want to extract some parts of the prebuilt template into components for organization and/or reuse, components are the best way to do that

So at a high level you might want to do something like the following:

  • paste the prebuilt template into the “application” template of your app, add the css to /app/styles.css (or you could include it as an extra stylesheet from public), check it out and make sure it looks how you want
  • figure out what you want to stay on ALL pages in your app and leave that in application template, extract the rest into the application’s “index” template e.g. app/templates/index.hbs
  • create any other pages you want by defining routes and templates for them
  • extract bits of html into components for better organization and cleaner templates, or to reuse them
  • start wiring up actions for places where you need javascript interaction (toggling things, etc)
  • Ideally you could use components heavily for most “new features” to keep your code organized and your route templates somewhat lean, but that part of the architecture is up to you

Anyway, hope that’s helpful at a high level. Definitely feel free to ask here or in discord if you get stuck or have any other questions!

2 Likes
3

Awesome, thanks for the quick help @dknutsen :+1:t5:

1 Like
4

Was able to get this to work. Sample code here GitHub - ksurendra/ember-template-phantom: A sample implementation of HTML template in Ember. Built using HTML5Up's Phantom HTML Template

5

Awesome! And if you wanted to extract components for things like the header/nav/menu it looks like it would be pretty straightforward as well.

6

Nice tutorial to build a website with prebuilt html templates.