- Bootstrap v4.5.2
View deployment: alligatormonday.github.io
12/05/2020 - Updated portfolio page and resume to featuring recent class projects!
10/05/2020 - Newly updated portfolio page featuring resume and recent class projects with deployed links/Git Repos.
Submission for my second assignment within the Full-Stack Web Development Coding Bootcamp via University of Arizona.
In this assignment, I was tasked with creating a responsive portfolio site using Bootstrap.
My goals were as follows:
- Develop a portfolio site with...
- A Navbar (on every page)
- A responsive layout
- Responsive Images
- Use Bootstrap's grid system (containers, rows, columns)
- Use semantic HTML elements that follow a logical structure
- Properly use Bootstrap components and grid system
- Valid and correct HTML (use verification service)
I approached this assignment knowing that I wanted to challenge myself. I now feel fairly comfortable using Bootstrap after completing this assignment. I think that I've demonstrated a beginners comprehension of this framework.
I used a custom Bootswatch theme (see below for credit/source) to give my site a slightly different look than the out of the box Bootstrap code. I modeled my pages off of the given examples provided by my instructor, and took some creative licensing/influence from other website and examples I found in my search for portfolio sites.
This was a fairly challenging assignment for me. It was important to me to color outside of the lines, a little bit, in order to have an understanding of the limitations within Bootstrap. I spent too much time on trying to add fancy things though, like the footer. I wasn't able to quite figure out how to make the footer sticky. I am happy with the footer though. I watched some YouTube videos and modeled my footer off of a famous photographer's website. Sourced below. It was a fun way to add to my page and make it stand out. It also has added benefit of bringing a more professional quality to the site. I felt really excited and proud when I was able to get it work and respond functionally.
Overall, I spent too much time on this assignment. My instructor provided some good insight, that I plan to stick to over the duration of this course. Going forward, I will spend no more than 10 hours on a given assignment. I notice that I get very stuck on the aesthetics and the design of things. Sometimes to my own detriment. After putting in enough time (whether the assignment is complete or not), I will submit the assignment. Then after I have sufficiently studied the current week's materials, and if I have the time to do so, I will go back and try to implement other features to my previous assignments.
I loved this assignment, it helped solidify some concepts that I was coming across in the first assignment, where we refactored code. Specifically, the navbar. That was a huge headache in that assignment. Using the components and grid system within flex made laying things out much simpler.
- John Hernandez (Coding Bootcamp Tutor)
- Anthony Demott (TA)
- Brandon Burrus (TA)
- David Lovett (Instructor)
- https://validator.w3.org/ - HTML Validation
- https://www.youtube.com/watch?v=PwN0KVIrbA8 - Bootstrap 4 Basics Add A Simple Footer
- https://fontawesome.com/ - Font Awesome
- https://www.youtube.com/watch?v=JW8onAG62Xw - Font Awesome How/to
- https://www.joeyl.com/overview/category/quick-portfolio - Website/footer style influence
- https://bootswatch.com/slate/- Bootswatch Theme
- https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-items-to-the-right/41513784 - Navbar Items content-arrangement