Coding

The Frontend | Nuxt.js & Storyblok – Building a Complete Blog

  • 00:00:01 welcome to this video on this channel I
  • 00:00:04 have content on next chairs and also a
  • 00:00:07 little bit on story block a content
  • 00:00:10 management system which we use on our
  • 00:00:11 page behind the scenes and I thought why
  • 00:00:14 don't we build a project with both this
  • 00:00:16 is what we'll have by the end of this
  • 00:00:17 video but this video is only the first
  • 00:00:19 in a mini series of videos where we will
  • 00:00:22 build an entire block with knacks chairs
  • 00:00:25 and view chairs for our front-end with
  • 00:00:27 this awesome about us page but see a
  • 00:00:29 little bit better looking post page here
  • 00:00:31 and where a story block the content
  • 00:00:34 management system will also be set up
  • 00:00:36 from scratch so that you will learn how
  • 00:00:38 you can create posts there and load them
  • 00:00:40 into your front-end like this so let's
  • 00:00:43 get started with the first steps in this
  • 00:00:45 video
  • 00:00:49 now to get started we need a next
  • 00:00:52 project I will use create next app which
  • 00:00:55 is like a CLI a command-line interface
  • 00:00:57 which makes the creation of Munich's
  • 00:00:59 projects very easy you can simply Google
  • 00:01:02 for create next app and you will find
  • 00:01:04 this github page here of their project
  • 00:01:08 basically now there you all defined
  • 00:01:10 setup instructions and if you got npm
  • 00:01:12 version 5.2 or a higher installed you
  • 00:01:15 can use that useful npx command you get
  • 00:01:17 that npm version simply by visiting
  • 00:01:19 node.js org and by downloading and
  • 00:01:22 installing the latest version there
  • 00:01:24 which you'll need anyways to develop a
  • 00:01:26 next application so this is the command
  • 00:01:30 you want to run to create a new project
  • 00:01:31 and I will run it in my terminal
  • 00:01:34 navigated into the folder where I want
  • 00:01:36 to create my project folder so I'll run
  • 00:01:39 npx create – next – up here and then the
  • 00:01:44 name of the project and I'll name it
  • 00:01:45 story block – block because we're going
  • 00:01:49 to build a blog with well story block as
  • 00:01:51 a bagand story block is a content
  • 00:01:54 management system so let's hit enter
  • 00:01:56 here and now we're asked a couple of
  • 00:01:58 questions the name of the project the
  • 00:02:02 the description if you want to use a
  • 00:02:04 server framework but I don't because I
  • 00:02:07 won't write any server-side code we will
  • 00:02:09 use these server side rendering
  • 00:02:10 capabilities of next but I won't add any
  • 00:02:14 other server-side code so I'll pick non
  • 00:02:16 here then if we want to use a UI
  • 00:02:18 framework I'll also pick non here though
  • 00:02:20 you could of course implement or add
  • 00:02:22 bootstrap beautify whatever you want
  • 00:02:25 here if you want to build a universal or
  • 00:02:28 a single page application and you can
  • 00:02:31 always change that you can change that
  • 00:02:33 from within the next config file later
  • 00:02:35 on but I will go with universal right
  • 00:02:37 from the start because hey that's one of
  • 00:02:39 the coolest features of next then if you
  • 00:02:42 want to include the Axios module now
  • 00:02:45 Axios is JavaScript Ajax library and I
  • 00:02:49 want to use it I want to send Ajax
  • 00:02:51 requests so let's say yes linting why
  • 00:02:55 not let's add it my name that's correct
  • 00:02:57 and which package manager I want to use
  • 00:02:59 and I will go with NPM now this will
  • 00:03:02 creates the prod
  • 00:03:03 checked and automatically install all
  • 00:03:05 the dependencies and once it's done I'll
  • 00:03:07 open it with Visual Studio code which is
  • 00:03:10 the IDE I'm going to use it's free it's
  • 00:03:13 great
  • 00:03:13 why wouldn't we use it so let's wait for
  • 00:03:16 it to finish and here we are inside of
  • 00:03:18 the ID I'll open the terminal that's
  • 00:03:21 simply the terminal which ships with
  • 00:03:23 Visual Studio code it's the normal
  • 00:03:26 system terminal though and it's already
  • 00:03:28 navigated into that project folder now
  • 00:03:30 in there we can run npm run dev to start
  • 00:03:33 the development server to preview our
  • 00:03:35 application now this development server
  • 00:03:38 will automatically reload whenever we
  • 00:03:40 change something in a code so that's
  • 00:03:42 really awesome it does a lot of work for
  • 00:03:43 us it opens this page there after a
  • 00:03:47 localhost 3000 is the default address
  • 00:03:49 and here we just got some starting page
  • 00:03:51 which well it's given to us out of the
  • 00:03:54 box and a new project created with
  • 00:03:56 create NOC step now also use get so let
  • 00:04:00 me quickly open a new tab in this
  • 00:04:02 terminal keep the other process running
  • 00:04:04 though you want to keep that development
  • 00:04:06 server running as long as you work on it
  • 00:04:07 and then I'll quickly do my initial
  • 00:04:09 commit so that I later can also share my
  • 00:04:17 code with you so this is the default
  • 00:04:20 structure and new next project ships
  • 00:04:22 with and if this is all brand new to you
  • 00:04:25 check out the next resources I already
  • 00:04:27 got of course the most important one my
  • 00:04:31 udemy course but also the articles the
  • 00:04:33 video here on YouTube got a lot of
  • 00:04:34 resources on that so to have to check
  • 00:04:36 that out links in the video description
  • 00:04:37 and next works a lot with so called
  • 00:04:41 pages now in my blog here I'm gonna have
  • 00:04:44 three page that's essentially the
  • 00:04:47 starting page which we already got here
  • 00:04:48 then and about as page which just holds
  • 00:04:52 some dummy content but every blog has
  • 00:04:54 one so let's add one and a page to load
  • 00:04:58 a single blog post so if we click on a
  • 00:05:00 post from the list of posts then this
  • 00:05:03 single blog post should open to create
  • 00:05:05 more pages we need to add files or
  • 00:05:07 folders in the pages folder and I liked
  • 00:05:11 an approach of creating a subfolder for
  • 00:05:13 every path segment which then holds an
  • 00:05:16 index but view
  • 00:05:17 faul so let's create 140 about page it's
  • 00:05:20 simply an about folder in the pages
  • 00:05:21 folder and in that about folder I'll add
  • 00:05:24 an index dot view file and this is the
  • 00:05:26 file holding the content which we will
  • 00:05:28 see once we wizard the about page I'll
  • 00:05:32 also add another folder in the pages
  • 00:05:34 folder and this is the folder which
  • 00:05:36 holds the page that should get loaded if
  • 00:05:39 we click on a blog post now such a blog
  • 00:05:42 post of course will have some ID some
  • 00:05:45 identifier and this identifier should be
  • 00:05:47 encoded in the URL so that we
  • 00:05:50 essentially can get this blog post we
  • 00:05:53 want to load from the URL and
  • 00:05:55 dynamically load it into this page
  • 00:05:57 because I certainly don't want to hard
  • 00:05:59 code a page for every blog post will
  • 00:06:01 eventually have this is impossible to do
  • 00:06:04 during development so here I expect to
  • 00:06:06 get a post ID and I'll name the folder
  • 00:06:10 post id therefore and in that folder
  • 00:06:13 I'll again at my index dot view fall
  • 00:06:15 this will later hold the content for a
  • 00:06:17 single post now let's go back to the
  • 00:06:21 about page though that is very easy to
  • 00:06:23 finish let's work on that first and in
  • 00:06:26 there we create a normal view component
  • 00:06:28 because it's a dot view file a single
  • 00:06:31 component file in that template I want
  • 00:06:34 to create a section so the normal HTML
  • 00:06:36 section element and I'll give that
  • 00:06:38 section an ID which is about – page and
  • 00:06:43 on this about page I want to have some
  • 00:06:47 title where we say hey that's us welcome
  • 00:06:50 to this page so maybe h1 tag hi that's
  • 00:06:53 us we can always treat this later
  • 00:06:55 and some text so here we could say we're
  • 00:06:58 a bunch of highly motivated and talented
  • 00:07:03 people blogging about tech stuff so
  • 00:07:09 that's my awesome about page and we can
  • 00:07:12 already see it in action if we go to our
  • 00:07:14 page and there if we enter slash about
  • 00:07:17 after the 3000 from localhost 3000 there
  • 00:07:22 we see our content in the top left
  • 00:07:25 corner I would agree that we can't
  • 00:07:28 improve this from our styling
  • 00:07:29 perspective
  • 00:07:30 no probably also from a Content
  • 00:07:32 perspective but let's stick to that for
  • 00:07:34 now but I want to focus on the blog part
  • 00:07:37 on the back end on the dynamic part I
  • 00:07:40 guess that's more interesting so here we
  • 00:07:43 got our about page not finished but it's
  • 00:07:47 it's good for now we'll revisit it later
  • 00:07:49 let's now work on the front page and the
  • 00:07:53 general styling of our application I
  • 00:07:55 want to control the general styling in
  • 00:07:58 my main layout which we can find in the
  • 00:08:00 layouts folder there you find a default
  • 00:08:03 view file and in that default dot view
  • 00:08:05 file you find well the starting code
  • 00:08:08 this new project gave you out-of-the-box
  • 00:08:10 I will actually get rid of all of that
  • 00:08:13 because I want to write it for myself
  • 00:08:15 and first of all I'll add the CSS
  • 00:08:18 universal selector to select all
  • 00:08:20 elements and I'll set box sizing to
  • 00:08:23 border box because I hate that behavior
  • 00:08:25 of content box where we end up with
  • 00:08:28 where's sizes because the size is
  • 00:08:30 calculated based on the content and so
  • 00:08:33 on so let's use that to reset this CSS
  • 00:08:36 behavior and let's also maybe add a nice
  • 00:08:39 font to this application now of course
  • 00:08:42 we can add a font with font family and
  • 00:08:44 please note that I set up my body style
  • 00:08:46 here in the style text of a default of
  • 00:08:49 you file and I'm not using this style
  • 00:08:51 scoping feature so this will really be
  • 00:08:54 applied anywhere on the page because in
  • 00:08:56 case you didn't know the pages we load
  • 00:08:59 from the pages folder will get rendered
  • 00:09:01 in the place of the next hook here so
  • 00:09:03 this default layout here wraps all the
  • 00:09:06 pages so the style setup here are
  • 00:09:08 applied to every page and as I said I
  • 00:09:11 want to use a font family and we could
  • 00:09:13 just use cents serif here for example to
  • 00:09:15 use the browser defaults and serif font
  • 00:09:18 if I reload this page doesn't look too
  • 00:09:21 bad but we can improve this I want to
  • 00:09:23 use a custom font for that I'll wizard
  • 00:09:26 google fonts simply Google for it and
  • 00:09:30 the font I want use is called lotto Leto
  • 00:09:34 I don't know so this one if we click the
  • 00:09:37 plus we get this feature here at the
  • 00:09:40 bottom which allows us to easily
  • 00:09:41 implement this font on our page
  • 00:09:44 and I'll also grab the Baldwin just in
  • 00:09:48 case we need it and now we would
  • 00:09:50 normally take that link here go back to
  • 00:09:52 our code and paste that into our
  • 00:09:54 index.html file or in whichever HTML
  • 00:09:58 file we want to use it in the little
  • 00:10:00 problem we have with the snacks project
  • 00:10:02 is that we got no HTML file to paste
  • 00:10:05 this in we got a bunch of dot view files
  • 00:10:07 but no HTML file well we got that next
  • 00:10:11 config file though in here we see a
  • 00:10:14 bunch of interesting stuff and we get
  • 00:10:17 this head sections of this head property
  • 00:10:20 in the exported object this essentially
  • 00:10:23 allows us to define which content should
  • 00:10:25 be rendered in the head area of our page
  • 00:10:29 actually we also can add some content
  • 00:10:31 here which is rendered at the end of
  • 00:10:33 body scripts and so on because this uses
  • 00:10:35 view meta behind the scenes a third
  • 00:10:38 party package that makes the addition of
  • 00:10:40 meta tags and so on very easy and it
  • 00:10:43 doesn't just focus on meta text of which
  • 00:10:45 we also render some as you can see here
  • 00:10:46 it also helps us with the rendering of
  • 00:10:49 links here we're having a link to the
  • 00:10:52 favicon but now I can and add a new link
  • 00:10:56 with by adding a JavaScript object here
  • 00:10:59 in this array in this link array to be
  • 00:11:02 precise and I'll give this a real
  • 00:11:04 property of stylesheet and then if you
  • 00:11:09 go back we need to set the hyper
  • 00:11:11 reference attribute to this link which
  • 00:11:15 all go back and simply add an H ref
  • 00:11:17 property and set it to a string which
  • 00:11:19 holds this link if I save this now it
  • 00:11:23 imports Lotto so let's go back to the
  • 00:11:26 default of you file in the layouts
  • 00:11:28 folder and let's use dead and then fall
  • 00:11:31 back to send Seraph so now if we use
  • 00:11:33 that maybe put it between double
  • 00:11:36 quotation marks though would work
  • 00:11:38 otherwise – but this is cleaner now we
  • 00:11:41 can go back to our page and reload and
  • 00:11:43 we see that font changed and if we
  • 00:11:46 inspect it and open in the browser tools
  • 00:11:49 here the developer tools we can see that
  • 00:11:54 our text here indeed receives the
  • 00:11:58 lotta font-family and it does so because
  • 00:12:01 if we open the head section here we see
  • 00:12:04 that this link tag here was added and of
  • 00:12:08 course this happens because we added
  • 00:12:11 this link entry in the next config file
  • 00:12:14 so this is then handled by next end by
  • 00:12:17 the view meta package I mentioned this
  • 00:12:19 is then handled and basically turned
  • 00:12:22 into such a HTML element which is
  • 00:12:24 injected automatically for us now whilst
  • 00:12:27 we're here we can also change the title
  • 00:12:28 here from package name maybe to story
  • 00:12:32 block plus next equals love and you
  • 00:12:38 could also enter any description you
  • 00:12:39 want here this is the meta tag to this
  • 00:12:42 description meta tag which will define
  • 00:12:44 the description you see on the Google
  • 00:12:47 search when finding this page so here we
  • 00:12:51 can simply add an awesome blog about
  • 00:12:55 tech stuff built with next and story
  • 00:13:00 block so this is my description which I
  • 00:13:03 want to enter here maybe I shouldn't
  • 00:13:06 have deleted the content property or
  • 00:13:08 though so content and the values and the
  • 00:13:10 description here and now if we save this
  • 00:13:12 it should still work this is just a tiny
  • 00:13:14 update affecting the title we can see up
  • 00:13:17 here and also of course having an effect
  • 00:13:20 on this content meta tag this one here
  • 00:13:24 with that we're still on the styling
  • 00:13:27 side but this was important this is
  • 00:13:29 important to understand how it works
  • 00:13:31 now I'm back in my default dot view file
  • 00:13:35 and now I just want you wrap my next
  • 00:13:39 part here so this next tag with the main
  • 00:13:43 element text so this is a default HTML
  • 00:13:46 element main and I'll give it a class of
  • 00:13:52 main – content and down there in my
  • 00:13:57 style tags all give main content a style
  • 00:14:00 of margin top 4.5 Ram so that we have
  • 00:14:04 some spacing to the top until we will
  • 00:14:07 later add a header that being said let's
  • 00:14:11 add such a head
  • 00:14:11 because it would be nice if we could go
  • 00:14:13 back to the starting page so we want to
  • 00:14:16 add a header and a header is also a view
  • 00:14:20 component but not a page we don't load
  • 00:14:23 it standalone to occupy the entire page
  • 00:14:25 instead it goes into the components
  • 00:14:28 folder because it'll be a reusable
  • 00:14:30 component will actually only use it once
  • 00:14:33 but it will affect all the pages of our
  • 00:14:35 app and anything which isn't a page
  • 00:14:37 simply goes into the components folder
  • 00:14:40 so let's add the header there and for
  • 00:14:43 that I'll add a subfolder which I named
  • 00:14:45 the header this name might look strange
  • 00:14:47 to you
  • 00:14:48 but it actually follows the official
  • 00:14:49 views style guide which basically tells
  • 00:14:52 us that if we build a component that we
  • 00:14:54 will only use once and we will only use
  • 00:14:57 the header once we should name it there
  • 00:15:00 and then the component name so here it's
  • 00:15:02 the header and it holds the the header
  • 00:15:04 dot view file which is the actual
  • 00:15:06 component I guess now in the their
  • 00:15:09 header file I'll add my template I'll
  • 00:15:12 add a header HTML element here which
  • 00:15:16 I'll give CSS class of main header and
  • 00:15:22 which will also give a nav element as a
  • 00:15:24 child which will also receive a class
  • 00:15:27 and here the class's main – Neph now in
  • 00:15:30 that navigation element here I'll add an
  • 00:15:33 unordered list which will give a class
  • 00:15:35 of nav links and in that unordered list
  • 00:15:39 I'll now add a cup of next link objects
  • 00:15:42 now next link is a new element when you
  • 00:15:46 don't know from vanilla beauteous
  • 00:15:48 because next link allows you to link to
  • 00:15:51 a different next page it's essentially
  • 00:15:54 the same as a router link in a normal
  • 00:15:56 view arm project in here I'll add a link
  • 00:16:00 to all posts you could also name this
  • 00:16:03 home I guess
  • 00:16:03 and one link to the about page now you
  • 00:16:09 might say there's one thing missing here
  • 00:16:12 the list item right we should wrap this
  • 00:16:16 next link in a list item because we're
  • 00:16:18 in the unordered list and you'd be right
  • 00:16:20 semantically we should add a list item
  • 00:16:22 but I'll not wrap the next link with one
  • 00:16:25 I'll instead take advantage of the tech
  • 00:16:27 property which I can set on it and there
  • 00:16:30 I will set tag to Li this means the link
  • 00:16:33 will actually be a list item object or
  • 00:16:37 element but this also means that we need
  • 00:16:39 to nest a anchor tag without any
  • 00:16:42 attributes inside of it so just an empty
  • 00:16:44 anchor tag and this will then be handled
  • 00:16:47 by by next door by view behind the
  • 00:16:49 scenes to be precise and it will give us
  • 00:16:51 a anchor tag wrapped with a link wrapped
  • 00:16:54 with a list item where we can click the
  • 00:16:56 entire list item so here tag is also Li
  • 00:17:01 now we got this set up one thing that's
  • 00:17:04 missing of course is the two property
  • 00:17:07 which defines where this should lead to
  • 00:17:08 and for all posts I want to go to the
  • 00:17:11 start page for about I wanna go to the
  • 00:17:14 about page so here it's just slash about
  • 00:17:16 now we got our basic header set up we
  • 00:17:21 can probably still improve this a bit
  • 00:17:23 but let's take this for now and let's
  • 00:17:27 add a style tag here now we can also add
  • 00:17:31 scoped here to ensure that whichever
  • 00:17:33 Styles we set up here are only applied
  • 00:17:35 to the header and this is a fine
  • 00:17:38 solution to ensure that we don't
  • 00:17:39 accidentally overwrite our Styles
  • 00:17:41 somewhere else in the application though
  • 00:17:43 you could of course also use a CSS
  • 00:17:46 technique like ve m block element
  • 00:17:48 modifier to ensure the same but here I
  • 00:17:51 will use my my style like this and I'll
  • 00:17:56 add main header now main header is fixed
  • 00:18:02 or should be fixed to the top will
  • 00:18:04 therefore receive top and left off 0
  • 00:18:06 should span the entire width of the page
  • 00:18:09 and should also maybe have a background
  • 00:18:13 color and for that I picked a nice color
  • 00:18:16 which is 0 to 2 D 30 this is a dark
  • 00:18:21 bluish color now if we save that in
  • 00:18:24 order to see it we need to use that
  • 00:18:26 header and I want to use it in my
  • 00:18:28 default layout because of course it
  • 00:18:30 should be visible on every page so I
  • 00:18:32 need to include it on every page and
  • 00:18:35 what is included on every page the
  • 00:18:37 layout it holds
  • 00:18:39 the part which is rendered why are the
  • 00:18:40 pages folder in the end so in the
  • 00:18:43 default of you fault
  • 00:18:44 I want you use the header and for that
  • 00:18:46 I'll add a script section in which I can
  • 00:18:49 import my header component so I'll
  • 00:18:52 import the header from and now in an ax
  • 00:18:55 project we can use it as an alias for
  • 00:18:58 the root folder so it's add slash
  • 00:19:00 components slash the header slash the
  • 00:19:04 header you can omit that view you should
  • 00:19:07 emit DW because it will be added
  • 00:19:10 automatically and then in this view
  • 00:19:12 JavaScript object here I'll simply add
  • 00:19:15 the components property and registered
  • 00:19:19 the header like this this is taking
  • 00:19:21 advantage of es6 I think feature which
  • 00:19:24 will basically automatically expand this
  • 00:19:27 property to their header the header so
  • 00:19:30 if the value has the same name as the
  • 00:19:32 property you can omit the value and the
  • 00:19:35 colon and it will automatically expand
  • 00:19:37 this so now we make the header component
  • 00:19:41 available locally in this component it's
  • 00:19:44 not a global component we can't use it
  • 00:19:46 anywhere but I only want to use it here
  • 00:19:48 so inside this div above my main section
  • 00:19:52 I'll now add the header like this a self
  • 00:19:55 closing tag and yes you can use it like
  • 00:19:58 this with capital characters because
  • 00:20:00 this is a template parsed by next or by
  • 00:20:03 view to be precise and view of course is
  • 00:20:06 case-sensitive so you can use case
  • 00:20:09 sensitive tags there and actually this
  • 00:20:12 is a recommended best practice though
  • 00:20:14 you can also use the header like this
  • 00:20:17 but since we got the possible that
  • 00:20:20 you've using it like this why don't we
  • 00:20:22 do so so now the header is included
  • 00:20:24 let's now go back and reload and yeah we
  • 00:20:27 can see the header there it is not super
  • 00:20:30 beautiful but we can get there now let's
  • 00:20:33 work on the look of the header of course
  • 00:20:34 it's not entirely looking the way I
  • 00:20:36 wanted to look so in that header we got
  • 00:20:39 our nav element and in the nav element
  • 00:20:41 we got the math links so maybe we should
  • 00:20:43 stall these nav links a bit so let's add
  • 00:20:46 a selector to nath links let's first of
  • 00:20:49 all set the list style to non to remove
  • 00:20:51 the bullet points
  • 00:20:53 let's remove any margin and padding we
  • 00:20:55 have we by default have one because it's
  • 00:20:57 a unordered list element and I want to
  • 00:21:01 use flexbox here to distribute the list
  • 00:21:04 items next to each other so I'll set the
  • 00:21:06 display here to flex and justify content
  • 00:21:09 will then be lets say Center to Center
  • 00:21:12 them in the middle of the navigation bar
  • 00:21:14 and align items will all be Center two
  • 00:21:18 also Center them vertically in the
  • 00:21:20 navigation bar or in the entire header
  • 00:21:22 actually I'll also give my nav legs a
  • 00:21:25 height of 100% and that means I'll also
  • 00:21:29 give my main nav a height of 100%
  • 00:21:33 because this in turn allows me to give
  • 00:21:36 my header a clearly defined height so
  • 00:21:39 that everything is well adjusting itself
  • 00:21:43 inside of that header and here I'll set
  • 00:21:45 a height of 4.5 rim which happens to be
  • 00:21:48 exactly the size I added as a margin top
  • 00:21:51 on my main content this ensures that the
  • 00:21:54 my main content doesn't go beneath the
  • 00:21:57 header which is in a fixed position and
  • 00:21:59 therefore taking out of the document
  • 00:22:01 flow so now I added my height to the
  • 00:22:04 header and to the main nav and to the
  • 00:22:07 links and the links are now using
  • 00:22:10 flexbox to position them next to each
  • 00:22:12 other let's have a quick look at how
  • 00:22:14 this looks like right now doesn't look
  • 00:22:17 too bad the links of course need some
  • 00:22:19 styling so I want to give my individual
  • 00:22:23 link items some nice stars and for that
  • 00:22:26 I'll actually add a CSS class to my next
  • 00:22:29 links and I'll name it nav link here so
  • 00:22:32 the nav link class is added to both
  • 00:22:35 directly on the next link object this is
  • 00:22:38 possible because it will be replaced by
  • 00:22:40 a list item in the end so now we can go
  • 00:22:43 down nav link was the class so let's
  • 00:22:46 select nav link here like that and the
  • 00:22:51 naff link itself doesn't really need a
  • 00:22:54 style right now but the anchor tag I
  • 00:22:56 want to style the anchor tag I want to
  • 00:22:58 set it to display:block so that it takes
  • 00:23:01 the full width of the list item I want
  • 00:23:04 to remove the underline so text
  • 00:23:06 decoration should
  • 00:23:06 beam on and I'll give it a white color
  • 00:23:09 so that we can see it a bit better in
  • 00:23:11 front of the dark blue background now I
  • 00:23:15 also want to target the naff link itself
  • 00:23:17 so this list item element it should
  • 00:23:20 receive a height of 100 percent so it
  • 00:23:22 should take to full height off my of my
  • 00:23:25 header I'll also set the display to Flex
  • 00:23:28 here so that I can Center the text in
  • 00:23:31 there vertically and I achieved this
  • 00:23:33 centering by using justified content and
  • 00:23:36 setting it to center and align items and
  • 00:23:38 setting it to Center this will Center
  • 00:23:41 the link text vertically and
  • 00:23:43 horizontally in this linked list item
  • 00:23:46 I'll add a margin of let's say 1 R M to
  • 00:23:49 the left and right so that there is some
  • 00:23:51 spacing between my linked items and I
  • 00:23:56 want to add a padding of let's say 0.3
  • 00:24:00 REM in all directions with that if we
  • 00:24:02 save this this doesn't look too bad
  • 00:24:04 actually
  • 00:24:05 we got no hover effect or anything like
  • 00:24:07 that but the links could look worse I
  • 00:24:10 believe so let's now work on hover
  • 00:24:14 effects for that I'll add another link
  • 00:24:18 and now will ya nav link and then the
  • 00:24:21 anchor tag select it if it's inside of
  • 00:24:24 such an Earthling which of course is the
  • 00:24:26 case and that'll add the hover pseudo
  • 00:24:28 selector and the same with the active
  • 00:24:31 pseudo selector so here I got a group
  • 00:24:34 rule with two selectors for which the
  • 00:24:36 same rule should apply and in that rule
  • 00:24:39 I'll simply set the color to a lighter
  • 00:24:41 blue for that I will use the hex code
  • 00:24:44 0-6 C for D 1 now this should look nice
  • 00:24:49 if we reload we can see does not choose
  • 00:24:54 shabby now we're on the about page
  • 00:24:56 wouldn't it be great if this would kind
  • 00:24:58 of be visible here by well highlighting
  • 00:25:02 this all the time the about part if we
  • 00:25:04 inspect that about link we can actually
  • 00:25:06 see that it get a couple of classes our
  • 00:25:09 nav link class but all the very short
  • 00:25:12 class name next link except active and
  • 00:25:15 another class next link active sounds
  • 00:25:20 like if we
  • 00:25:21 the next link activeclass a style we
  • 00:25:24 could always see that style whenever
  • 00:25:26 this is active so let's give that a try
  • 00:25:29 let's go back and let's now give our nav
  • 00:25:35 link a different style I want to
  • 00:25:37 essentially use the same style a half
  • 00:25:39 for hovering and active so I'll add nav
  • 00:25:41 link a and now only anchor tags which
  • 00:25:45 have the next link active style if I do
  • 00:25:50 that and I save and we reload nothing
  • 00:25:54 changed so let's see yeah obviously this
  • 00:25:59 is incorrect
  • 00:26:00 I want to select all anchor tags that
  • 00:26:03 are nested in the nav link where the nav
  • 00:26:05 link has the next link active style
  • 00:26:06 sorry about that so if we change the
  • 00:26:09 next link active selector to the nav
  • 00:26:11 link itself and we reload hmm both is
  • 00:26:14 blue
  • 00:26:14 the reason for this is that if we watch
  • 00:26:16 closely in the developer tools we can
  • 00:26:18 see that the aveline also got the next
  • 00:26:21 link active style the reason for this is
  • 00:26:24 that this other link leads to just slash
  • 00:26:27 and actually the question wherever this
  • 00:26:31 link is active or not is answered based
  • 00:26:33 on whether the current path in our URL
  • 00:26:35 starts with dead link and obviously
  • 00:26:38 every path starts with just nothing
  • 00:26:41 essentially so just a slash therefore
  • 00:26:43 this is always active the reason why
  • 00:26:47 this behavior works like this or why we
  • 00:26:48 got it like this is of course that this
  • 00:26:50 allows us to also mark a certain link in
  • 00:26:55 the navigation is active if we are on a
  • 00:26:57 child page and here we aren't though and
  • 00:27:00 I want to have exact matching thankfully
  • 00:27:03 there is this next link exact active
  • 00:27:06 class this is only applied to the link
  • 00:27:08 which is exactly active so where the
  • 00:27:11 full path matches this link and that's
  • 00:27:13 only the case for the second link on the
  • 00:27:15 about page so we just need to tweak that
  • 00:27:18 and say that we want to apply this color
  • 00:27:20 to any anchor tag that's in an aflink
  • 00:27:23 which has the next link exact active
  • 00:27:27 class if we change it like this and we
  • 00:27:29 go back now just the about page is
  • 00:27:32 active if we go to all posts
  • 00:27:34 just all post is active so this is
  • 00:27:37 looking much better now the last but not
  • 00:27:39 least I want to also tweet the style of
  • 00:27:41 my Nath link so add another style where
  • 00:27:45 I say Neff link with a class of next
  • 00:27:48 link exact active should also get its
  • 00:27:52 special style there I want to set a
  • 00:27:55 border bottom of let's say 3 pixels
  • 00:27:59 solid and also this bluish color here so
  • 00:28:03 0-6 C 41 with that if we save and reload
  • 00:28:08 now we can see that slight blue border
  • 00:28:11 at the bottom for the active page now
  • 00:28:14 this is the look I want to have for now
  • 00:28:16 this is the look with which we can work
  • 00:28:18 now let's see which next steps we can
  • 00:28:20 take I think one next step we can take
  • 00:28:23 is that we work on our index page right
  • 00:28:26 now we still got the dummy content here
  • 00:28:28 with which we started now I want to
  • 00:28:31 render some posts there and then it's
  • 00:28:33 also time to connect our back end
  • 00:28:35 because we haven't done that at all
  • 00:28:37 so here I'll actually get rid of all the
  • 00:28:39 content in the page I'll get rid of that
  • 00:28:41 logo component import and of the logo
  • 00:28:45 component declaration in my script here
  • 00:28:48 I'll also get rid of all the styles
  • 00:28:51 which are set up here so that this is
  • 00:28:52 completely empty and now we can also
  • 00:28:55 delete that logo component in the
  • 00:28:57 components folder so now we essentially
  • 00:28:59 got an empty starting page no content at
  • 00:29:03 all but also no error as you can see if
  • 00:29:06 we reload so now let's work on that and
  • 00:29:09 let's render a poster or a list of posts
  • 00:29:13 actually for this the question of course
  • 00:29:15 is how should a post look like now let's
  • 00:29:18 create one let's maybe create an article
  • 00:29:21 here an article element and that should
  • 00:29:25 represent a single post so I'll give it
  • 00:29:27 a class of post preview because actually
  • 00:29:29 this will not be the entire post it's
  • 00:29:31 just an excerpt to preview we can click
  • 00:29:34 on this to reach the entire post and if
  • 00:29:37 we can click on this we maybe should
  • 00:29:39 also wrap this with a next link which
  • 00:29:42 leads to the post page then in the end
  • 00:29:45 now we created that single post page
  • 00:29:48 already
  • 00:29:48 don't forget that we got that indexed of
  • 00:29:50 you file and you post a new folder and
  • 00:29:52 therefore here to that next link I'll
  • 00:29:55 also add the two property but that of
  • 00:29:57 course should be populated dynamically
  • 00:30:00 the exact link differs depending on
  • 00:30:02 which post preview we're rendering here
  • 00:30:04 so I'll expect you kind of loop through
  • 00:30:08 a bunch of posts to then output them
  • 00:30:12 here so maybe we need a data source
  • 00:30:14 first let's go to our JavaScript object
  • 00:30:18 for that and let's add the data method
  • 00:30:21 and simply return an object in there so
  • 00:30:24 this is standard view has nothing to do
  • 00:30:27 with next or story block this is
  • 00:30:28 standard view we can add data to this
  • 00:30:31 component and never forget a page is
  • 00:30:34 just a component and in there I now want
  • 00:30:37 to set up a post property which is an
  • 00:30:40 array where we could have multiple posts
  • 00:30:43 a post is simply a JavaScript object
  • 00:30:45 which has let's say a title a new
  • 00:30:52 beginning to start very dramatically
  • 00:30:55 which get a preview text let's say this
  • 00:31:00 will be awesome don't miss it something
  • 00:31:07 like that and also a thumbnail URL so a
  • 00:31:13 URL leading to a thumbnail we stored on
  • 00:31:16 some server now you can simply Google
  • 00:31:18 any image you want with Google images
  • 00:31:20 here I prepared a simple link will of
  • 00:31:22 course add our own images once you got a
  • 00:31:24 back-end and then I'll add an ID – new
  • 00:31:28 beginning and ID doesn't have to be a
  • 00:31:30 number after all it can be text it just
  • 00:31:32 should be unique and let's say that our
  • 00:31:34 back-end creates this uniquely now I'll
  • 00:31:38 copy that and add a second object in
  • 00:31:43 that array and here all named as a
  • 00:31:45 second beginning which makes a lot of
  • 00:31:47 sense I guess and give it an idea of
  • 00:31:49 second beginning and leave the rest of
  • 00:31:50 the content this is really just to play
  • 00:31:52 around with it so now we got that posts
  • 00:31:55 array and that could be posts as we
  • 00:31:57 fetch them from a server I guess so now
  • 00:32:00 let's loop through our posts
  • 00:32:02 on this next link with v4 there I will
  • 00:32:07 loop through my posts with the normal v4
  • 00:32:10 syntax post in posts referring to that
  • 00:32:13 posts property of course and if we use
  • 00:32:16 v4 we should also use the key property
  • 00:32:19 bind it to a dynamic value namely – post
  • 00:32:22 ID now we can use that same ID as a link
  • 00:32:26 because we expect to get the post ID as
  • 00:32:29 part of the link anyways so why don't we
  • 00:32:32 bind to dynamically and also bind that
  • 00:32:35 to post ID I guess it makes a lot of
  • 00:32:37 sense so now we're rendering a list of
  • 00:32:41 posts which will be clickable which will
  • 00:32:44 lead us to our single post page in the
  • 00:32:47 end now on the page there's no content
  • 00:32:49 yet but we'll get there step by step we
  • 00:32:52 also get this well a little bit boring
  • 00:32:55 article here because doesn't hold too
  • 00:32:57 much content so in that article let's
  • 00:33:00 add some content let's add a div with a
  • 00:33:03 class of post preview thumbnail for
  • 00:33:06 example and you can of course again use
  • 00:33:10 different class names whatever you like
  • 00:33:11 and that will actually hold my
  • 00:33:14 background image now the background
  • 00:33:15 image of course is also loaded
  • 00:33:17 dynamically we got that URL here in our
  • 00:33:20 object so we should access the thumbnail
  • 00:33:23 URL and set it as a background image and
  • 00:33:26 for this I'll simply bind style
  • 00:33:29 dynamically and in case you're
  • 00:33:31 relatively new to view this : dusty
  • 00:33:34 dynamic binding this : ensures that
  • 00:33:37 whatever we pass between the quotation
  • 00:33:39 marks here is interpreted as a dynamic
  • 00:33:42 value which has to be parsed by view and
  • 00:33:44 the value I want to parse here is post
  • 00:33:47 dot thumbnail URL so this will return a
  • 00:33:50 string which in the end is then bound to
  • 00:33:52 my style and that makes no sense we
  • 00:33:55 should use a JavaScript object here
  • 00:33:56 instead that's a syntax view we'll
  • 00:33:59 understand
  • 00:34:00 for this style property and the property
  • 00:34:03 in that object should be the CSS
  • 00:34:07 property we want to set so here this
  • 00:34:09 will be background image in camel case
  • 00:34:13 notation just as you access
  • 00:34:16 Styles in JavaScript – because
  • 00:34:19 background image with a – like this
  • 00:34:21 would be an invalid JavaScript property
  • 00:34:24 name and since this is a dynamic value
  • 00:34:26 this is treated as JavaScript it is
  • 00:34:29 executed as JavaScript so background
  • 00:34:32 image should hold post thumbnail URL as
  • 00:34:35 a value and this javascript object is
  • 00:34:38 first and understood by view which will
  • 00:34:41 then set the background image style on
  • 00:34:43 this element so that was a lot of
  • 00:34:46 talking for our background image here
  • 00:34:49 let's also add a second death here which
  • 00:34:53 will receive the class post preview
  • 00:34:55 content and in here I want to have a h1
  • 00:34:59 tag where I render my post title so now
  • 00:35:02 I'm referring to this property here and
  • 00:35:05 of course I also want to render my my
  • 00:35:09 preview text so here I will also add a
  • 00:35:11 paragraph where I render post preview
  • 00:35:15 like that so now I'm referring to sorry
  • 00:35:19 to this preview text should it be there
  • 00:35:21 for so now I'm referring to preview text
  • 00:35:24 here now we got our post let's save all
  • 00:35:28 of that and reload and the styling is
  • 00:35:30 missing but we can clearly see our post
  • 00:35:32 here we got two posts and if we click
  • 00:35:35 one we get an error because it does
  • 00:35:38 navigate us to slash a second beginning
  • 00:35:40 which is right but on that page we got
  • 00:35:43 no content in our view components so
  • 00:35:46 therefore it breaks additionally to the
  • 00:35:49 page breaking this is not the most
  • 00:35:52 beautiful layout I have ever seen so
  • 00:35:55 let's work on this too and before we
  • 00:35:57 work on this what could we do with this
  • 00:35:59 HTML code in our page here well we could
  • 00:36:05 put it into its own component view is
  • 00:36:09 all about components so creating new
  • 00:36:11 components to encapsulate certain
  • 00:36:13 features is always a good idea so let's
  • 00:36:16 go to the components folder here and
  • 00:36:18 let's add a new subfolder there which
  • 00:36:21 I'll name block and in that subfolder
  • 00:36:24 I'll add a component which shall named
  • 00:36:25 post preview dot view
  • 00:36:29 will receive the template tags here and
  • 00:36:31 there I now want to render my next link
  • 00:36:36 with the blog when note though we have
  • 00:36:40 to remove the we for loop and the key
  • 00:36:42 property we will still loop through our
  • 00:36:45 newly created component later not inside
  • 00:36:47 of that component so this just holds a
  • 00:36:50 single post preview and we will later
  • 00:36:53 replicate the post preview component
  • 00:36:55 therefore now of course the post preview
  • 00:36:58 also needs some additional meat to live
  • 00:37:02 to be precise all the data we're
  • 00:37:04 rendering is now not available because
  • 00:37:06 the post is not available here we have
  • 00:37:09 to get that data from outside instead
  • 00:37:11 and we do get it from outside with the
  • 00:37:14 help of props of course props is a view
  • 00:37:18 feature which allows us to set our own
  • 00:37:20 attributes so to say on our own elements
  • 00:37:25 so here prop is what I add to define
  • 00:37:28 which props this component will receive
  • 00:37:31 and I want to receive a title and I'll
  • 00:37:35 use the more complex props definition
  • 00:37:38 here where I then turn title into an
  • 00:37:41 object so that I can define which type
  • 00:37:43 this prop will be it'll be a string and
  • 00:37:45 if it's required or not and it is
  • 00:37:47 required and we will get an error if we
  • 00:37:50 use this component incorrectly this
  • 00:37:51 makes testing it and playing around with
  • 00:37:53 it a bit easier during development so we
  • 00:37:56 get the title I also want to have my
  • 00:37:59 let's name it excerpt so that's my
  • 00:38:01 preview text so my excerpt will also be
  • 00:38:04 of type string and I also do require
  • 00:38:08 this and I also want to have my
  • 00:38:11 thumbnail image here so that will be of
  • 00:38:15 type string cue it's a URL after all and
  • 00:38:18 this will also be required so that
  • 00:38:21 required true cue and last but not least
  • 00:38:25 I get the ID of that post this will hold
  • 00:38:28 to be a string as it turns out and this
  • 00:38:30 will also be required so not the most
  • 00:38:33 exciting props but hey it is what it is
  • 00:38:36 now with these props being available we
  • 00:38:39 know that they will be available because
  • 00:38:41 we set them all to
  • 00:38:42 required we can use them so instead of
  • 00:38:45 post ID it's not just ID referring to
  • 00:38:48 that ID property which we can access
  • 00:38:49 from the template instead of post from
  • 00:38:52 nail URL it's now just thumbnail URL
  • 00:38:55 because no it's fun tail image excuse me
  • 00:38:57 because that's what we set up here so
  • 00:38:59 fun nail image instead of post title
  • 00:39:01 it's just title because that's the name
  • 00:39:04 of our prop here and instead of post
  • 00:39:07 preview text it's now excerpt so now
  • 00:39:11 this component would work once we pass
  • 00:39:14 data from outside now let's all the work
  • 00:39:17 on this styling whilst we're here first
  • 00:39:20 of all I'll add my style text for this
  • 00:39:22 and I'll scope my stylings here again so
  • 00:39:25 that they can't leave this file and I
  • 00:39:29 want to stall my anchor tag so I wrapped
  • 00:39:32 this entire article with an anchor tag
  • 00:39:34 in the end do two next link I want to
  • 00:39:36 style this to remove any text decoration
  • 00:39:39 that it would add and to set the color
  • 00:39:42 to black so that our text color isn't
  • 00:39:44 just blue I don't want to have too blue
  • 00:39:46 color in my post here the post preview
  • 00:39:50 itself
  • 00:39:51 remember post preview this refers to the
  • 00:39:54 article element here the post preview
  • 00:39:57 itself should maybe get a border radius
  • 00:40:00 of 3 R M let three pixels let's say I
  • 00:40:05 also want to add a little box shadow of
  • 00:40:08 one pixel one pixel maybe five pixels
  • 00:40:13 and one pixels so this is XY blur and
  • 00:40:17 spread and then give it a box shadow of
  • 00:40:21 rgba 0 0 0.5 this will be a black shadow
  • 00:40:27 with 50% transparency and I'll give it a
  • 00:40:31 width of 90% so that the surrounding
  • 00:40:34 container will have to decide how much
  • 00:40:35 space this receives and a margin of auto
  • 00:40:39 to Center it horizontally and a height
  • 00:40:43 of let's say 20 REM next I want to stall
  • 00:40:48 my post preview thumbnail so let's grab
  • 00:40:52 this class here and add a CSS selector
  • 00:40:54 for it
  • 00:40:56 like that and the post preview thumbnail
  • 00:40:58 will receive the actual image through
  • 00:41:01 that dynamic binding we got here but of
  • 00:41:04 course the positioning of the image dad
  • 00:41:06 is something I want to define down here
  • 00:41:09 so I'll set background position and set
  • 00:41:12 it to center so that the image is always
  • 00:41:14 nicely centered and I'll add background
  • 00:41:17 size and set it to covered I also will
  • 00:41:20 give it a width of 100% so it did it has
  • 00:41:22 the full width of the surrounding
  • 00:41:24 container and a height of let's say 10 R
  • 00:41:26 M so that we can see something now I
  • 00:41:29 also get my content so the post preview
  • 00:41:32 content here let's also grab that and
  • 00:41:35 let's add a selector for that down here
  • 00:41:38 too and now the post preview content
  • 00:41:40 should be well styling the text I have
  • 00:41:43 in there so there I will add
  • 00:41:45 text-align:center to make sure all the
  • 00:41:47 text is nicely centered horizontally and
  • 00:41:49 maybe a padding of when R M so that
  • 00:41:52 unlike the image which should stretch to
  • 00:41:54 the edges of the surrounding box this
  • 00:41:57 doesn't I think this looks a bit nicer
  • 00:41:59 since the surrounding box will have a
  • 00:42:01 box shadow so I believe this doesn't
  • 00:42:04 look too pretty if our content touches
  • 00:42:07 the edges then so this is my layout for
  • 00:42:14 now now this is actually written mu L
  • 00:42:16 mobile first for bigger screens I'll add
  • 00:42:19 a media query here standard CSS feature
  • 00:42:22 and set a min width of let's say 35 REM
  • 00:42:27 which by default equals 560 pixels and
  • 00:42:31 for this layout so for screens that are
  • 00:42:33 bigger than that so for tablets and
  • 00:42:35 bigger I'll set my post previous style
  • 00:42:38 to a width of 25 REM instead of these 90
  • 00:42:42 % which I defined up here so that it's
  • 00:42:44 not as broad on bigger screens and I'll
  • 00:42:47 add a margin of 1 REM with that if we
  • 00:42:51 save we see no content on the starting
  • 00:42:53 page because we're not using the post
  • 00:42:55 preview component so let's start using
  • 00:42:58 it for this I'll go back to my index to
  • 00:43:00 view file in the pages folder and first
  • 00:43:03 of all I'll import it so I'll import
  • 00:43:05 post preview from add components
  • 00:43:10 blog post review like this now with that
  • 00:43:14 added I have to register it
  • 00:43:17 so in this javascript object of that
  • 00:43:19 view component I'll add the components
  • 00:43:21 key and I'll register post review like
  • 00:43:24 this year now we can start using it and
  • 00:43:27 now I want to use it together with a for
  • 00:43:30 loop of course because we still got that
  • 00:43:32 post data here so let's add v4 on our
  • 00:43:35 component and still loop through all
  • 00:43:37 posts with the same loop we used before
  • 00:43:40 so nothing new here but of course I now
  • 00:43:43 want to bind all the props post preview
  • 00:43:45 receives so I want to bind title excerpt
  • 00:43:49 thumbnail image and ID so let's do that
  • 00:43:52 let's go back to the index page let's
  • 00:43:55 bind title and they're all bound
  • 00:43:57 dynamically because obviously the value
  • 00:43:59 is dynamic I can't hard code it I don't
  • 00:44:01 know it in advance
  • 00:44:02 so here I'll bind post title then I'll
  • 00:44:06 bind my second value which is the
  • 00:44:09 excerpt that will now be this preview
  • 00:44:13 text I believe so here it's preview text
  • 00:44:16 to be precise it's post preview text
  • 00:44:19 then we got the thumbnail image and
  • 00:44:22 thereafter D I D so let's bind thumbnail
  • 00:44:26 image to post thumbnail URL that's the
  • 00:44:30 property name in the data here and let's
  • 00:44:34 now also add our our last thing the ID
  • 00:44:39 and it's bonded to post ID now with that
  • 00:44:42 if we save we see our posts here now one
  • 00:44:47 thing I also see is that I don't see the
  • 00:44:51 image background image so there's an
  • 00:44:54 error yeah there is a dump error in my
  • 00:44:59 post preview dead image URL can't be
  • 00:45:03 added as a value for background image
  • 00:45:05 like this instead we want to use URL
  • 00:45:09 here so we want to wrap this with URL in
  • 00:45:13 a string and then with a closing
  • 00:45:14 parenthesis because URL as a CSS
  • 00:45:17 function that accepts a string URL and
  • 00:45:19 which then converts this basically into
  • 00:45:22 a value CA
  • 00:45:23 can use for the background image so
  • 00:45:25 let's add URL and wrap thumbnail image
  • 00:45:28 with it now with that if we save it we
  • 00:45:32 see our deliciously looking images so
  • 00:45:36 this looks much better now one thing
  • 00:45:38 that doesn't look as good is of course
  • 00:45:40 the thing that if we increase the the
  • 00:45:43 width they stay on the left and also
  • 00:45:46 that here we got no no place no space to
  • 00:45:51 the top for example so let's fix that
  • 00:45:54 let's start with the space to the top
  • 00:45:56 for this I'll go to my index to view
  • 00:45:58 file in the pages folder and I'll simply
  • 00:46:01 work on that container class which I got
  • 00:46:03 here anyways I'll instead give it an ID
  • 00:46:06 of posts because this is what I have
  • 00:46:09 here and then I'll take this posts
  • 00:46:11 selector and maybe add a scope styles
  • 00:46:14 here too and I'll add a padding top of
  • 00:46:17 let's say it um so now if I save this
  • 00:46:19 now we got more space now regarding the
  • 00:46:23 positioning I will go back to the code
  • 00:46:26 and I will turn this to be Flex
  • 00:46:30 container so that section is a Flex
  • 00:46:32 container and all the post elements in
  • 00:46:35 there should be positioned in that Flex
  • 00:46:37 container they will be positioned in the
  • 00:46:39 center both horizontally and also with a
  • 00:46:43 line items vertically though that
  • 00:46:48 doesn't really matter because I don't
  • 00:46:49 assign a height to posts but still now
  • 00:46:51 they're aligned like this and on smaller
  • 00:46:54 green screens they now shrink which of
  • 00:46:57 course is not optimal so on bigger
  • 00:47:00 screens this is actually a nice look but
  • 00:47:02 I believe on smaller screens we should
  • 00:47:05 do something the problem is that they
  • 00:47:07 are aligned next to each other in a row
  • 00:47:09 on smaller screens we should simply set
  • 00:47:12 Flex direction here to column whoops to
  • 00:47:18 column if we save that there beneath
  • 00:47:21 each other and now we maybe add some
  • 00:47:24 margin to our post preview so on smaller
  • 00:47:28 screens we also want to add that margin
  • 00:47:31 of one REM so let's remove it from that
  • 00:47:32 media query in the post preview
  • 00:47:34 component and let's instead add it to
  • 00:47:36 post preview and
  • 00:47:37 so margin:1em top and bottom and otto
  • 00:47:41 left and right here like this well let's
  • 00:47:47 just use one ram we need don't need auto
  • 00:47:49 it should have one ram into all
  • 00:47:51 directions
  • 00:47:51 we don't need auto because we use
  • 00:47:53 flexbox for positioning anyways so now
  • 00:47:55 this looks good on mobile but on bigger
  • 00:47:58 screens we could fit to next to each
  • 00:48:00 other so for bigger screens I'll add a
  • 00:48:03 media query again add media min-width
  • 00:48:06 now let's maybe try these 35 Ram again
  • 00:48:09 we used before in the post preview
  • 00:48:13 component so that same media query we
  • 00:48:15 had down there let's use that and for
  • 00:48:20 such a screen I want to set my Flex
  • 00:48:22 direction to roll like this so now it
  • 00:48:27 looks good on bigger screens and on
  • 00:48:29 smaller screens I think we can work with
  • 00:48:31 this now of course we want to get posts
  • 00:48:35 from the back and anyone ensure that we
  • 00:48:37 can click them and actually reach a page
  • 00:48:39 where we see something so these are in
  • 00:48:41 the next two big things we want to work
  • 00:48:43 on the back end is what I want to work
  • 00:48:46 on first though so that we can fetch
  • 00:48:48 some data and there after we'll work on
  • 00:48:50 the detail page now let's dive into that
  • 00:48:54 back-end and then starting with it will
  • 00:48:56 use story block a content management
  • 00:48:57 system in the next video of this series