Skip to content

Creating a responsive text messaging app for desktop ad mobile using HTML, CSS, and Javascript

Notifications You must be signed in to change notification settings

cbedroid/Messenger-UI

Repository files navigation

Messenger-UI

Text messaging application for desktop and mobile devices

Task

Build a replica text messaging application that's both... Pleasing to the eyes, and give the end user the best experience. Bring out your UI/UX designing skills that will give users the best experience while using your application! Design an app that is not only mobile friendly but can also be used on various different devices such as a laptop or desktop.

Criteria

  • Choice of design, layout, and intuitiveness of the interface.
  • Responsiveness across various devices
  • Create markup that's compatible and up-to-date with browser's current release
  • Create at minimum 1 or more CSS style sheet( you can use any framework of your choosing, must include any framework and codes as well)
  • Create at minimum 1 or more javascript files that interact with DOM.
  • Create a backend server to host your codes ( optional, but you can earn yourself some "brownie points" for doing so :-)

Summary of Tech Stack

This application was built using the latest technology and design patterns of today's era (2020). I chose to build this application using purely HTML, CSS, and Javascript. Using HTML, CSS, and Javascript, I can quickly structure my code fast and easily giving layouts a smooth sleek responsive design.

For CSS, I decided to go with SASS (Syntactically awesome style sheets), because of its amazing features. Using Sass, I can apply styles to my layouts faster than normal CSS. This framework also offers features like nesting, allowing me to manipulate elements easier than the standard CSS. This will result in better structure and minimize time to complete the task. Thinking with a team mindset, this will be great for any future developer that may potentially join in this project.

Mobile Design


Desktop Design