Client FBLA

Community Service · Responsive Design · Lead Developer

Huntsville Middle School FBLA

A Community Service Project Portfolio and Chapter website.

The Huntsville Middle School FBLA ("HMS FBLA") website is a portfolio that expresses our 2020-21s Community Service Project, alongside previous projects and chapter information.

View live project

FBLA Multimedia and Website Development
1st Place Winner

In 2020, I competed in the Multimedia and Website Development competitive event by FBLA to test out my newly earned web development skills. Our main goal behind the project was to present our Chapter's 2020-21 Community Service Project to local community members. 

The Huntsville Middle School FBLA website won first place at the FBLA Arkansas Stale Leadership Conference.

Responsive Design

Websites today are viewed on a variety of devices, not just on large displays anymore, but also small screen sizes that fit in your pocket. Websites used to be made for one screen size and that was it. However that can't be the case anymore. Creating a page to only fit a large display will make it look weird on small devices. (and vice-versa) This is where Media Query, a powerful CSS feature comes in. Media Query checks the device size that the page is being loaded on and uses only the code meant for that screen size or screen size range. This creates a mobile-friendly environment where the native page fits both desktop and mobile devices instead of redirecting mobile devices to a separate mobile-friendly page. 

The Huntsville Middle School FBLA page has plenty of examples of Media Query existing. Mostly in images, it allows smaller devices to experience the full image instead of the image being too big or cut off. For the rest of the design, you can see CSS Grid in action to make text and other elements fall in a perfect place for mobile devices.  Below you can see an example of a page using media query and CSS Grid to change the size of a YouTube Video thumbnail and the location of the text beside it.

As you can see. With the desktop version, there's text beside the video thumbnail that displays the speaker's name as the header, then text explaining the purpose of the video. On the right however, you can see that the video thumbnail has since been resized to fit the size of the now smaller display (Media Query) and the header, text, and button have also reconfigured themselves appropriately below the video thumbnail.

Huntsville Middle School FBLA
Community Service · Responsive Design · Lead Developer