DEV Community

Edward Naidoo
Edward Naidoo

Posted on

2 1

Day 5 in Redesigning Nasa's Picture of the Day Webpage

Hi There!
It has been rather slow with this project. I don’t know how to use an API and I am learning, so that will take a while. Right now I have worked on the UI and no coding. I have worked on figma to look back on the designs and I was thinking of how the mobile version should look. As I was searching, I have stumbled on this really cool resource:

statcounter

It shows statistics of many things like Google trends and for my situation, I have found a large variety of mobile resolutions. I think this resource is an amazing stepping stone to understanding the general resolutions for web, mobile (or both) development.


I have signed up for the API key at Nasa’s site so I can experiment with it or use this project as the experiment grounds. I’ll probably make a separate branch in case or make a new project where I learn how to implement an API to gather information about a certain thing.


Oh! A tip for UI design that I forgot. I doubt that this is my idea as it’s simple. When you are in you project, you can make a separate rectangle like a splash screen on stock photos and set it to the resolution you want. With this, you can see what the user will see, if let's say, their system has a 1920x1080p screen, you can see where the height ends. This really did help me as I now know the true scale of how things should be sized so the view can see the appropriate amount of content.

1920x1080 Version


1080x720 Version


Once again, thank you for reading this post. It is a quick one, but more will come soon. The weekends are coming soon so I can put more time into this project. Cya till next time!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

Try REST API Generation for MS SQL Server.

DevOps for Private APIs. With DreamFactory API Generation, you get:

  • Auto-generated live APIs mapped from database schema
  • Interactive Swagger API documentation
  • Scripting engine to customize your API
  • Built-in role-based access control

Learn more

👋 Kindness is contagious

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

Okay