Skip to content

Latest commit

 

History

History

contact-page

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
public
public
 
 
src
src
 
 
README.md
README.md
 
 
index.html
index.html
 
 
jsconfig.json
jsconfig.json
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

README.md

Contact Page

Deploy status

Deploy challenges

Overview

contact-page screenshot

This challenge is to practice form and responsive design with HTML and CSS skills. The challenge is to create a contact page that you need to work with form, inputs,..

User Stories

  • Create a contact page that matches the given design.
  • Use HTML to create the basic structure.
  • Add icon, heading, description, form, input, dropdown, button,.. according to the design.
  • Inputs should have placeholders.
  • Dropdown should have at least 2 options, it's up to you which more options to add but the default must be same as in the design.
  • Use CSS or CSS frameworks for styling.
  • The page should be responsive on different screen sizes.
  • Deploy the solution and submit Repository URL and Demo URL.

Built With

Extra Features

  • Clear form on submit

What I learned

  • Create a contact page with HTML and CSS.
  • Set custom icon for <select> element

How To Use

To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges

# install all workspace dependencies
cd dev-challenges && pnpm install

# Run contact-page in dev-mode
cd vanilla/contact-page/
pnpm run dev --open