Skip to content

A clean and simple website for a youth-focused mixed martial arts gym

License

Notifications You must be signed in to change notification settings

jessefrench/level-up

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

level-up

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!

About

A clean and simple website for a youth-focused mixed martial arts gym

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published