Installation & Architecture
Introduction
Now that we are familiar with the basic HTML layout and tags we can start looking at actual Bootstrap code and editing that to get it to look the way we want. But before all that, we need to figure out what we want. In this section we will brainstorm our layout and build the site map chart on Lucid Charts and then we will find a bootstrap template that has a similar architecture and start playing with the code to make it our own. Let's start building!
Objectives
- Design website architecture
- Choose Bootstrap template
- Install template
- Understand the code
- play with more code
Become an Architect
You will need to create a site map of the architecture of your site. What this means is what pages your site will have and how they are connected, like building a house. Depending on your portfolio, the layout might vary but most portfolios have a similar structure (home, about, work, contact). Here comes the fun part, thinking about how you want yours to look.
Lucid Chart is a really easy and fun way to help visualize your architecture. Begin by thinking about the pages you want on your website. You can draw from other portfolios for inspiration, but typically you want the four listed above. Then, go to Lucid Chart, create an account (it's free), and start creating your blueprint for the website architecture. Remember the architecture is just the pages, not the elements we want on our pages like photo carousels, videos, etc. For now just focus on the pages.
Find the Right Fit
The great thing about Bootstrap is there exists just about any template you could possible think of, like Wordpress. So you should be able to find one that matches your needs. This saves us a lot of time from having to code every line. Go to BootstrapZero and start digging through their templates and find one that matches your needs. It doesn't have to look perfect, just try to find the one that matches your architecture the closest. We can always add in elements later to make it styled the way you want it. That's not to say if you come across one that has elements you want as well as your architecture don't grab it!
Make it Fit
After you have found the template you want to use you can either click on the "Code" button or Download the file. In, Cyberduck we are going to want to create all the pages we will need. First, create a folder for your portfolio site, this will hold all of our page files. In the folder, based on your architecture, create the pages you have in your Lucid Chart. Then, open our Bootstrap zip file we downloaded in the last module and paste all the files in your portfolio folder. These files have all the code files you will call upon in your HTML so it is important to have. Finally, go to your Home page file, open it in the text editor and paste the following: Code Document
Exercise
- Get a Bootstrap template set up and fill out your about page.
- Add a photo of yourself to your home page with a short description of yourself. Ideally, this would be an internal photo (which means it lives in your Cyberduck directory).