Materialize Tutorial #16 - Setting up a Project

Key Takeaways

alright then gang so now is the time that we're going to put everything together that we've learned so far in this series among other things as well that I'm going to teach you over the next few lessons and create some kind of website with those different techniques and the website we're going to create is this thing right here photo and ninja so if we scroll down we can see we have all these different sections where we can zoom in on images and these parallax is right here where the images are moving around in the background we also have some tabs here so I'll show you how to do that as well and another parallax and then we also have this form right here and it comes with these different inputs icons and a date picker as well so I can choose a date and press ok and that's going to populate that field as well as these input fields which look pretty nice as well then we have a footer at the bottom now as well as all that we'll be using scroll spy which is this thing right here so if I click on something at like contact it's going to scroll me all the way to the bottom so it looks quite nice to do that as well and then we're going to look at fonts awesome as well for these icons right here because Google material icons don't include these social icons by default so we're going to use font awesome for those and as I hovered over those you'll see those little tool tips as well so we'll take a look at that now this is all fully responsive so when i zoom down to a smaller screen size you're going to notice this thing right here this is the side menu and then if we scroll down everything is still responsive it just stacks on top of each other but it still all works fine and looks pretty nice as well okay so I'm going to show you how to do all of this in the next part of this series so over the next 15 lessons or something like that maybe not even that and what I've done is I prepared you a starter file so if you go to the github repository for this course the link is down below and I'll link to this lesson exactly then you'll see this index file right here this is the starter HTML that I prepared for you so if you just copy all of this right here and then paste it into your text editor and I'll just quickly go through this so we have our HTML and head a couple of metatags then we have this thing right here which is linking to the fonts awesome library and like I said we need that font awesome library so that we can use those social icons in the navbar because material icons doesn't contain those by default we're still importing material icons because we're going to need that for the form down below when we use the mail icon and things like that but for the social icons we'll use fonts awesome so you can have the copy and paste it or you can go to the front awesome website the link is down below and you can download it right there as well and you can see we have access to all of these extra icons there as well all right so we have that we have the material icons right there we also have the materialised CSS right here a title of photo ninja then we have all these comments right here these are the different sections that we're going to attack in each of the different lessons going forward and then at the bottom we have this grip which is jQuery and we also have this script which is the materialized javascript file as well and I've also prepared this for you so we place all of our code inside this function so that it only fires when the document is ready so all that is going to be coming up over the next maybe 10 to 15 lessons something like that and our believin images - all the links as well and by the way we do have a folder for all of the images right there so we can see we've got these different images they're all on the github repository as well you can find them if you go to materialise playlists make sure lessons 16 is selected that's the current lesson where I'll go into the images folder and you're going to see all of these images right there as well so if you click onto one you can right click and save us if you want to or you can just clone the repository onto your desktop as well it's entirely up to you okay so there we got my friends that's what we're gonna be doing over the next 10 or so lessons so I look forward to creating it and I'm gonna see you in the very next one