Assignment 2 - Draft in HTML & CSS

First, read the Project Overview if you haven't already.

In workshop 2, we covered the fundamentals of frontend development using HTML & CSS. In assignment 2, you will build (part of) your figma wireframe from assignment 1 using jsfiddle.

Core requirements

• Recreate 1 page of your wireframe. We recommend recreating whichever page displays many profiles.
  • If you did not do assigment 1, then recreate any webpage of your choosing. Avoid pages with lots of images.
• Make sure your implementation is accessible
  • Any images must have alt text
  • Use semantic HTML wherever possible
• Use at least 1 grid container (tutorial) or flex container (tutorial)
• All styling should be in an external stylesheet (no inline styling).

Additional requirements

If you find yourself really enjoying HTML & CSS and you want to go further, try implementing these to take your skills to the next level:

• Make it look exactly like the figma
• Recreate multiple pages of your figma design
  • Each page must be a separate jsfiddle
• Make the page responsive using responsive properties and/or media queries
• Organize your CSS to minimize duplicative styling using CSS selectors
• For more practice, try to build a personal website using HTML & CSS

Tips

• Give your elements a border or background color, so you can see where their boundaries lie. It might not always be where you expect.
• Be mindful of which CSS properties apply to the element itself, vs its children.
• Avoid copy-pasting HTML/CSS from random websites’ source code or using it as a reference. The vast majority of the time it’s not going to make any sense.

Resources

• Workshop 2 slides and recording, which you can find here.
• HTML
  • MDN HTML documentation
  • Common HTML tags
  • Semantic HTML
• CSS
  • Amy's CSS demo jsfiddle
  • 6 hour in-depth CSS tutorial
  • MDN CSS documentation
  • MDN CSS learning guide
  • CSS-Tricks
  • Flexbox youtube tutorial and textual guide
  • Grid youtube tutorial and textual guide
  • CSS selectors guide
  • CSS media queries guide
  • CSS specificity guide
  • Tailwind
  • Bootstrap

Submission

For feedback from DISC exec

Follow these instructions if you are submitting to get feedback from DISC exec. The deadline for your submission is 1 week after the associated workshop.

1. Save your jsfiddle
2. Copy the URL.
   • Only do this once you are completely finished with the assignment. If you make changes to the jsfiddle after copy/pasting the link, we will not see the changes.

Fill out this Google form.

For the Discover Program Application

If you are not submitting for DISC exec feedback, but for your Discover Program Application, follow the submission instructions in the application form.