Building the Header - Part 1

Jonas Schmedtmann
A free video tutorial from Jonas Schmedtmann
Web Developer, Designer, and Teacher
4.6 instructor rating • 5 courses • 807,189 students

Learn more from the full course

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.

28:04:40 of on-demand video • Updated December 2019

  • Tons of modern CSS techniques to create stunning designs and effects
  • Advanced CSS animations with @keyframes, animation and transition
  • How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
  • CSS architecture: component-based design, BEM, writing reusable code, etc.
  • Flexbox layouts: build a huge real-world project with flexbox
  • CSS Grid layouts: build a huge real-world project with CSS Grid
  • Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
  • Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
  • Responsive images in HTML and CSS for faster pageloads
  • SVG images and videos in HTML and CSS: build a background video effect
  • The NPM ecosystem: development workflows and building processes
  • Get friendly and fast support in the course Q&A
  • Downloadable lectures, code and design assets for all projects
English -: Welcome back. In this lecture, and the next one, we're going to build the header part of the app. And that will include using SVG images as icons, instead of an icon font. So you're gonna learn what SVG's actually are, how to find, generate, and use SVG's sprites in HTML, how to change the color of an SVG image in CSS, and finally, you will learn more advanced flexbox alignment techniques, which we're gonna need to layout all the components in the header. So in our header, we basically have three main components: we have the logo here, then we have the search bar with this input field here and this icon, then on the right side we have something that I call the user navigation. So we have like bookmarks, a chat functionality, and the name of the user. Okay, so these three are the main components: logo, search bar, and user navigation. So let's mark it up in our HTML right now. So, 'Header.' And we start with the image, which I simply call 'logo.' And the source for this one is an 'IMG' folder, and simply called 'logo.' And for the description I just use "trillo logo." Alright, so that's the first part. Next we have a search bar and for that I'm using a form element, okay? And the action is just the hash symbol, so nothing happens. Now in here you want an input, which is called 'search input.' And as you see, once again I'm using the BEM notation here, so search is my block and to add the element is the input separated with these two underscores. Now we also have the placeholder here which says 'Search Hotels', okay. And then the button, this one is called 'search button.' Now remember that in here in the button, we actually had this little icon, this magnifying glass, this icon here. So in the last Natures project that we built, and maybe in your projects that you've built yourself, we've been using icon fonts, right? But this time we're gonna do it differently, and we're gonna use SVG's as icons. Now why are we actually moving away from icon fonts to SVG's? Well, there are several problems with icon fonts, like the fact that it's really just a hack to display icons, which are like images using a font. Also, icon fonts fail more often than you would think, and in that case, the browser just displays a blank square or something like that on the screen and that's really terrible. And there are actually other issues, like screenreaders for blind people trying to read out the icon fonts and of course, failing to do so. And because of all that, right now it's actually considered a best practice to move away from icon fonts and to move to a better alternative. And that better alternative is of course, SVG. Now what is SVG, actually? Well, SVG stands for Scalable Vector Graphics, and it's just basically a way of writing vector graphics with code. But don't worry, we're not going to write any SVG code here for icons, okay? Instead, we're gonna use a great app called 'IcoMoon.' And so let's open that one, IcoMoon.io. And this is just really a simple web app. So let's move here to where it says 'IcoMoon App.' So here in the IcoMoon App, you can upload an icon font if you want. For example here, so if you have an icon font on your computer and want to convert it to SVG's, then you can do it in here, okay. But what's even better, is that we can select icons from their free library, okay, so let's do that. So if you come down here, you have 'Add Icons from the Library,' then you have all of these free libraries with these free icons, okay. So you can take a look at all of these, and the ones that I'm choosing are called 'Entypo.' Okay, so 'Entypo +' because I really like these and I think they look great on our app. So we just hit 'add' and then from here, we just need to select the icons that we actually want. And if you take a look at this finished app, we see that we actually need 10 icons, so these four icons here, then the star, then this bookmark, this chat, this location pin, this list item icon here, and then finally of course, the magnifying glass, which is the one we're gonna use next. So these 10 icons are the ones we need to select, and so here is one, here is the next one, then here is the plane, here is the chat, down here we have the house, and also the key down here, let's add the location, then here's the magnifying glass, the map, and finally the star down here. Okay, so we have our 10 icons selected, you can see it here we have 10, okay. Now if you wanted other icons or more icons, you could of course select as many as you wished, okay. So all we have to do now is to come here, 'Generate SVG and More', then we see our 10 icons we selected, then we hit here the 'Settings', okay, and then we see there will be a class prefix called 'icon' and actually we don't want any PNG's, we just want SVG's, okay. So it says SVG here now, and now we can hit 'Download' and open it up. So when you open this folder, it gives you all this stuff here which you really don't use. So all we need are these SVG files here, and even more importantly, this file here. So 'symbol-defs' and this is a so-called sprite file. So what is a sprite file? Well, it's simply an SVG file which contains all of these 10 SVG images in it, okay, and that's the one we're actually gonna use, because this way, we only have to use one global file, which is just this one here, and from there we can select each of the icons. And so this way, we only have one 'http' request for one file instead of having to include all of these 10 different files. So icon sprites, like this one here is the way to go, and that's how all the professionals do it. Also we have this html file here, what this does so that we can see the names of the icons, and actually this is not the right one, the one that we need is just 'demo.' So these are the names of the icons that we can now use in html, so first let's get more icons here. So this entire folder and then this one here, and I'm going to copy it to the project folder, so trillo, img, and then I'm pasting it in here. Alright, here we go. Now I'm going to call this one 'sprite,' and I actually already have one sprite, because I included it here, because I already had it. So I'm gonna delete it, and call this one 'sprite.' So you should also delete the sprite file that you already had, and then change this one here to 'sprite.' And so that's the one that we're gonna use. I'm also leaving this folder here with these initial files, because we're gonna need maybe one of them later. So, and with this, you are ready to use this 'sprite' SVG file. So, let's go back to our code editor here and include it. Now, how do we actually do that in HTML? Well, we use the SVG element which I'm gonna call 'search icon'. Then in here we have to use something called 'use.' So 'use' and then an attribute called 'xlink', colon, 'href', so that sounds a bit strange, but that's just how we can include the SVG file and then reference each separate icon in there. So, 'IMG', 'sprite.svg', and that's the name of the sprite file, and now from here we have to select the icon that we want, so let's see how it's called. And it's called 'icon magnifying glass.' Let's copy that, and now we use hash and then the name of the icon. And that's actually it. So closing it, and here we go. So this is really the best way to include SVG's in HTML using a SVG sprite like we did. And that's because this way, we can actually change the color of each of the icons using CSS. And I'm gonna show you how in a little bit. Now another thing that I need to tell you, is that using SVG's like this with the 'xlink href' attribute is only going to work on a web server. So only on the web server, you will be able to see this sprite SVG file. But since we're doing that, actually, we are using a web server which is this local one here. So this local web server and that's why it actually works. And so here is our SVG icon, right? So everything works perfectly, and we're now ready to start using SVG's in our HTML, and that's a great step. Now this is of course not formatted here at all, but we're gonna take care of that later. And another advantage actually, of SVG, is that it makes it really easy to format these icons. With icon fonts, it always really hard to put them exactly the way we want it. But with SVG's, that problem is gone and it's actually super easy. Okay, and now finally, the user navigation. So, we're using the 'nav' HTML element here, for the navigation. And then in here, I'm going to put three boxes. So let me show that to you, so one box for each of these, this box, this box, and this box. So let's do that. So 'user-nav', the name of the block, nav icon, and then in here our SVG. Now actually this is not the name that I wanted here. Let me change that. So, 'Icon Box', so now it's okay. So this is the box where an icon will sit, and this one is the user-nav icon, and now let's use the 'use' again. So 'xlink href' and IMG sprite. And this time, let's check it out. We will want to use the, now here it is, it's closed, the IcoMoon, so we want the one called icon 'Bookmark' and the next one called icon 'Chat.' So icon bookmark, and next time icon chat. Let's actually copy that already. Okay, so icon chat, give it some space here, alright. And actually, we also want like, this notification indicator here. So this small notification circle here, so let's just put 'span' element, which I'm calling user-nav-notification, and here let's put a seven, and then in the other one, let's put 13. Okay and now the next box, user-nav, and this one I'm calling simply the 'user.' So if you have an image here, as you remember, and this one is called, I think it's the one just called 'user', it's actually a picture of myself. So user photo and then just a 'span' for the name. So user-nav, user-name, and then my name in here. And that is our HTML markup for the header. So let's check it out now. And it looks, of course, terrible at this point. (laughter) So let's try to do some quick formatting here, especially of the images and icons which are now really huge. So we should fix that. So let's now open our components file here, because from now on, I'm gonna write all the code for all the smaller components right here into this file. Now this stuff that we're gonna put here, these are not really components in the meaning that I gave them in the last project. So they're not necessarily really reusable across projects but I'm still calling them simply components here because that's the easiest way to do it here right now. So this one is simply called 'logo.' And what I want here is the height of 3.25 ram, so remember once again that this project is not really about CSS architecture and all that stuff that I showed you in the last project because these are really important. But in this project, I just want to focus on flexbox and on building this app. So, that is the logo and let me actually put a comment here on each of these so-called components. So just a line of these slashes here to separate them, and then I simply say 'logo.' And now I do the same thing for the search box. And down here, the same thing for the user-nav. So search, and in here we have the input. And of course it's two underscores and a button. Let's see if we have something else here. So we have the input button, oh and this icon as well. And now for the user navigation, let's also put the selectors here already. So user-nav, and here we have the icon box. And let's see what else we have. So icon box, then we have icon here, notification, user, user photo, and user name. So there's a lot of stuff to select here. So icon box, icon, we have the notification, the user, user photo, and finally the user name. So that's a lot to format here but what I want to start with for now is these huge parts. So you already gave the icon here a smaller size, but we want to do the same with this magnifying glass, and with these two icons, and of course, with this user image here. So let's do that right now. So let's start with the search icon here, now how do we actually format an SVG icon? Well, it's really easy compared to icon fonts, all we have to do is to set it's height and it's width in order to size it the way we want. So let's set to ram for both the height and width. Check it out, and here we go. And now it's really small. And now here for the user nav icons as well. And these here should be slightly bigger, so I'm putting 2.25 ram for both the height and width. 2.25 ram. And now finally the user photo, let's give it a height of 3.75 ram. And since we're at it, I'll also make it around a border radius of 50%. And then let's see how it looks like right now. That looks better but still far from perfect. So in the next lecture, we're gonna take care of actually aligning all of these items properly using, of course, flexbox, and then to style everything so that it looks great just like this here. Okay, so that's what we're gonna take care of in the next lecture, see you then.