In this project, we'll practice using Bootstrap. The goal in this phase is to only use:
- pre-written Bootstrap classes and components, e.g. unstyled lists and the navbar
- the vertical spacing classes that I've already included for you
Therefore, you shouldn't have to write any CSS rules yourself for this phase; just apply the ones that Bootstrap and I have provided.
- Fork this repository to your own account.
- Create a Cloud 9 Workspace as usual.
- Run the
bin/setupcommand in a Terminal. - Run Project.
- Navigate to the homepage of the app in a Chrome tab.
- Open
public/index.htmlin the editor.
-
I have already downloaded and included Bootstrap in the project for you.
-
I have also included an
additional_styles.csswith some standard vertical spacer classes. -
There are
<link>s to both in the<head>of your starting point, but they are commented out. Uncomment them to use them. -
Use Shoelace.io to create a skeleton grid for your layout, and then copy-paste it into your page.
-
Plug in your content to each cell in your skeleton. You can copy-paste from the target if you want to.
-
I've already downloaded all of the images that you need. You'll find them in the folder
public/assets/images, which means you can use them like this:<img src="/assets/images/hero.png"> -
You should be able to exactly match the target by only applying existing classes from either
bootstrap.cssoradditional_styles.css; you need not write any CSS rules yourself. -
You can draw "inspiration" from the target, and any page on the Internet, by Viewing Source: Ctrl+U on Windows or Option+Cmd+U on Mac.
-
You can also right-click on any element in Chrome and "Inspect" to get an even more powerful set of Developer Tools, which we'll talk about more in the future.