[Challenge] Build a Web Page for Your Favorite Band

Events & Challenges
1

Code Challenge, June 15 2020

Every month, we feature a new challenge related to the Monthly Feature’s theme. For this month’s theme All Things HTML, the challenge is:

Build a webpage for your favorite musician or band

Challenge Rules:

You must use the tags introduced in this lesson: Intro to HTML.
You can add CSS but you will not be graded on it.
Originality and readability of your code (make it your own and use style conventions and comments to keep things legible).

Tags used:

Headers
<h1> through <h6>

Paragraph
<p></p>

Sections
<div></div>

Lists
<ol><li></li></ol>
<ul><li></li></ul>

Image
<img src="image.png" alt=" " />

Bold
<strong></strong>

Italics
<em></em>

Line Break
<br>

Video
<video src="myVideo.mp4" width="320" height="240" controls>Video not supported</video>

Deadline for Prize Submission:

June 30, 2020 at 11:59 pm ET

Prize:

1 month of Pro

The winner will be the one who makes good use of all of the tags–– ie. how you use the tags to format information about the band. Also, you must peer-review one other submission, and provide feedback.

Resources:

Learn HTML Elements cheatsheet
Introduction to HTML (lesson)
How to review someone else’s code (8-minute video)
A Quick Guide to Peer Code Review
Repl.it (For those not using GitHub, code your project on Repl.it, run it and see the outcome of your code)

Once you’re done…

Share a link to your project in a post below – happy coding!

2

Am I understanding correctly that only HTML is allowed, and no CSS?

3 Likes
3

Yes, only HTML. However, feel free to challenge yourself and add CSS! :slight_smile:

2 Likes
4

Are we only coding one webpage [for example the homepage] of the site or are we responsible for prototyping the entire site?

1 Like
5

@echol3784397271 you can do whatever you want, just show off the home page, or the whole site. Though, if you’re aiming to impress a fully complete site might grab some extra points.

2 Likes
6

Could we be allowed to use the <iframe> element?
Because I can not find any mp.4 files of the artist I picked without using some very suspicious looking websites.

1 Like
7

This takes me back to 1998! In the middle school computer lab with my friends, downloading pictures of Limp Bizkit and making simple web sites with a picture or two! Cooltext.com was a GAME CHANGER back then lol!

3 Likes
8

Oooh I’ve been building a few websites recently just trying to get myself practising so I’ll definitely have a go at this! Do we just share the git files here on completion?

Also another clarification question, does this mean we can use only these tags and no more? Aka. no <title>, <a> etc.?

1 Like
9

Yes, I think that is fine as long as you also use all of the tags in the original post.

2 Likes
10

Yes, or feel free to use Repl.it to run your code and see the outcome. Be sure to include the link and make it public.

You can use more tags, but you must include all the tags listed in the original post.

Thanks for the good questions @adamgaffney137183916!

2 Likes
11

Excellent to hear, thanks for the quick reply! I’m looking forward to the challenge.

2 Likes
12

So can we use CSS as well or JUST HTML ?

And if we can use CSS what is accepted? Inline, Internal, External?

13

You will be graded on the HTML, only. If you’d like to add CSS for an extra challenge, by all means do so. :slight_smile:

2 Likes
14

I see. Thanks :slight_smile:

1 Like
15

Here is the link to my project, hopefully it all works okay! I got a bit carried away with the CSS for fun, but all the HTML needed should be in there, let me know what you think.

Favourite band project

4 Likes
16

Hey should i send a GitHub link, or a google drive link? Also can i incorporate bootstrap in my project?

1 Like
17

Sure. You can also use GitHub gists or Repl.it.

1 Like
18

Here is mine!!

Paul Overstreet

Let me know how I did.

1 Like
19

One last question, am I supposed to post my peer review here?

1 Like
20

Since I have not gotten an answer yet and the challenge is nearing the end, I will post my code review here.

@adamgaffney137183916, your currently my only choice so that narrows down my options a bit.

Compliments to your page

  1. I think your page was is well though out, and your code matches it. It is simple, easy to follow and cleanly written. Your use of white space and indentation is perfect.

  2. Your use of comments is great, to the point I believe someone who doesn’t understand HTML would understand the code structure.

  3. You used mostly semantic HTML, which greatly improves SEO and allows for your code to be easily read and understood.

  4. Your use of pictures is just right, there were not too few that the page lacks color, and there were not too many that is seems more like a photo album.

  5. Bonus for your CSS, it looks great!

Points I would consider

  • If you were to put this online as a way to inform people about your like of this band, I would consider adding links to other websites, so people can now find music or more info about the band they are now interested in. I have heard this also improves SEO, though a second opinion would be good on that.

  • For semantic purposes, you could make use of the <header> tag for your headline, and <section> tags could be used to group the ‘about’ portion from the ‘What they mean to me’ portion.

  • Personally I would not use the <h5> tags as headers for the albums, as they are rather small and can be hard to read. I would consider using <h3> tags, since you don’t already have any on that page.

All in all, well done, I looks competition quality to me! :clap: :+1:

2 Likes