Bootstrap Grid Project - final project for BVT Module 1 (Introduction to HTML and CSS)
- Responsive email template and design made in JavaScript/HTML/CSS with Bootstrap framework and CSS Flexbox method.
- JS/HTML/CSS tech stack was chosen due to its popularity in front-end web development, effectiveness in making responsive and interactive user interfaces, cross-browser compatibility, and the level of community support that exists for it (in the form of online resources and tutorials)
- Bootstrap library was chosen because of its ease of use, responsiveness of components across different screen sizes, cross-browser compatibility, consistency, and mainly customizability of its existing solutions (components, design classes, etc.)
- Visual Studio Code was used for code editing and Git for version control, since these tools are most widely used in web development for code editing and source code version tracking
- This is a front-end web email application with interactivity that allows users to browse various email message categories (in folders such as Inbox, Tagged, Drafts, etc.), write new messages with specified recipient and subject, reply to messages in each folder, toggle the vertical navigation bar, and search for messages in the search bar. All this can be done with maximum level of responsiveness to changes in screen size, and all components are vertically scrollable
- This application is entirely responsive and supports mobile device view, tablet/half screen view, and fullscreen desktop view (for PCs)
- The hardest part of making the HTML code structure was to make the template fully responsive for 3 different screen sizes using Bootstrap breakpoint classes, while at the same time maintaining functionality of toggle buttons, as well as the scrollable property of message list container and main message container
- Vertical navigation bar and its toggle property initially caused bugs on tablet and phone screen sizes, and it was particularly difficult to make extra small screen size (phone) template display only one container, be it message list container, main message container, or the vertical navigation bar as folder selection menu
- Delete buttons on message cards to be able to delete messages in folders
- Search bar functionality - to search for messages by title
- Connecting this frontend application to backend code to arrive at a full-stack application for sending and receiving emails, and replying to received messages
- I made this project to learn more about creating responsive webpages with Bootstrap, and also to improve my front-end development skills in JS/HTML/CSS
- This project taught me how to use Bootstrap breakpoint classes to make design components responsive to screens for different devices
- I also learned a lot about making user interfaces (UIs) as part of frontend development
- Coming back to the project a couple months after it was finished, I realized that I can apply DRY (Don't Repeat Yourself) principle to the script.js by replacing repetitive .onclick event listener code for each button in the vertical navigation bar (for each message folder) with a more abstract single for loop that creates a click listener for all of those buttons, and opens corresponding sections for message list and message container. This optimization reduced the script file by more than 280 lines of code.
To run the app on Netlify without making a local repository clone and setting up environment, click here: Run Email App
Otherwise, follow installation process described below:
- Download and install VS Code editor here
- Use the terminal in VS Code (Bash, PowerShell, depending on the OS) to download and install Node.js, find instructions here
- Use VS Code 'Extensions' page to search for and install latest version of 'HTML CSS Support' dependency (CSS Intellisense for HTML)
- Use VS Code 'Extensions' page to search for and install latest version of 'Live Server' extension (to be able to run local development server)
- (optional) Use VS Code 'Extensions' page to search for and install latest version of 'JavaScript (ES6) code snippets'
- Use VS Code 'Extensions' page to search for and install latest version of 'ESLint' to integrate ESLint JavaScript into your code editor
- Follow instructions on this link to install Git
- Choose the location (directory) for the project repository, navigate to it with 'cd [directory-name]' terminal command and inside of it clone the project repository by running the command 'git clone https://github.com/kristijanH1998/bootstrap-email-hornung.git' in your terminal
- Select and open 'index.html' file in the code editor, and click on 'Go Live' button at the bottom right bar in VS Code - this should open the app in your default web browser
- When the application opens in your browser, you should see a template like this:
- Click on any button in the vertical navigation bar on the left and it will take you to various message folders, from Inbox to Trash:
- To see more folders, click on 'More' button
- To open a modal for sending new messages, click on 'Compose'
- Click on any message card in the message list section to see full contents of the message on the right:
- To reply to any message and open a modal for writing response, click on 'Reply' at bottom right corner of message container on the right
- To collapse or hide the vertical navigation bar on the left, click on the hamburger menu button to the left of the search bar:
- On tablet-size screens the app looks like this:
- This design is for smartphone-size screens:
- The developer log I wrote while working on this project can be found here
- These are wireframe images that outline the structure and functionality of the application and show its interface on each of the three different device types (PC, tablet, mobile phone):
