Front-End Website Development
Although both website design and front-end web development can be considered an art, taking a design and creating a functional website out of it is much more technical then an initial mockup. Not only is cross-browser compatibility a concern, but now one must ensure proper display across a sea of digital devices.
Today’s challenges come from creating an experience for the end user to get them the information they need quickly. Fortunately for designers we have an abundance of frameworks such as Bootstrap, Foundation, Pure, and Material Design Lite to help speed up production of a website. The only drawback is sometimes the design can be limited by the scope of these technologies, unless heavy modifications and overrides are taken to the CSS code.
As we move forward, a new standard known as flexbox seeks to replace the old grid systems and css hacks previously utilized in these frameworks. Phillip Walton has a good example of this on his website: Solved by Flexbox. The only apparent drawback is compatibility with Internet Explorer, which has now been replaced by Microsoft Edge. Fortunately, outside a few legacy applications, support for Internet Explorer can now be safely phased out. As demonstration of the power of flexbox and my understanding of this new standard, this portfolio website was written from the ground up without any of the previously mentioned frameworks.
In preparing my portfolio, I wanted to demonstrate my understanding of various technologies. This website was written from scratch without a Photoshop wireframe, first using Sublime Text and later Atom. In doing this, I’ve created a flexbox based grid framework for use on this and other projects going forward – called FlexForward – to accomplish the layout of this website. Although FlexForward is still very early in development, I believe it’s strong enough to be used in this portfolio as a demonstration.
In addition to the HTML, CSS, PHP, and the reusable flexbox grid framework I’ve created for this website, I’ve also borrowed a few open source solutions to demonstrate my ability to integrate with existing code and tutorials.
Highlights of this website as an example
- No front-end framework, all layouts were built from the ground up
- In the process, created my own framework called 'FlexForward'
- Normalize.css for a standardized presentation across browsers
- jQuery and jQuery UI for effects
- Bootstrap’s Modal.js for overlay pop-ups
- This also allows non resource intensive smooth animations on Android’s Chrome.
- Disabled on Microsoft Edge as a fallback for maximum compatibility. There is currently an open bug for MS Edge addressing the issues with that browser.
- Also disabled in Mobile Safari (iOS Devices) for best appearance, and disabled in Firefox (mobile and android) for lag issues. For these devices, 3DCanvas is not activated via CSS (parallax.css).
- Font Awesome icon fonts
Portfolio code for review
This live website can be downloaded from its git repository on GitLab for your review. In fact, when updating this website, the server pulls from the master branch.
Download this Portfolio on GitLab