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.
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. "
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.
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!
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.