JavaScript Course Website Development

Overview

• Update of JavaScript course landing page
• Focus on development process rather than course content
• Aim for a more special and aesthetically pleasing design than the current simple version

Initial Thoughts

• Starting with a blank canvas can be intimidating
• Emptiness can be overwhelming yet exciting due to endless possibilities
• Inspiration sought from awards.com for design aesthetics

Design Concept

• Idea: Landing page should resemble a page from a notebook
• Key aspect: Handwriting-style font
• Explored Google Fonts but decided to create a custom font based on personal handwriting

Font Creation Process

• Used Calligrapher tool to convert handwriting into fonts
  • Downloaded and filled a template
  • Options: Print and write or fill digitally (used iPad)
  • Uploaded template to generate font files
• Ended up creating three fonts:
  • One for titles
  • One for regular text (paragraphs, buttons, etc.)
  • A bold version

Website Development Progress

• Current version (version zero) showcases new fonts
• Background pattern: Utilized heropatterns.com for free SVG background patterns
  • Chose and modified a graph paper pattern to resemble a notebook

Layout Walkthrough

1. Fonts in Action: Demonstrated in various sections
2. Sticky Note Design:
   • Represented with red dot tape and shadowing for depth
3. Video Integration:
   • Iframe for YouTube video with tape element
4. What's Included Section:
   • Dummy text, plan to add self-drawn illustrations
5. Curriculum Section:
   • Bubble text effect achieved using span elements with background color and border radius
   • Module sections styled to resemble stickers

Inspiration and Resources

• Used Pinterest for design inspiration
  • Saved various journal page entries
  • Ideas for sticky notes, illustration styles, and bubble letters

Additional Features

• Plan to add a loading animation
  • Inspired by artistic websites but inexperienced in implementation
  • Two ideas for execution:
    1. Export animation from Procreate as mp4 for loading screen
    2. Implement and animate in SVG format

Conclusion

• Excited about the progress and how everything is starting to come together
• Continuous iteration and refinement on design and functionality.