The latest articles on DEV Community by Cipi (@cipivlad). https://dev.to/cipivlad https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F856357%2Fa29e8a17-c60d-4dc5-8488-4e089994e7b2.jpg https://dev.to/cipivlad en Cipi Wed, 03 Apr 2024 13:19:38 +0000 https://dev.to/cipivlad/multi-step-form-frontendmentor-challenge-292d https://dev.to/cipivlad/multi-step-form-frontendmentor-challenge-292d <p>I've just completed a front-end coding challenge from @frontendmentor! 🎉</p> <p>You can see my solution here: <a href="https://www.frontendmentor.io/solutions/responsive-multi-step-form-react-ts-and-scss--_TAZ4SVDy" rel="noopener noreferrer">frontendmentor</a></p> <ul> <li><p>source available on: <a href="https://github.com/CipiVlad/multi_step_form" rel="noopener noreferrer">github</a></p></li> <li><p>Live Site URL: <a href="https://multistep-fm-challenge.netlify.app/" rel="noopener noreferrer">netlify</a></p></li> </ul> <p>Any suggestions on how I can improve are welcome!</p> react vite typescript frontendmentor Cipi Sun, 31 Mar 2024 17:38:18 +0000 https://dev.to/cipivlad/glam-up-my-markup-challenge-2hkh https://dev.to/cipivlad/glam-up-my-markup-challenge-2hkh <p><em>This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities</em></p> <h2> What I Built </h2> <p>I built an inquiry web app for camping activities using the starter code with vite vanilla javascript. <br> Since a plain form leavs a rather "boring" impression - at least for me -, <br> I'm trying to capture the atmosphere of a possible user and make a "boring" form somehow interesting. <br> Therefore I picked a background image by <a href="https://unsplash.com/photos/camping-under-black-sky-k7fUP9RQj3Y" rel="noopener noreferrer">Kevin Erdvig</a> and found a matching favicon.<br> Then added some css "glamping" style with glowing effects to headline and labels, and rounded some borders for a smooth and welcoming appearence. <br> I chose to handle user submission with <a href="https://www.npmjs.com/package/toastify-js" rel="noopener noreferrer">toastify-js</a>, so that there's only a brief notification for the user after hitting the button. </p> <h2> Demo </h2> <p>You can find the project <a href="https://campactivitychallenge.netlify.app/" rel="noopener noreferrer">here</a> and the code <a href="https://github.com/CipiVlad/camp_activity_dev_to_challenge.git" rel="noopener noreferrer">here</a>.</p> <h2> Journey </h2> <p>Although the purpose of the user visiting this web app is to get a quick info, it doesn't mean to lack of style. So taking this user's view, finding the fitting background I really enjoyed working on the forms look and felt challenged to get something done. Till now I didn't style web apps with "glowing" effcts, as there were no use cases for that and for the first time I used the text-shadow and the css selector label[for=""]. So now I know better :)</p> <h2> camp_activity_dev_to_challenge </h2> frontendchallenge devchallenge css javascript