Module 1 - Introduction
1. Welcome to the course2. Why Go3. Why start and build a blog?4. What about React/Vue/Angular?5. Getting setup and source filesModule 2 - Tech Stack Walkthrough
1. Introduction to Golang Part 12. Introduction to Golang Part 23. Introduction to Golang Part 34. Structuring Golang Applications5. Templating with Templ6. Just enough interactivity with HTMX7. Getting started with postgres8. Servers, routers and endpointsModule 3 - Creating the MVP
1. What are the minimal requirements?2. Doing some initial plumbing3. Embedding static assets4. Creating our first views5. Tailwind & Utility-first CSS6. Styling the Landing Page7. Styling the Article PageModule 4 - Managing Content
1. Choose your own adventure2. Writing in Markdown3. Parsing Markdown to HTML4. Frontmatter and Meta Information5. Making our code examples look nice6. Adding error pagesModule 5 - Adding the Database
1. What is a Migration?2. Our first migration: articles table3. Creating the Database Layer4. Showing the Latest Posts5. Slugs and Human Readable URLsModule 6 - Managing the Blog
1. What are the minimum requirements?2. A new layout approaches3. Creating a rough outline4. Our second migration: Users Table5. Introduction to authentication6. Storing passwords securely7. Authenticating users8. Remember me9. Managing posts using a hypermedia API10. Our third migration: Altering Posts Table11. Only show posts marked readyModule 7 - Adding Subscribers
1. What are the minimum requirements?2. Our fourth migration: Subscribers Table3. Creating the subscription form4. Adding some interactivity with HTMX5. Saving new subscribers in the database6. Verifying subscriber emails7. Our fifth migration: Tokens Table8. Email validation view9. Email validation tokens10. Sending validation emails with SES11. Making it all come togetherCreating the MVP
Creating our first views
Summary
In this video, I demonstrate building the foundations of a web application with two main pages: a homepage and an article page. I set up routes, create views using Templ, add a navigation bar with Tailwind CSS, and design the homepage and article page layouts. The goal is to create a solid base for future development, including adding a database and real content.
Transcript
So with our static asset embedded into the binary, we can finally start building out our application. In this video, I want to build the skeleton or the foundations of our two main pages, which is going to be the home page and the article page, so that we in the following videos have a solid foundation from which we can build. Let's quickly create our routes. For now, we only need two, one for home and one for article. So if we go into our routes package here and then on our load function, we can register a get method that's just going to be targeting our root domain and then function and then we simply just return our home controller and pass the echo context. And then we do pretty much the same for the article page. We just need to go to slash articles slash and then pass in the slug. Again, we're going to return controllers, article and pass the echo context. Now we can create our views. So let's create the home view and we're just going to say home page. I'm going to wrap it in base and have it be a div that says I'm home page. And then pretty much repeat this for article, news, temple, article page. And this one is just going to say I'm article page. Now, before we can use this view, we need to have temple to generate the go version. So we can run temple generate and on the views, we now have a temple version of the article page and a temple version or go version, sorry, of the home page and of the article page. Now, last step is to go into our controllers. And now we have this home controller and the article controller. If I update my LSP here, and then simply just return news and then home page here, call the render, extract the request context and then the response. There we go. Same with article, but with article page. Let's see the response. And this is pretty much it. We need to get the basics running. Once this controller file starts to feel a bit crowded, we can start to split it up. But for now, this is going to be perfectly fine. Now, if we run our server and go to our home page, we can see we just have this for now. I'm home page, nothing more. But if we refer back to our design, we also wanted to have a navbar that was present on all pages. And to do that, we can go into our views package and to the base template. And in here, if we just add a header and inside the header, we're going to have div, that's going to have also an anchor tag and nav elements, which is going to contain three anchor tags. The first one here is just going to be our logo or the name of our blog. The elements here was home articles and bout. That's going to go to articles and slash out bout. There we go. We haven't created these two pages. We'll create them later down the line. But for now, this will serve fine as placeholders. And last episode, we added HTML. We can also... I'm sorry, we added Tailwind CSS, right? So we can also start to add some Tailwind classes. And we're going to be using a flex class on our body element. So pretty much everything will go from top to bottom in the flex order. And then for our header, let's just say we want to have it age 12, and it's going to take up the width of the entire screen. And then for our div element, we want it to have the full height of the container, which is going to be header. We want to center it with mx-auto. It's going to have container, so we control the total width of how big, how wide this element can be, right? This is also going to be a flex element with items center. And then we're going to justify between so that our local or block name and our nav bar will have some spacing between them. Now, for our block name here, we're just going to say font-alt and our nav bar actually not have any classes, but our nav bar elements will. So here we're going to say mx-2 to give it a little bit of space. And then on hover, we're going to underline and we're going to say cursor-to-pointer. There we go. So now if you go back to our home page and refresh, we can see something is actually happening. And if we go and hover some of the nav bar elements, we can see now that we have some indication that the mouse is over the nav elements. So with that out of the way, we can actually start building our home page. So let's jump into the home.temple file. And in here, we're going to be switching this out for our main element instead. Let's just remove this IAM home page and put this to add a class here saying with screen. And then inside of this, we can say div container mx-auto flex flex-call. And finally, items-center. There we go. And on our home page, we wanted to have the headline, the sub-headline, some socials, and also some latest posts, and our profile picture. So let's create the profile picture by saying div, and we're going to add some margin to the top. We're going to say it's going to be h32, width 32. It's going to be rounded full. It's going to have a border, and it's going to be border-gray. Let's just do 800. There we go. And for our headline, we're going to use an h1 tag. And for our sub-header, we're going to be using h2 so that Google can differentiate in what to target. So let's just call this sub-headline. The first one here will also have margin 10 at the top only, and it will be text4xl. Almost the same thing here for the sub-headline. We're also going to be adding some margin to the top, and then only going to be saying textxl. There we go. And if we go to our page now, we can see that we have something not looking pretty, but at least it's starting to come a little bit more together. Now we also need the socials, and for that we are going to be creating a new div and a flex container that's going to be justify-between with some padding and then a width of 96. There we go. And we're going to have three links, so we have a link to Twitter, LinkedIn, and YouTube. So let me just create three anchor tags and say class, and they're all going to look the same, so we're going to have four semi-bolts, and that's going to be it for now. So the first one will go to Twitter or X, whatever you want to call it. The next one will go to LinkedIn, and finally we are going to have one that goes to YouTube. Now feel free to update the href with your respective accounts, but you can see now we also have some socials on the page. Finally, we also wanted to have our latest post showing up, and for that I'm going to add an h2 tag again. That's just going to say latest post, and it's going to be with some more padding so we can differentiate in between the elements. It's going to be text to xl and then a font of bold, and I can spell font bold. There we go. And I will just copy paste some dummy containers in here like this. So we have article one, we have article two, and so on and so forth. And now again on our page here, we can go down and we have these little boxes with our latest posts that we can then visit directly from the home page. Now for article page, this one will look very similar to what we just did with our home page. We're just going to do again a main that's going to have the width of the screen, and then we're going to set it to relative, and that's because we want to have this little back button that is relative to the main container. So if we set the main container to relative, we can then create an anchor tag and say absolute and left five, top eight, and then let's say border and rounded. Let's add some padding both on the x-axis and the y-axis, and on the hover we're going to say bg black and text white. And this one is just going to go to the home page back like this. So now if we go to our browser here and go to the article page and refresh, we can see we now have this little back button here. Great. And then we simply wanted to show us the title of the article and then the author, and it's going to be very similar to what we just did for the home page. So I'm just going to copy paste in here some code where we can see that we again create a container so we can control the max width of the element, and then the only thing new here really is that we specify a title variable. This is how you specify variables in Temple. So we go up here and then we say to the article page component that we need a title of type string, and we will have some errors in the console, but we'll fix that in seconds. This date here will be the date that the article was posted, and then of course the author. These will come later down the road from our database, but for now let's just hard code it so we can get something on the screen. Next, we also want to have a dummy article that we again will fill with real content once we get to that point. So I'm just going to copy paste some long ipsum text in an article tag that's going to have a max width of 50rem, have some padding, and then simply some paragraphs. There's nothing really new going on here, so let's just add the final element here, which was that at the end we wanted to have this list of other articles that people could click on if they wanted to, and again we're just going to use some dummy text and placeholders for now. So let's just quickly jump into our controllers here, and then just add testing as the title. Now we should have the application compiled again, so we can jump in here and refresh, and we can see we have testing as the title, we have the date, and the name of the author, which is just going to be my initials for now at least. We have some dummy text, and then we have the other articles that people can check out that is not in the right place. So let's quickly fix that and take this whole element, put it in here. So what I just did was I took and moved it inside the container div of everything. And now if we refresh, you can see that we also have everything lining up nicely. So this is going to be our article page for now. One final thing I want to do in this video is I want to take advantage of the fact that we have this little slot key here added to our articles route. If you remember back to when we created the homepage and we created these dummy article cards, we added in some dummy routes as well. And until we get to the point where this becomes data-driven, that we pull it from the database, it would be nice that we can still see that the title gets updated based on the article card that we click on the front page. So the way we can do that is to use the echo context, call the param method, and then pass the slug as the key and create a title here. And then simply just use a switch statement on the slug. And we created five different article cards that had the slug being article-1-title. So we simply just match against that for all the five options. So article-1-title, in that case, title becomes article-1. And we had five of them, I believe, so we can just generate four more. There we go. And then we simply just pass this title variable to the article page like this. Now, if we go into our homepage and refresh, you see we have all of these latest post article cards. And if we click them, we can see that the article title now gets updated. So we go back here and say article-2, article-2, article-4, so on and so forth. Now, this will, of course, get improved upon as we start to add a database and we start to pull out some actual article content. But for now, this will serve our purpose in that we're just building out the foundations, right? So in the next video, we will start to make the homepage here actually look like something we can show to users.