Task 3: Basic Structure + Navigation - Front-End with Bootstrap

Description

Create the basic structure for the project with the navigation working:

• All application views with separate HTML pages are set up.

Tools

• HTML5
• Bootstrap

Walkthrough

Step 1: Implement the home page

In this step, we'll create a basic HTML structure for the home page which includes Bootstrap

1. Create a new file called index.html inside your project folder.
2. Include your styles.css file inside the index.html page.
3. Add a short description, image, video or any other element you like to explain what your project does.
4. Add your new files to the Github repo, commit and push your changes.

Step 2: Implementing your Items List page

1. Create a new file depending on the project you are implementing:
   • products.html
   • posts.html
2. Include your styles.css file inside your html page.
3. Create a sample list with some sample data to see how your items list will look like

Useful Resources for this step

• List group
• Cards

Step 3: Implementing your Login page (Optional)

1. Create a new file called login.html inside your project folder.
2. Implement a basic login form.
3. Add a Login button.

Useful Resources for this step

• Forms

Step 4: Implementing your model form page

1. Create a new file called item_form.html inside your project folder.
2. Implement a basic form with the fields needed to create a new item(post or product)
3. Add a Save button.

Useful Resources for this step

• Forms

Step 5: Adding a Navigation Bar

1. Understand how the Navbar works.
2. Add a Navbar with the menu options for each page
   • Home
   • About Us
   • Items List
   • Model Form
3. Add a link to each menu item so it redirects to expected html page.

Useful Resources for this step

• Navbar

Test Your Code!

Now is a good chance to test your page, open your index.html on your favorite browser and verify that the navigation works to all the pages.

Results

We've now create the basic html pages of your project using Bootstrap!

Example

Stuck? Check out the provided example in the example/ folder!