Images of Fall
Inovation and expansion of skills are demonstrated in project .
I had not had the experience in the past of creating a website using bootstrap. I found it interesting that bootstrap is a content delivery network that you link our web page to. I had used the grid system that boostrap uses to format the pages. This had reminded me a lot of using a flex-box for a responsive website. It had taken me a few tries to get the grid system in place on this site. The grid system in bootstrap consists of making div columns on the web page. The columns range from xs being the smallest that are meant for screens less than 768px. sm is used for screens equal to 768px and larger. Md are for screens that are 992px and larger. The final size is lg that is meant for screens larger than 1200px. After setting up the grid and testing the responsiveness of the webpage I was impressed with how simple it was to create a responsive website. Media queries may still have to be used for some elements of the page but not as many as a normal HTML website. I had used the inverse feature in bootstrap to make a black navigation bar with white text and made a div class of navbar-fluid to span the width of the viewport. For the hero image I had used the jumbotron feature of bootstrap to make a hero image for this site. The jumbotron is normally a large box on the web page that has a grey background. I had added an image to the jumbotron using css and had formatted the text and added a shadow to make the h1 tag pop from the background. I had placed the jumbotron outside of the container of the website to have the hero image span the width of the website. I had added a container for the body section of the webpage, so content would not span the width of the webpage and was contained. I had then added an image carousel to the website to display images. For the images I had added a div defining where the images are placed as a class of carousel-inner. I was then able to place the image tag in place and had then added a dic within the carousel inner for text to appear on the image. I had then added another column to the website to place progress bars in the website. This had contained the status bars and then I had created another container to span the desired width of the progress bar. I had then used valuemax to display the width of the progress bar and then filled in the width styling it with color and added text to display the percentage.
Project and code is 100% functional when viewed in at least one browser meeting web coding and design standards.
This website was tested in Google Chrome, Safari and Firefox using a MacBook pro 13-inch. I had verified the website was responsive when shrinking the browser down. I had then tested the website on an iPhone Xs Max. The navigation menu is optimized for mobile platforms due displaying a hamburger style menue on a mobile display. I had run the website through a validation tool and had showed that there were no errors associated with the webpage. I had also added alt text to images to ensure every visitor to the site is aware of content. I had also added meta information to the site containing author information and keywords for SEO. For design standards I had made sure to use one h1 tag in the web page. I had also changed the color of text to stand out from the images. I had chosen colors that are apparent in fall due to the images used are on the topic of the season fall. I had made sure to use softer colors in the text boxes to make it easier on the viewers eyes. I had used a color scheme that had flowed with one another and didnt take away from the content on the website.
Reflection
In working on this assignment, I am kicking myself for not using bootstrap before. When working through the assignment i had issues with breaking down the page using the grid system that is in place. I had placed the grids in places where I had wanted them and added the content in the grid I had created. I had issues with adding more content as I progressed through the project due to wanting to add more content to the site. I had text that was going past the margins of other boxes that were created. I had realized that I had to create more div classes using col-xs-__. In this assignment I had learned the importance of using a grid system to format the website. I had also learned how powerful a CDN like bootstrap is. I like how using some of the keywords in bootstrap like container-fluid will make span the width of the viewport and just using container will allow only fit the width of the column in place. I also liked how bootstrap has a library of icons in the CDN. This helps save time due to not having to make your own icons in Photoshop or messing around with websites for icons that typically charge for access to content.