Level Up MMA
This is a clean and simple website for a youth-focused mixed martial arts gym.
Link to project: https://levelupmma.netlify.app
How it's Made
Tech used: HTML, CSS
This was the first static site I built while I was learning HTML and CSS. Everything is coded from scratch only using an image of a layout template to reference. While looking at the template, I quickly mapped out the HTML elements in my head to form a rough draft of the content structure. With that in mind, I started writing the HTML making sure to use proper tags that make the most semantic sense and allow for accessibility options like screen readers. With the site content completed, I got to work on styling with CSS. I built out the core layout first using floats, borders, and placeholder images as a first pass, then added color, and pulled in some beautiful images from Unsplash. From there I just needed to make some minor tweaks and add media queries for responsiveness.
Optimizations
Always keeping responsiveness in mind, I made sure everything looks good on desktop, mobile, and everything in between. I also noticed that the site was rather sluggish at first, so I compressed my image and video files. Much better.
Lessons Learned
I built this site's layout using floats because other engineers recommended doing so in order to fully understand the box model. At first I thought this must be some kind of joke because I knew there were much better layout building alternatives in CSS like flexbox and grid. But they assured me they were serious so I took them for their word and started on my floats only layout. I quickly found out what they meant. I did so much trial and error coding in order to place things where I wanted, it would be impossible NOT to understand the box model after building this site. Although it would've been much easier to build this site with flexbox or grid, I am glad that I used floats because not only do I now have a deeper understanding of the box model, I can also work with any legacy codebases that may still use floats!