/finance-app

A responsive Finance App landing page focusing on modern responsive web design techniques.

Primary LanguageCSSMIT LicenseMIT

Finance App - Responsive Web Design

This is a solution to a basic Finance App landing page. In the process of building this single page I managed to gain a greater understanding of responsive web design and making websites that can adapt to every device and every screen size.

Table of contents

Overview

The challenge

Users should be able to:

View the optimal layout depending on their device's screen size

Screenshot

Above is what you should see when you click on the link below.

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • jQuery 3.6.0
  • Flexbox
  • Animations

What I learnt

  • I learnt how to build modern, responsive websites using HTML and CSS.
  • How to add some functionality using JavaScript to make a sliding submenu button, which improve the user experience and aesthetics.
  • Use relative units (such as percentages) for the sizes of the elements and fonts.
  • Use CSS media queries to define breakpoints and layout changes.
  • Define the viewport to adapt to mobile screens.
  • Use CSS Flexbox to make it easier to create flexible layouts.
  • Styling for both desktop and mobile devices.

Here are some code snippets I am proud of:

.feature {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: left;
		margin: 0 0 15px 0;
		font-size: 16px;
	}
$(function() {
	$('.btn').click(function() {
		$('.submenu').slideToggle(500);
	});
});

Useful resources

  • CSS-TRICKS Flexbox -This helped me learn about all the different properties of flexbox and about the parent (flex container) and the children (flex items).
  • YESVIZ Screen Dimensions for Devices - A useful website for finding out about different screen sizes, viewport sizes, css media queries and resolution for all kinds of devices including phones, tablets, smart watches and laptops.

Author