fac-22-application

Intro

• Founders & Coders Autumn21 Cohort: Barbara's application website.
• Hosted on: https://0bubbles0.github.io/fac-22-application/

Sections

1. Welcome
2. Background
3. Values
4. Ideas
5. Projects
6. Beethoven Bootcamp

• Potential future versions:
  • More composers, non-symphonies → nest objects further
  • "Random" suggestions
  • User can filter search (e.g. "only Beethoven", "only Andante")
  • User can choose key from quint-circle-image → image map
  • User can submit new entries to database → need a way to verify if information is correct

1. Coding Goals
2. Founders & Coders
3. Profiles

Main Resources

Tools

• VS Code, Git, GitHub, Browser Developer Tools (Inspector for CSS code, layout information. Console for JavaScript tests, log information)
• Practice: Codepen, Replit
• Logo: Figma
• Colour: colorzilla.com (gradient generator), visme.co, stormwall, Coolors, Colour Lovers, Color Hunt, Colour Code, Colrd
• Fonts: Google Fonts
• Icons: Font Awesome 4
• Test Accessibility: https://wave.webaim.org/, https://www.webaccessibility.com/

Tutorials & Reading

• Founders and Coders Coaching: Workshops, Dragonfly Study Group, Monday Meetups, Info Sessions, Discord. Thank you for showing me that I can do this!
• freeCodeCamp: Responsive Web Design, JavaScript Algorithms and Data Structures, forum, YouTube channel, E-Mail-Newsletter
• Codewars
• Google Grasshopper App: JavaScript
• Workshops with Skillcrush, Girl Develop It, Outco: Python Taster, Design, GitHub
• YouTube, especially Codú, Faraday, Code with Mosh, Thu Nghiem, Dev Ed, Layout Land
• MDN Docs, w3schools, Codecademy, Stackoverflow
• CSS: css-tricks.com, medium.com, codeburst.io, flexbox.webflow.com, gridbyexample.com, https://cssgridgarden.com/, https://flexboxfroggy.com/

To-do List

Final Tasks

1. General

• iPad mode → get rid?
• mobile mode →
  • Colors: bold, test on Phone
• Surprise button: animate yarn, change CSS-colour-variables?, display bubble-background?
• Validate HTML

1. Welcome
2. Background
3. Values

• low left column

1. Ideas

• h6-color, card padding

1. Projects

• ← → size

1. Beethoven Bootcamp

• Select-field: size, style
• Headings: margin-top

1. Coding Goals

• Center children → space-around?

1. Founders & Coders
2. Profiles

• postitions of items
• icon: fix Codewars

Prep

Text

• Check fac website, values
  • Syllabus
  • Values
  • Opportunities after
• Connect my CV
• Decide Sections
• Write text

Functionality

• possible DOM ideas
• Beethoven Bootcamp
  • HTML&CSS: form-select, button, "Chalkboard" for results&links
  • Movement key-signatures
  • Links
  • FIX eventListener
• ? Baking measurements Converter (cups vs grams)
• Surprise button
• Recognise "current" chapter --> Heading in top-bar, highlight nav, active/hidden class

Media

• logo --> Figma, Projects fcc-3, fcc-5
  • Use bubble as list-style
• img? --> Copyright?
• links --> profiles, projects
• Icons for GitHub, etc.
  • Is Font Awesome 4 an external library, can I use it?

Design

• Page Layout
• Sizing, Space
• Fonts
• Colors: Palettes
• Check my other fcc Projects
• Paper sketch

Code

• HTML
  • Basics
    • Head
    • Header: title, nav, nav-links
    • Sections: Set up
    • Footer
  • Insert text
  • Beethoven -> Form elements: select, button
• CSS
  • make variable & class names
  • set up basics
  • OK Layout:
    • Basic page structure
      • Sidebar, main
      • Footer
    • Alignment, gaps
    • Sizes
    • Style DOM-Placeholder
    • Responsive?
      • element-heights on small devices
    • Tidy up
  • Design:
    • Font families, sizes
    • Special text, span
    • Colours: palettes, relative
    • Tidy up
• JavaScript
  • Set up object: Symphony-No, Movement-No, Key-signature, imslp-link
  • js variables, functions
  • Access HTML-elements: select-box
  • DOM Events, Listener
  • Surprise-button
  • Section-heading in logo-bar?

Programs

• GitHub: Set up Repository, Host Pages, clone to VS Code
• Files: Set up, link

Test

• Myself, other devices, other browsers
  • Privacy settings
  • Layout, Sizes, Responsiveness
  • Colours
  • Functionality
  • Accessibility on:
    • https://wave.webaim.org/
    • https://www.webaccessibility.com/
• Ask:
  • Questions, Problems
  • Feedback
  • Does Hosting work?