NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,439 Hi guys and welcome back. 2 00:00:01,919 --> 00:00:05,310 In this section, we're going to make use of our HTML and CSS knowledge 3 00:00:05,340 --> 00:00:08,340 to build the microblog that you see on your screen right now. 4 00:00:08,970 --> 00:00:11,880 Throughout the section and throughout the entire course, you can use this 5 00:00:11,880 --> 00:00:15,570 microblog app once we finished it, to keep track of everything you've learned. 6 00:00:15,809 --> 00:00:18,840 And then at the end, you're going to have a nice journal of everything you've 7 00:00:18,840 --> 00:00:20,250 learned throughout the entire course. 8 00:00:20,880 --> 00:00:22,950 I'll show you what it looks like and what you're going to learn in 9 00:00:22,950 --> 00:00:24,270 this section throughout this video. 10 00:00:24,560 --> 00:00:25,370 Let's get started. 11 00:00:26,930 --> 00:00:30,409 This is what the user interface of the microblog is going to look 12 00:00:30,409 --> 00:00:33,830 like and if this looks almost impossible to create in your eyes. 13 00:00:34,070 --> 00:00:36,890 Don't worry, it's actually much simpler than it looks. 14 00:00:36,920 --> 00:00:38,840 And throughout the section, I'm going to guide you through 15 00:00:38,840 --> 00:00:41,090 how to create this entire app. 16 00:00:41,590 --> 00:00:44,350 You can see there are four main parts to this project. 17 00:00:44,380 --> 00:00:49,210 There's a header up here with the logo and the brand name as well as the navigation. 18 00:00:49,495 --> 00:00:51,595 There's a recent and a calendar link. 19 00:00:52,108 --> 00:00:55,588 Then you've got a form for creating new entries and all the 20 00:00:55,588 --> 00:00:59,248 previous entries that we've created together with a title and the date. 21 00:00:59,748 --> 00:01:02,958 And then at the bottom, we've got a footer that has some links. 22 00:01:02,988 --> 00:01:05,298 You can see that these are there in three columns. 23 00:01:05,798 --> 00:01:09,038 The main reason for implementing a project like this is so I can 24 00:01:09,038 --> 00:01:13,568 show you different ways to lay out elements using HTML and CSS. 25 00:01:14,138 --> 00:01:18,698 We've got essentially three main rows of elements, if you will, then 26 00:01:18,698 --> 00:01:20,468 we've got a column of elements here. 27 00:01:20,528 --> 00:01:22,688 We've got multiple columns of elements down here. 28 00:01:22,808 --> 00:01:25,298 So we're going to explore how to do all of these things and how to think 29 00:01:25,298 --> 00:01:27,578 about HTML and CSS in this context. 30 00:01:28,078 --> 00:01:31,198 You can see up here, the navigation has two links, recent which is 31 00:01:31,198 --> 00:01:35,008 the homepage and the calendar which actually looks like this. 32 00:01:35,398 --> 00:01:38,548 We're not going to be implementing the calendar in the section because it's a 33 00:01:38,548 --> 00:01:42,148 little bit more complicated, but we may get back to it later on in the course. 34 00:01:42,648 --> 00:01:45,738 Building a complete project like this requires quite a few skills. 35 00:01:45,738 --> 00:01:48,798 So let's talk about the main ones you'll learn in this section. 36 00:01:49,368 --> 00:01:52,668 First, we're going to learn how to manage a software project, because we're going 37 00:01:52,668 --> 00:01:54,828 to start this project from scratch. 38 00:01:55,158 --> 00:01:58,818 We're going to start it as most projects do, which is starting as an idea. 39 00:01:59,148 --> 00:02:03,088 And over time ideas that we start will evolve into something else. 40 00:02:03,508 --> 00:02:04,498 We'll add features. 41 00:02:04,498 --> 00:02:05,788 We'll come up with new improvements. 42 00:02:05,788 --> 00:02:08,698 We change things following user requests, and much more. 43 00:02:09,218 --> 00:02:11,528 So throughout this section, we're going to learn about Agile and 44 00:02:11,528 --> 00:02:14,918 how to manage software projects so that you don't get too bogged down 45 00:02:14,918 --> 00:02:19,088 initially and by implementing things incrementally, you're going to keep 46 00:02:19,118 --> 00:02:21,518 motivation high and your users happy. 47 00:02:22,018 --> 00:02:26,398 Over the next few videos, I'm going to design this entire project from the 48 00:02:26,398 --> 00:02:30,028 ground up in front of you so I'm also going to teach you a bit about design 49 00:02:30,028 --> 00:02:32,188 principles and how to do these designs. 50 00:02:32,688 --> 00:02:35,358 Although this is not a design course, there will be some chapters where 51 00:02:35,358 --> 00:02:38,508 we talk about the practicalities of designing an application, as 52 00:02:38,508 --> 00:02:41,178 well as I'll give you information on how to become a better designer. 53 00:02:41,478 --> 00:02:45,198 Knowing some design principles can be helpful because it helps you understand 54 00:02:45,228 --> 00:02:48,858 other people's designs so you can learn more by looking at other people's work. 55 00:02:49,358 --> 00:02:51,608 We're also going to learn more HTML and CSS. 56 00:02:51,638 --> 00:02:54,068 Although we've learned a lot already, and we're going to use everything we've 57 00:02:54,068 --> 00:02:58,298 learned throughout the project development section of this course, I'm going to 58 00:02:58,298 --> 00:03:02,198 guide you through more HTML and CSS by example, so that it's easier to learn. 59 00:03:02,698 --> 00:03:05,068 Finally for this project, we're going to learn how to code a 60 00:03:05,098 --> 00:03:06,928 backend application with Flask. 61 00:03:07,318 --> 00:03:11,698 Although this section is only concerned with HTML, CSS, and design. 62 00:03:11,908 --> 00:03:15,928 In the next two sections, I'll teach you about Flask and how to add a 63 00:03:15,928 --> 00:03:18,178 backend with Flask to this project. 64 00:03:18,478 --> 00:03:20,938 That is going to let us store everything that we create in this 65 00:03:20,938 --> 00:03:22,978 project permanently into a database. 66 00:03:23,838 --> 00:03:25,788 So we've got a lot to learn in this section. 67 00:03:25,848 --> 00:03:27,528 Let's get started in the next video. 68 00:03:27,738 --> 00:03:28,458 I'll see you there.