Project: Bootstrap Website
Last updated
Last updated
Adding features and content to an existing project starts with understanding the existing code. The key is to look for patterns in the code and recognize what they are rendering. Drawing a schematic diagram like the one above that captures the patterns on the index page of the Small Business starter helps to see the code patterns.
The page starts with a nav bar containing links to other pages. Then comes the heading row, which includes an image lined up with three rows of header, paragraph, and call-to-action button (CTA). The CTA will appear in several places, sometimes rendered as a button or a card. The card may contain text with a link, or it may include a button. The CTA encourages the user to take some action.
For this project, we'll import the GitHub repository bootstrap-small-business into replit.com. This repository is modified from the Start Bootstrap Small Business starter. The starter only shows the index page. Our modified repository contains additional pages for about, contact, and service. The nav bar is set up in the index.html to access About and Contact. Images have been added to the home page cards, and images are rendered that specify the image size needed.
It is helpful to look at code patterns and understand what they render when adding features to existing code. A good way to start is to draw a schematic that blocks off web page sections and then map the code to those sections. Look at the image above and the code below that maps to it. The goal is to be able to look at the code and visualize what it would look like rendered. Look at the Notes on Bootstrap if you need to figure out the effect of the Bootstrap CSS used.
The code below renders the nav bar on the home page. As you look at this code, think about what must change for the About and Contact pages.
Most developers would agree that one of the challenges of reading and writing HTML is that there is a closing tag for most elements. In the code below, you won't see all of the code on the page. The ... is a signal that there is code between two tags. What you want to take away from this is that to render a row of columns (col), as seen in the product list, you need to render a container, followed by a row, and then a col containing a card. Each card contains a card-img-top, a card-body, and a div with a header and text.
Creating your schematics with just pen and paper can help you to recognize code patterns and understand how the page was structured and styled.
Here are the steps to fulfill the requirements for adding content and features:
Import the bootstrap-small-business repository into a replit.com account
Render the home page and look at the code used to create it
Choose a business that will add content. Your content will include text and images. See the notes on content to find content. Think about calls to action: what actions do you want your user to take? In the code, you'll see that you can pop up an alert to indicate that the action isn't a button click. It's a link that is styled to look like a button.
Notice that some of the information is in parentheses. For the missing information, add data relevant to your business.
Add images to the home page. These images represent products that your business sells.
Nav bars are on the About and Contact pages. The services page is optional, but if you want to add that to your website, add it to each nav bar item list. The links and the active class must be adjusted or each web page. For example, on the home page, each product has a button. In an e-commerce website, this button would take the user to a page where they see more information about the product. You could create a page for each project or add an on-click alert, as shown in the examples below.
There are three CSS files in the project. The styles.css contains the Bootstrap-generated CSS. The stickyfooter.css creates a footer that is always located at the bottom of the page, even if the content doesn't extend to that. The custom.css is a place where you can add your own CSS. Sometimes, you must override the Bootstrap CSS; the custom.css file should contain those overrides. Load the services.html in your browser to see how the sticky footer looks.
On the About page, there are links for email and phone. Try these out. hrefs for these links specify tel and mailto. These prefixes will trigger the browser to locate an app that can use phone numbers or email data.
Fill in the Copyright information. This should be your name or the name of your business.
The project comes with a favicon and brand icon featuring an apple. The favicon can be seen in the browser tab. The brand image is in the upper left corner of the nav bar. This image came from downloading an icon image from Iconduck. To download this image, click on the icon and view its details. Then, inspect the icon's image and open it in another tab to download it. Then, upload it into your replit.com project.
