Innovation and Expansion of Skills
The web trend I chose to create for this web page is a software framework called Foundation. Foundation is a responsive front-end framework that is the most advanced framework in the world. I remember hearing about Foundation back when I took my CSS Technologies course in Spring 2020. In my final CSS Project, my team was to focus on Bootstrap while the other teams were focusing Foundation. I never heard of Foundation until that final project. This learning plan got me to dive in more on what it's all about. I found out that it works similar to Bootstrap because they are both Frameworks, Content Delivery Network (CDN), Stylesheet Files, classes for styling, and more. They also provide a tutorials on how to add a menu, buttons, typography, adding Grids and Flexboxs, etc. If you want to customize your Foundation site, I would suggest creating a new stylesheet because Foundation has a stylesheet that has over 5,000 lines of code that helps to work the Foundation web page. If you do play around with the foundation.css file, chances are you will break the file which will prevent the Foundation file to work properly. That's why it is always best to customize your Foundation file in a different stylesheet.
One Browser with Page Meeting Web Coding and Design Standards
One browser I used to complete this project was Google Chrome. Google Chrome has a Developer Tool that helps to catch JavaScript errors and helps if you want to change the style of your web page. All of have to do is right click to select Inspect or (Ctrl + Shift + I) on the keyboard and look in the Styles under Elements to turn on and off some of the properties to help where to style an area. You can also click Console to view if you have JavaScript errors or warnings. I also managed to use W3C Validation to check if I had any HTML and CSS errors in my code. I have no HTML, CSS, and JavaScript errors in my code. My page is very functional in all web browsers as well. This web page is created by a software framework called Foundation.
Reflection
In this learning plan, I learned how to create a web page using a software framework called Foundation. Foundation is a responsive front-end framework that is the most advanced framework in the world. Before this project, I never knew anything about Foundation other than it being a framework and all. I managed to create a mobile menu which helps users to view navigation links a lot easier on mobile devices than keeping the links as a display inline. I made my section into columns with a class of small-12 and medium-5 size. I created a nav-desktop class to make my background color transparent to my title-bar "Patrick Mangan". I added a hero image called double-bubble-dark to match the theme of my site. I downloaded the background image from the Toptal Subtle Patterns website. I made my navigation links to be linked my an id so that you can stay on the same page. I added a "Back To Top" button so that it's faster to scroll up to the top instead of scrolling up manually. The Learn More button links to the Foundation home page while the Call To Action button links to the Contact Information in the footer area. I also added a Site Map, Contact Information, Social Media, and Resources to my footer area. This was a fun software project to work with. Someday, I want to be a Pro at creating web pages with different software frameworks.