In my Web Programming for Non-Programmers course, we’re halfway through the term. The students have worked with vanilla CSS and have been introduced to Bootstrap this week. Here’s this week’s assignment. The topic of this site, “AI Prompt Lessons”, is a site that I’m actually working on. This design is a very rough first version that I did quickly this morning, and I included many more elements than I normally would on this type of page. But I wanted students to get experience with different Bootstrap components.
Assignment: Implementing a Web page with Bootstrap CSS
I give the students a screenshot of a Web page that I created. The assignment is for them to use HTML, CSS, and Bootstrap to create that design as a functional Web page. I provided all the images files that the students need.
Here’s the page that they have to implement:
Details of the assignment
I post the assignment and associated materials in Canvas. I’m putting this out here on the Web in case anyone is interested. The rest of this post is what I provided to the students. The assignment is worth 20 points. It’s a low-stakes assignment. Next time I teach this course, I’ll up the points value.
I’m not a fan of step-by-step instructions for assignments but these are newbies to code, and the structure really helps them. They do have a term project where they have to take these concepts and apply to their own project.
Eventually, I will have them submitting the assignments via GitHub. But, for now, I just ask them to send me a zip folder. That itself was a learning experience for most students since they don’t normally work with zip files.
The assignment
In this assignment, you will use Bootstrap CSS to create the web page shown in the screenshot from scratch with Bootstrap CSS. (The design of this page is too busy. But I wanted to include a number of Bootstrap components so that you will get experience in implementing a variety of features.) This assignment is about a real Web site that I’m starting. The actual design that I will implement will be a variation of this design.
To do this assignment, you will be referring to the Bootstrap CSS documentationLinks to an external site. constantly. You also will need to Google for suggestions on how to do certain tasks. Hint: when Googling, use “Bootstrap 5 [describe what you want to do]” in your search phrase. That will return pages that are relevant to the current version of Bootstrap.
Steps & Rubric
- create a new project folder.
- in that folder, create the HTML page in VS Code.
- The title of the Web page is “AI Prompt Lessons” 0.5 point
- create a blank CSS file in the project folder for any custom CSS code that you will add.
- Link the HTML file and the CSS file together.
- Link to the Boostrap CSS CDN. 1 point
- You also will need to the Bootstrap JavaScript file. You will need to research how to do that. 1 point
- You will use two Google Fonts:
- Headings: Montserrat Bold 900 1 point
- Body text: Roboto Regular 400 1 point
- Link the Google Fonts to your HTML
- Take a few minutes to analyze the design. Identify all the elements that you need to implement. Make notes for yourself about the grid layout that’s needed for Bootstrap. How many rows will you need and where are those rows arranged? How are the columns arranged.
- In your HTML file, you can start in one of two ways:
- implementing from top to bottom
- or, building a skeletal structure in the body of sections, rows, columns, footer. And then adding the content to that structure.
- The approach is up to you. One way is not better than another. Tip: if you get really stuck implementing a Bootstrap component and everything gets messed up, start a new blank HTML file in which you will only implement that one component. This helps a lot with troubleshooting and debugging a large HTML file. A lot of work of a Web developer is troubleshooting and debugging. Often, it’s easiest to work on one specific aspect in a clean file. Then, once you have figured out any problems in implementing that component, then you can carefully copy and paste that into your main HTML file. For this assignment, you will only submit one html file and not any other html files that you might create for troubleshooting. Those troubleshooting html files are only for your use. And you don’t need to do it this way. It’s just a possibility if you find that things in your HTML get really messed up and you’re struggling to sort everything out.
- Navbar (3 points). Note that none of the navbar links in the design are active. You will need to figure out what that word ‘active’ means in the context of a navbar.
- Carousel (4 points). Implement the carousel with the captions that I provide. Note that there are 4 images in the carousel. The default carousel code from Bootstrap implements a 3 image carousel. You will need to figure out how to add a 4th image and make the carousel fully functional. When you view the 4th image on the carousel, you should be able to click on the ‘next’ indicator, which will go back to the beginning and load the first image.
- Modal (2 points): Use a yellow button with the text “Readme” to open a modal window.
- Cards (3 points): Implement a group of 3 cards with the provided images, heading, and text.
- A footer (2 points) that stretches all the way across the viewport. Insert a short line of lorem ipsum text that is right aligned. Provide spacing in the footer so that it looks similar to the screenshot.
- Spacing (1 point): for this assignment, use the Bootstrap utilities for adjusting the margins and padding instead of adjusting those properties in the CSS.
- Text utilities (0.5 point): for this assignment, use the Bootstrap utilities for adjusting the placement of the text.
- Comment your HTML appropriately. You will thank yourself for doing that.
Your CSS file for this assignment will be very small. You should only have 3 things in your CSS file:
- Styling the body font
- Styling the heading font
- Styling the background color of the footer.
Everything else you screen in the screenshot can be done in HTML using Bootstrap class names. Do not use any inline CSS styles in your HTML.
Captions for Carousel Images
Image 1
Endless Hybrids of databases & stories & films
Created with Midjourney
Image 2
Entering the Metaverse
Created with Midjourney
Image 3
Scientist working in a futuristic lab
Midjourney: portrait of a female scientist working in a futuristic office, in the style of Annie Leibovitz photography –ar 16:9 –testp –creative –style photograph –upbeta –stylize 3000
Image 4
A cyberpunk couple in love surrounded by alien spaceships
Created in DALL-E
Submitting
Submit your assignment folder as a zip file. Your folder should have 1 HTML file and 1 CSS file, plus the images used on the web page. Do not submit the screenshot of the designed page.