CLIENT Website - Luna Logistics

This is a website built for a freelance client for my consulting work. It is a simple and static business website featuring a landing page (index), about, services, and contact pages.

Link to project: https://lunafreight.com/

How It's Made:

Tech used: HTML, CSS, JavaScript, figma

Using a HTML5up.net template as my main website framework, I built the webiste by writing HTML, CSS, and JavaScript code to customize and fine-tune the website to meet the client's needs. The client had sent me a rough sketch of the business logo, as well as the copy content for each of the about, services, and contact page sections. I utilized figma and namecheap logo maker to build a cleaner prototype of a logo, and after getting feedback, incorporated the font, icons, and color scheme within the website.

Optimizations

• The template was a one-page "landing page" website style, but after reviewing the first initial website product that I built, the client wanted the website to have different .html pages per section, as well as to have a navigation bar that was visible within each page. Therefore, I restructured the organization of the website by building separate about.html, services.html, and contact.html pages, as well as creating a new header with a section across these pages.
• Because of this structural change, a lot of the ID tags had to be revised to class tags (e.g. class = "nav-header") in order to maintain consistent styling across the different pages.

Lessons Learned:

• Building a website using a template allowed me to have a taste of what it might feel like working on someone else's codebase or project, as it required me to learn how to navigate and interpret code that was not written by me. By reading through the macrostructure (i.e. how the CSS stylehsheet was organized by different features and elements of the website) as well as the use of classes and id tags, I got a better understanding of how I can better organize my HTML and CSS.
• I learned about FOUT (flash of unstyled text) for the first time while building this project. While styling the website and reviewing it on live server, I noticed that the text of the about section flashed for a millisecond before loading its intended Google Font, "Jost." Because I have not witnessed FOUT taking place before, it took a lot of meticulous googling to realize that this was a FOUT phonemenon.