Ember.js Bootcamp 2023: Learn Ember JS in only 3 days

Name: Ember.js Bootcamp 2023: Learn Ember JS in only 3 days
Rating: 4.1 (165 reviews)

Build comprehensive web applications using the Ember.js frontend framework. Learn Ember JS from scratch in only 3 days.

Created byJannick Leismann

Last updated 10/2023

English

English [Auto],

What you'll learn

Learn Ember JS 5.3.0 (2023) from scratch
Build comprehensive web applications
Understand the ember-cli, routing and components
Take your applications to the next level using services, dependency injection and ember-data
Understand what's going on under the hood using the ember inspector plugin

Course content

3 sections • 43 lectures • 3h 3m total length

0a - First project overview0:44
Setting up the development environment3:51
Install NodeJS and Visual Studio Code, install Ember CLI globally with npm, verify versions, and prepare your first Ember project environment.
Source Code: Todo Application0:10
Generating and starting your first ember project4:02
Understanding the project structure4:49
Creating the todo route and understanding the outlet4:46
Configuring a route in the router3:15
Creating the todos controller3:53
Using a loop in handlebars4:32
Tracking properties with the tracked decorator3:47
Using the ember inspector extension2:46
Creating an action to get the new todo title3:59
Creating a new todo with another action5:14
Styling the application1:14
Recap of your first application1:09
Install Ember.js with Node.js or npm, create Ember project with a to-dos route and Handlebars templates, manage data with a controller using @tracked and @action, and inspect with Ember Inspector.
Quiz 1: Ember Fundamentals

Recipe Book Application Overview0:46
Source Code: Recipe Book Application0:10
Creating and initializing the recipe-book project4:31
Here is the CSS styling code:

body {
font-family: "Arial", sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
max-width: 800px;
margin: 20px auto;
background: #fff;
padding: 20px;
}

h1 {
text-align: center;
}

h1,
h2,
h3 {
margin-top: 0;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.recipe-overview {
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
transition: background-color 0.3s;
cursor: pointer;
}

.recipe-overview:hover {
background-color: #f7f7f7;
}
Creating the recipe model4:46
Loading recipes from a json file using the routes model hook4:51
Add a public api/recipes.json with id, title, description, ingredients, and instructions. Fetch it in the recipes route’s async model hook via /api/recipes.json and transform the data into recipe records.
Transforming the raw recipe data using the ember data store and the ORM8:32
Creating the recipe short overview component3:37
Passing data in our component9:22
Creating and setting up the recipe details route7:23
Additional CSS Code to add:

.recipe-info-section {
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 20px;
padding: 10px;
}

.mb {
margin-bottom: 40px;
}

.text-center {
text-align: center;
}
Using LinkTo to navigate the user4:39
Avoid reloading the data store2:42
Learn how to prevent duplicating recipe records by using Ember's store peekRecord to check for existing recipes before creating new ones on the main route, ensuring data loads only once.
Loading up a specific record (recipe) in the store by id3:07
Understanding a full page refresh related to data and services4:24
Creating the recipe data service7:37
Showing all the detailed recipe data in the template4:00
Ember Advanced I

Create a route and controller for creating new recipes4:33
Add this styling code:

.form-group {
margin: 20px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}

button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #555;
}

.navbar {
background-color: #333;
padding: 15px;
color: white;
}

.nav-link {
margin-left: 10px;
margin-right: 10px;
color: white;
text-decoration: none;
transition: color 0.3s;
}

.nav-link:hover {
color: #ddd;
}
Building the form to create a recipe3:35
Creating the actions to create a new recipe5:04
Create and wire four ember actions—update title, update description, update ingredients, and update instructions—then assemble and save a recipe by preventing form submit and parsing comma-separated ingredients.
Connecting the form and the controller3:50
Saving new recipes in the local storage8:02
Loading recipes from the local storage and assigning GUIDs6:31
Here is the GUID function that you can copy and paste into your service:

generateGUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0,
v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
Refactoring the code4:39
Building a navigation bar2:29
Creating the ui for the favorite functionality6:15
Stars:
★
☆

Styling:

.favorite {
color: rgb(255, 170, 0);
}

.star {
font-size: 24px;
margin-right: 2px;
}
Service extensions for the favorite functionality7:06
Implementing the favorite service methods3:32
Using a components constructor to initially load data2:54
Creating the favorites route and showing all favorite recipes inside of it6:07
Test your knowledge by building a new functionality on your own

Requirements

Only basic programming experiences needed (simple javascript or typescript experience is fine)

Description

Dive Deep into Ember JS (v5.3.0 - 2023) Through Hands-On Learning!

Master Ember JS in a Flash with this Comprehensive Course!

Built for the hustling developers, I get that time is gold. This course is tailored to give you the essence of Ember JS, ensuring you can build production-grade applications without slogging through fluff.

Here’s a Snapshot of What You’ll Master:

Mastery of the ember-cli
Route creation and configuration
Crafting beautiful templates with hbs (handlebars)
Efficient data binding
Crafting reusable components
API data retrieval
Delving into ember-data (store)
Crafting and injecting services
Strategies for maintaining scalable and maintainable Ember projects

Hands-On Learning: Through the journey, we'll collaboratively build diverse web applications, each one more intricate than the last. I believe in learning by doing – start strong, build right.

Are You New to Web Development? No Sweat! While a tad bit of programming knowledge is a bonus, we've got the backs of complete beginners too!

With your enrollment, unlock:

Support Forum Access
Project Source Code
Insightful PDF Handouts
Engaging Quizzes
Thought-provoking Programming Exercises
A Guide to Best Practices in Ember JS

Seeking a Swift, Clear-cut Ember JS Learning Experience? Look no further! Our course is streamlined, engaging, and, best of all, effective.

Enroll Today and Master Ember JS in Just 3 Days! Can’t wait to see you in class!

Who this course is for:

Every developer that wants to learn frontend development using Ember JS
Every developer that wants to become a web developer
Developers that need to learn ember for their job/business
Every developer that wants to learn a brilliant alternative to react or angular

Ember.js Bootcamp 2023: Learn Ember JS in only 3 days

What you'll learn

Explore related topics

Course content

Day 1: Master the key fundamentals of Ember.js15 lectures • 48min

Day 2: Recipe-Book Part 115 lectures • 1hr 10min

Day 3: Recipe-Book Part 213 lectures • 1hr 5min

Requirements

Description

Who this course is for: