In this lesson we will be talking about wireframes and how they are important for sketching out a website before you start to actually code it. In our case we already know what our final website will look like but normally you would start out with some idea or frame of reference.
If you want to read the previous lessons in this tutorial, check em out below:
- Introductory To The Course
- Creating Your First Webpage
- Working With Web Developing Coding Editors
- Introductory To HTML
You can watch the video version of this lesson below:
Now before we can go any further in designing and building our own website, we actually have to build a wireframe for our project.
I have the final version of a website here, so we don’t have to plan anything. Everything is kind of already done for us in our case.
But usually, you would have to plan out the content on your website. So this is basically the homepage I have, and I created this website ahead of time just so I knew exactly what we were building.
These are the different individual pages on our website. We have our about page, we have a blog page, we have our blog post title and a sidebar here with an author picture, some site pages, we have a contact page, it just be a basic picture with some information about our client, and an email us link, and we have our portfolio which will be a grid format like this, and we have our footer at the bottom, and of course, our header.
Now this webpage is not super complicated, but is definitely gonna be something that’s going to be challenging for you if this is your first website, or if you are new to HTML or even CSS.
One thing I’m also going to point out is when creating a wireframe or creating the structure of your website, it’s also good to create a mobile-responsive version of your website as well, and if I shrink my window here, you can actually see that our website changes, and this is because the browser window is changing, just like it would on a mobile device.
This is the mobile version of our website, and it looks a lot different than when a window browser is stretched out, which is the desktop version. You can see how our different pages are all formatted differently.
So when creating your wireframe, you want to do a mobile version first, and then you can expand that mobile version onto the desktop version like it is right here, right now. So in our case, all the hard work is already done for us.
We know exactly what we have to build.
Now that we know what to do, let’s get to work building our portfolio website for our client.
See you in the next lesson!