DEV Community

Cover image for My solution to the Glam My Markup challenge
Sai Shravan Vadla
Sai Shravan Vadla

Posted on

My solution to the Glam My Markup challenge

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I styled the markup provide and tried to make it a functional form. I used Google's material design principles and the material theme builder to generate a color scheme out of this image of a camp in a forest. As mentioned in the challenge, I didn't edit the HTML directly but added some boiler plate code such as wrapping it in a body and html, and adding a favicon. The webpage is responsive and has light and dark themes which automatically adapt to the system. At this moment, I didn't add the option to manually change the theme, but I might add it later.

Demo

Click here to go directly to the live demo.

GitHub logo shravzzv / Dev.to-frontend-challenge-Glam-My-Markup

Solution to the 'Glam My Markup' frontend challenge from dev.to

My solution to the Glam My Markup challenge

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I styled the markup provide and tried to make it a functional form. I used Google's material design principles and the material theme builder to generate a color scheme out of this image of a camp in a forest. As mentioned in the challenge, I didn't edit the HTML directly but added some boiler plate code such as wrapping it in a body and html, and adding a favicon. The webpage is responsive and has light and dark themes which automatically adapt to the system. At this moment, I didn't add the option to manually change the theme, but I might add it later.

Demo

Click here to go directly to the live demo.

Journey

  • I copied the markup into a proper html file.
  • Gathered…

Journey

  • I copied the markup into a proper html file.
  • Gathered fonts, colors and got down a general idea of the project.
  • Used CSS with variables to make the project responsive.
  • Used JS to provide minimal interaction. Submitting the form shows an alert.

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay