Skip to content

Latest commit

 

History

History

lab2

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
download
download
 
 
submission
submission
 
 
.DS_Store
.DS_Store
 
 
readme.md
readme.md
 
 

readme.md

Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors Visitors

Don't forget to hit the ⭐ if you like this repo.

Lab 2: Hero ホームpage

The goal of this exercise is to use the CSS classes and components you've learned so far from Bootstrap to lay out a ホームpage for your website.

Navigation & Jumbrotron

Download the starter code by right-clicking and saving the file to your computer. Save the file as index.html.

Add navigation

  • Use the navbar component to create a navigation header for your website. You can experiment with different positioning and layout, whatever strikes your fancy.
  • Use the nav component to add a footer with social media links to your email, LinkedIn profile, GitHub profile, or more.

Make a splash with the jumbotron

  • Use the jumbotron component to create an attention-grabbing introductory section to your ホームpage.
  • You can either start from scratch, or copy your content & code from the first workshop into the starter code.
  • In the jumbotron include a:
    • Headline
    • Paragraph(s)
    • Button
  • Don't forget to swap the starter code content with your own personal touch ;)
  • Bonus: Set a large background "hero" image.

Bonus

  • Keep practicing using Bootstrap components, add other components like buttons, experiment with other navs or typography classes (e.g. blockquote).
  • Override the Bootstrap base CSS styles with your own colors, font choices, etc!
  • As a stretch goal, add a carousel.

Note: Your projects are all going to be different because it's your personal ホームpage. The solution file is not meant to be prescriptive, but just show you what's possible using basic components.

Submission

  1. This task must be done in groups (4 people per group).
  2. Please provide your contact information in the HTML <head>.
<!--
Lab XX: XXX
Group:
1. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
2. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
3. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
4. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
-->
  1. You must place your file in the submission folder. Within the submission folder, create a folder named after your group.

Example: /submission/[group-name]/[your-file]

(Note: please replace [Name], [Matrix Number], [Github ID], [group-name], and [your-file] with the appropriate information)

Contribution 🛠️

Please create an Issue for any improvements, suggestions or errors in the content.

You can also contact me using Linkedin for any other queries or feedback.

Visitors