The following selection is a partial listing of some additional web–based projects using Bootstrap V4 that demonstrates the latest in mobile-first designs. I've developed these prototypes to showcase my ability to use the most popular framework for building responsive, mobile-first projects on the web. However, I designed and coded this site from scratch in an effort to remain self–reliant and not dependent on frameworks.
This example is an actual functional prototype developed for a former employer, but sadly folded before the site could be deployed. It demonstrates how a company's website can be leveraged as it's primary lead generation tool with a focus on user experience and inbound digital marketing methodologies.
- Custom UI Design
- Conversion Process:
- Landing Pages
- Thank You Pages
- Social Media Sharing
- Flat Design
- Four Tier Pricing Options
- Performance Optimization
- Search Engine Optimization (SEO)
- Well-formed and Semantically Correct Markup
- Well-structured Information Architecture (IA)
News and Magazine Website
This example is a prototype developed from a popular template. I downloaded the project files, cleaned-up much of the markup and updated the interface in an effort to apply my own unique style.
- Completely updated the content, images and color-scheme
- Updated the bootstrap.min.css file to current version
- Updated the custom CSS file to include additional rulesets, and where applicable, used the “Atomic CSS” approach to create separate classes for each reusable property
- Used Bootlint to indentify and correct errors with the markup
- Used CSS Lint to indentify and correct errors in the stylesheet
- Used DirtyMarkup to restructure the custom CSS stylesheet
- Source: Grafreez
The following examples are based on a set of online tutorials and the source files are stored in GitHub for review.