Computer Science 318


Fundamentals of Web Design

Lab 17 - Reverse Engineering Advanced


Goal

Reverse engineer the html and css to recreate the design provided.

Learn

Reference previous labs when you need assistance.

Hint: I did use display flex and grid when creating certain parts of the layout. Those properties are not they only way to accomplish it but I found them easiest. I also reused the javascript from lab 19 to create the sliding navigation on mobile.

Practice

Desktop Design

Butter-half Desktop design

Mobile Design

Butter-half Mobile design

Butterhalf Zip Files