Build a Notes App with Alpine.js
Playing
02. The design

Episodes

0%
Your progress
  • Total: 55m
  • Played: 0m
  • Remaining: 55m
Join or sign in to track your progress

Transcript

00:00
Okay, so we're starting out with some pre-made markup and styling here and this is available in the series downloads. Once you've gone ahead and pulled this entire document into your editor, you should see something like this over in your browser.
00:15
So we're going to take a minute just to go through this just so we feel comfortable with it and then we're going to go ahead and tweak it along the way as we start to pull Alpine into this to make it work. At the moment there is no Alpine on the page.
00:29
So the first thing to mention is we're using Tailwind. We're just pulling this directly in from the content delivery network which means we're going to have a huge style sheet. We can always fix that up later but of course we're just focusing on the Alpine stuff here.
00:42
If you've not worked with Tailwind before, feel free to switch this out. You may be uncomfortable with the amount of utility classes here but again, we'll talk about them as we go through because we'll have to toggle certain classes based on different states of our app.
00:55
So we'll be changing them around and then you can go ahead and apply your own custom CSS if you want to. Okay, let's go through each kind of section of this. So the first one and the most important is this kind of area here where we can write
01:08
the title of our note and the content. So this is represented by an input here and a text area here. Let's just go over to this first section, this entire div here. You can see that we've got that input here that is for the title, has a placeholder here
01:23
of untitled notes. You see that text before we start writing. We've got the text area just underneath that, of course, so we can start writing our note. And then just down here in this wrapper, we have a button which will allow us to delete
01:35
our notes. We can hook that up with our Alpine functionality a little bit later. So that's that kind of right-hand section. The left-hand section is this aside just down here.
01:47
So the first thing that we've got is this title. So we have a title of notes which of course you can change. You can see next to that we have another button which will of course allow us to create a new note.
01:56
So again, we'll be hooking that up to a method on our store which will push a new note into the stack and then allow us to start editing it. Just below that, you can see that we've got this body preview note title and this timestamp here which of course at the moment is just completely static and that has that hover
02:17
effect so we can kind of see what we're doing. That's going to be duplicated. So just down here, this list item is going to be duplicated, this entire thing for every single note we have.
02:29
And inside of here, we just have an anchor which represents the clickable area for the note title. That could be a button but we're just going to leave it as an anchor. The time next to it, so of course just here, these two are in line.
02:41
And then just underneath that within a simple paragraph, we have the body preview. So there's not really much going on here. If you're not used to Tailwind, it will look like a lot but we have the right-hand section, the left-hand section, header, and then the left-hand section, list items for each of
02:59
our notes. So once you've got that pulled into your editor and you can see what I see, it's ready to start pulling it together to actually get it working into a working notes app. Let's start doing that in the next part.

Episode summary

In this episode, we kick things off by taking a look at the pre-made markup and styling that comes with the course—don't worry, it's all available in the series downloads! We'll make sure you're set up in your editor, and you'll be able to see exactly how the basic layout appears in the browser before adding any functionality.

We break down the different sections of the app, focusing on how everything is structured. On the right, there's a space to write your note's title and content, plus a delete button (which we’ll wire up to work with Alpine.js later). On the left, there's a sidebar with a title, a button to add new notes, and a list of your notes that will eventually update live as you use the app.

There's some talk about Tailwind CSS—for now, we're just pulling it from a CDN for speed, but if you prefer your own CSS style, that's totally cool. We take a moment to understand the utility classes, reassure you if you're new to Tailwind, and point out how these will help us later when we need to change up the design based on how the app is functioning.

By the end of this video, you'll know how everything is laid out, be comfortable with the code you're starting from, and be ready to jump into adding interactivity in the next episode!

Episode discussion

No comments, yet. Be the first!