Submitted 16 days ago

Responsive qr-code-challenge

PolariSystem•10

@PolariSystem

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

I started from scratch, barely remembering how to code, and felt completely lost. However, little by little—and being completely honest—with the help of GitHub Copilot, I managed to refresh my memory to the point of understanding how to organize everything and correct issues based on Copilot's feedback.

I’m proud of how far I’ve come, but I recognize that my code may not be as structured as a professional’s. This is something I’ll improve with experience. Next time, I’d like to rely less on Copilot and strengthen my own skills. For example, the AI helped me get back on my feet when I was completely lost, but now that I’m standing, I want to start walking on my own again and with the comunity support.

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

The biggest challenges were:

Starting from zero: I had almost no coding knowledge and felt overwhelmed.
Unstructured approach: My initial code lacked organization.

How I overcame them:

Used GitHub Copilot as a learning tool to refamiliarize myself with syntax and logic.
Broke problems into smaller steps and iteratively tested solutions.
Embraced trial and error, to identify gaps in my understanding.

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

I’d appreciate guidance on:

Writing cleaner, more professional code.
Tips to make work more efficient and clean
Best practices for project structure and documentation.

Code

Please log in to post a comment

Community feedback

beowulf1958•1,850
@beowulf1958
Posted 16 days ago
Congratulations on completing this challenge. It looks amazing. I think it is impressive that you started this project from scratch and you have come so far. I particularly like the way you styled the attribute section. I have a few comments.

First, the markup is well-ordered. However, best practices requires an H1 tag (to help search engines and screen readers.) Your <b> tag should be an <H1> since this is the title of the component. Next, the text would be better in a <p> tag, as it is a paragraph. These changes will also simplify your styling:
```
  .text {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: flex-start;
  	padding: 0px 16px;
  	gap: 16px;
  }
  .text h1 {
  	line-height: 120%;
  }
  .text p {
  	font-size: 15px;
  	letter-spacing: 0.2px;
  	line-height: 140%;
  	color: #68778d;
  }
```
Not everything needs a class name, and .improve-your-front-e and .scan-the-qr are pretty awkward. I noticed a bit of duplication in the styling as well. Trust in the cascade.

Again, you did an awesome job and will do better with each challenge. You are off to a brilliant start; great use of css variables and media queries. Looking forward to see what you do next.
Ashik_Ridwan•30
@ashik-2534
Posted 16 days ago
The personal story is engaging and relatable.

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