An HTML, CSS, flexbox, and responsive mobile first coding challenge for Full Stack Coding Boot Camp.
This project involved coding a web developer portfolio using HTML and CSS and incorporating the advanced CSS techniques we learned in the first and second modules of the boot camp course. Some of the accpetance criteria for this project included creating navigation links that scroll to their corresponding sections and making the layout responsive to different screen sizes and devices.
The main challenge I encountered while completing this project was learning how to implement flexbox. There are multiple flex containers on my portfolio page, some contained within one another. I also found styling the text over the images to be challenging; however, documentation on W3Schools came in handy for this.
I also used the BEM methodology to write my class names and organize my HTML and CSS. One challenge I continually encounter with CSS is knowing when to refactor repetitive code. Right now, my CSS is organized by section, making it easy to understand what code does what on the page; however, there is a lot of repetitive code that could easily be refactored, and I plan on doing some refactoring to this project at a later date.
Finally, I did not change much about the layout for this challenge. I essentially copied what I was given, colors and all. If I had more time, I might try to add more of my personality to this project; however, I am a web developer and not a designer, and I prefer to spend my time focusing on the code rather than on the design. I did add a photograph I took of the Colorado Rocky Mountains in place of a recent photograph or avatar to add a little personality to my portfolio project.
HTML, CSS, BEM, Git, GitHub, VS Code, Chrome, Firefox
This project is licensed under the MIT License.
- How To Write Cleaner CSS With BEM on Web Dev Simplified Blog
- The Dilemma of Naming Font Size Variables by Martin Lexelius on CSS-Tricks
- An Interactive Guide to Flexbox by Josn W. Comeau
- How TO - Position Text Over an Image on W3Schools
- How TO - Text Blocks Over Image on W3Schools
- PX, EM, or REM Media Queries? by Zell Liew