Project: Bootstrap Website
StartBootstrap Small Business Starter
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.
Code Patterns
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 sections of the web page and then map the code to those sections. Look at the image above and then look at 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 what the effect of the Bootstrap CSS used.
Responsive Nav
The code below renders the nav bar on the home page. As you look at this code, think about what would need to change for the about and contact pages.
Column Row Cards
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.
New Feature Requirements
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 action was taken as a button click.
Notice that some of the information is in parentheses. For that missing information, add data relevant to your business.
Add images to the home page. These images represent products that your business sells.
Add Nav bars to 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 for 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 need to override the Bootstrap CSS, and the customer.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. The
hrefsfor these links specifytelandmailto. 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.
Last updated
