0

Responsive WWI Planes

  Nathaniel Smith, a student at Lakeland Christian Academy, took Coding I with us last year. He is a very talented young man and we are glad to have him back for Coding II this year. In this article, we are featuring a site which he built to be “Responsive.” A Responsive website is one which will resize depending on the device’s screen size. By making a Responsive Website, a site can become more easily accessible to a broader audience (which includes, mobile and tablet users).

 

To view the Nathaniel's site at full-width click "Edit on Codepen" or click this link.


Student Profile

Name:

Nathaniel Smith

Age:

16

School:

Lakeland Christian Academy

How long have you been coding? 

"Since 8th grade"

What do you like about coding?

"I want to have a career in Computer Science/Engineering because I've always been interested in technology. I was interested because I took Coding 1 last year. "
TX CAN Rosemarie.jpg

tHE Source Code

     This site is a slide show at desktop view and a simple image gallery when viewed in a smaller device. To achieve this, Nathaniel used what is known as Media Queries. These are special CSS rules that allow a developer to change how a site looks based on the size of a user’s screen.

 

     When asked about how he approached the coding for this site, Nathaniel said,

“I started with the mobile design and tablet design, then completely redid it for the desktop design.”

Nathaniel followed the “Mobile First” approach for making websites. In this approach, a developer begins by making the website in mobile view, and then scales up to tablet view and finally desktop view.  

 
The inspiration for this site came from a painting of  a WWI shark faced aircraft, signature nose art of the "Flying Tigers." 

The inspiration for this site came from a painting of  a WWI shark faced aircraft, signature nose art of the "Flying Tigers." 

 

In this project Nathaniel decided to only use CSS to animate his slideshow. By using keyframes he was able to establish keyframes (or waypoints) at certain points which create an animation sequence.

Nathaniel is a very talented coder and we can't wait to see what else he comes up with next!  

In this snippet of code “@media screen and (min-width: 1080px)” is the media feature that controls the styles of this site when the browser reaches a size of 1080px wide.

In this snippet of code “@media screen and (min-width: 1080px)” is the media feature that controls the styles of this site when the browser reaches a size of 1080px wide.

 

By doing this, we can focus on the most important details of a site and then  scale up.  Nathaniel's site is an image gallery, therefore his content does not change based on the size of a user's screen, but it makes more sense to make his content into a slideshow at larger screen sizes and into a scroll-able gallery in a  phone sized screen. 

 
 
WWI Planes  Responsive Site by Nathaniel Smith keyframes.png