Reflecting on Building a Website with HTML5UP and 11ty Navigation

Building a website using HTML5UP templates and integrating the 11ty static site generator for navigation was an enlightening experience. Here's a reflection on the journey:

Project Overview

The project aimed to create a visually appealing and responsive website using HTML5UP templates. The navigation was managed through the 11ty static site generator, simplifying content updates and navigation links.

Positive Outcomes

• Visual Appeal and Responsiveness: The HTML5UP template provided an attractive starting point, with its responsive design ensuring the website looked great on various devices.
• Efficient Development with 11ty: Integrating 11ty streamlined development. Its templating system allowed for consistent layouts and reusable components, reducing redundant work.
• Smooth Navigation Implementation: Utilizing 11ty for navigation was a success. Defining navigation through data files simplified management and allowed easy addition of new pages.
• Learning Opportunity: The project provided valuable experience working with static site generators and templating engines, enhancing familiarity with these technologies.

Challenges Faced

• Template Customization: Adapting the HTML5UP template to meet specific requirements posed challenges. Customizing styles, layouts, and colors required careful attention.
• Templating Complexity: Learning the ropes of templating engines took time. Understanding template tags, filters, and layout structures was a learning curve.
• Debugging and Troubleshooting: Issues due to improper use of 11ty tags or template syntax required systematic debugging and a deep understanding of the templating system.
• Responsive Testing: Despite the template's responsiveness, thorough testing was needed across devices and browsers to ensure consistent performance.

Lessons Learned

• Planning and Customization: Prior planning and understanding template features can streamline customization. Mockups and wireframes are helpful guides.
• Mastery of Templating: Becoming proficient in the chosen templating engine pays off. Investing in learning resources reduces the learning curve.
• Effective Debugging: Developing structured debugging strategies and documenting solutions for common issues aids troubleshooting.
• Responsive Design Testing: Rigorous testing on diverse devices and browsers is essential. Automation tools and manual checks are invaluable.

Conclusion

The experience of building a website using HTML5UP templates and the 11ty static site generator was incredibly insightful. Despite challenges, successes in visual appeal, navigation implementation, and personal growth highlight the effectiveness of these tools. The knowledge gained will undoubtedly contribute to future projects' success.

This website was a remake of my old website, which you can find here Remade with 11ty, 11ty Navigation,

Old Website

This website was made primarily as a resume material, secondarily to learn HTML/CSS.

http://jmcglone.com/guides/github-pages/ helped with setting up Github Pages and initial Jekyll organization.

The Jekyll Step by Step Tutorial was great for finishing up my Jekyll setup (Obviously). Jekyll as a whole is also super helpful for keeping my workspace organized (Mostly).

I used this invaluable site for any general troubleshooting I had. Would definitely recommend it.