Scaffolding for functional website [3 pts]

[julihcho]

As a reader interested in gender equality,

I want a clean website with clear direction on how to navigate it,

so that I can absorb takeaways as quickly as possible.

INVEST

• [x] Independent
• [x] Negotiable
• [x] Valuable
• [ ] Estimable - unclear how "perfectionist" we want to be
• [ ] Small - same as above
• [x] Testable

Tasks

• fonts
• font sizes
• color palette
• basic structure
• basic github repo

Definition of done

Layperson interested in gender equality can easily read charts and navigate website.

[julihcho]

Note: I've arbitrarily named this 5 pts for burndown calculation purposes, but tbd

[kellyyun]

Below are a few website templates in HTML and CSS that have a design layout somewhat conducive to our project needs as a launching point:

• https://github.com/website-templates/marketing-agency_one-page-template (demo website)

• https://github.com/website-templates/portfolio_one-page-template (demo website)

• https://github.com/website-templates/design-studio_one-page-template (demo website)

We can add/remove/change things of course. They implement HTML, CSS, and Javascript. I believe we will learn about Javascript in upcoming classes.

[julihcho]

Thanks, Kelly!

Additions from my research, from W3Schools:

• Menu bar (with dropdown), "Our Team" section, "Our Work" section demo website, code

• Menu bar, main front banner, "Our team" section, demo website, code

I've also seen that some past projects have used bootstrap.

[julihcho]

Based on our research, it seems like we have four options:

1. Build our own from scratch
2. Github templates
3. W3Schools (not a GitHub repository, but source code)
4. Bootstrap (feels more like a program than html template).

For next steps, I'd suggest we check in with the team and/or professor on what to use?

My gut is that I'd prefer to use W3Schools, because they give us HTML code in the format we've gone through in class, which we should theoretically be most familiar with. @kellyyun

[kellyyun]

I agree with that intuition, @julihcho! I especially like that the W3Schools option eliminates the javascript barrier. Also, your direction of finding code for individual features like dropdown menu etc. is a brilliant idea to cobble it all together.

Checking in with team/prof sound like great next steps!

[julihcho]

FYI @kellyyun , just checked in with Prof. He said using existing code templates sounds good. A few notes:

• Make sure to attribute on your website
• Use only the code that you actually understand how to read and adjust
• You'll learn just as much messing with someone else's code as you do building your own

Let's chat more with the team in our standup!

[julihcho]

Also - perhaps a good idea for you and I to pick out a font, color scheme, and font sizes (for heading, paragraph, chart headlines, chart subheadlines)?

For font, I like Lato a lot: https://fonts.google.com/specimen/Lato

For color scheme, I'm a blues fan: https://colorbrewer2.org/#type=sequential&scheme=Blues&n=6

For font sizes, TBD (haven't looked at it yet, but W3Schools code can be run so we can play around with it!)

[julihcho]

Considering done for Sprint 1. More detailed work will be done in Sprint 2