Submitted about 1 month ago

Initial QR Code Challenge

JdccDev• 60

@jdcc1024

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Good intro course. Good to work on a simple UI component without worrying so much about React Components, tailwind classnames and more. It was helpful to take a step back and style the raw HTML with CSS

Next time I would want to add a tiny bit more structure around the project. For example, separating style out into it's own file, or using a build / dev server from the get-go.

What challenges did you encounter, and how did you overcome them?

Finding a static site generator that worked on the raw HTML scenario. Most site generators expect us to be using proper build tools such as astro, vite or webpack.

Just took a little research and getting used to. Also got to experience some CI pipeline logic in gitlab.

What specific areas of your project would you like help with?

If you have time to leave a comment, I would like to hear what you think about the most "lightweight" way to get a simple demo app like this up and ready.

Building muscle memory around getting a quick demo app up and running could be very helpful when trying to do development on a small vertical of a larger project. What is your strategy for a quick feedback loop when working in a large codebase?

Community feedback

MikDra1• 6,090

@MikDra1

Posted about 1 month ago

Start with a Basic Template: Use a simple HTML boilerplate to set up the structure quickly. You can reuse this template across projects to save time.
Inline CSS or a Minimal Stylesheet: For quick demos, either write CSS inline or use a minimal external stylesheet. This approach speeds up styling without the overhead of setting up preprocessors or large frameworks.
Use a CDN for Frameworks: If you need any CSS frameworks (like Bootstrap), link them via a CDN. This avoids the need for additional setup or downloads.
Live Server: Use a live server extension (like the one in VS Code) to automatically refresh the page as you make changes, providing immediate feedback.

Marked as helpful

JdccDev• 60

@jdcc1024

Posted about 1 month ago

Hey @MikDra1,

Thanks for replying to both my Blog Preview Challenge and this QR Code Challenge! I really appreciate your feedback here

As you've suggested, I started keeping an empty git repo with a freshly initialized astro project, sample css and my most commonly used configs: prettier config, gitlabs pages deploy script, astro config, etc.

As I start adding more frameworks or pieces into my techstack (e.g. tailwind), I will be keeping some basic configs from those as well.

Thanks for the feedback!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord