DIVING RIGHT BACK INTO CODE!
Whether you love coding or prefer using WordPress, it’s important to know that responsive grid systems are a big part of the web. They’re the foundation for most websites and themes today. Learning the basics of how responsive websites work is actually pretty interesting!
Rows & Columns Drawing Exercise
https://hennepintech.edu
At a technical level, a CSS grid system works by allowing you to define a grid container element in your HTML and specify the number of rows and columns, along with their sizing and placement properties, using CSS properties like grid-template-columns and grid-template-rows. You can then place child elements within this grid container using grid-column and grid-row properties, enabling precise control over their positioning. This system uses a two-dimensional grid structure, making it easy to create responsive and complex layouts while maintaining semantic HTML.
Complete Grid Guide
https://css-tricks.com/snippets/css/complete-guide-grid/
People have even made their own Responsive Grid Systems:
http://www.responsivegridsystem.com
More Results on Google:
https://www.google.com/search?q=css+grid+systems&oq=css+grid+systems
CODE EXAMPLE
Example 1: Responsive Grid with CSS
https://codepen.io/dustingrice/pen/mdvJYgL
LEARNING ABOUT DROP DOWN MENUS
Basic Navigation Menu with Dropdown:
https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
More Sample Code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_hor_scroll
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown
SOCIAL MEDIA
Embedding Facebook into our Websites:
https://sproutsocial.com/insights/how-to-embed-facebook/
How to Add Social Media Buttons
HTML: Simply find an image, and add a link to it! https://www.google.com/search?q=facebook+icon https://www.google.com/search?q=instagram+icon
WordPress: https://torquemag.io/2019/01/5-best-ways-to-add-social-media-icons-to-your-wordpress-website-or-blog/
CLEAN CODE
Code Cleaners & Formatters:
https://www.freeformatter.com/formatters.html
https://www.cleancss.com/css-beautify/
CODE COMPLIANCE
Code compliance is vital for HTML and CSS because it ensures consistency, accessibility, and compatibility. Compliant code follows web standards and best practices, making it easier for different browsers and devices to render content correctly. It also improves accessibility for users with disabilities, as compliant code provides proper semantic structure and supports assistive technologies. Additionally, compliant code is more maintainable, reducing the risk of errors and making it easier for developers to collaborate. Overall, code compliance enhances the user experience and the long-term viability of web content.
More Information:
https://www.polemicdigital.com/w3c-compliance-is-it-a-requirement/
Code Validation Tool: https://validator.w3.org/
*This can also help you find bugs & fix errors in websites!
WEBSITE ACCESSIBILITY
Website accessibility refers to the design and development of websites in a way that ensures they can be used and understood by people with a wide range of abilities and disabilities. This includes making web content perceivable, operable, understandable, and robust for all users, including those with visual, auditory, motor, and cognitive impairments. Accessibility is important because it promotes inclusivity and provides equal access to information and services for everyone. It not only benefits people with disabilities but also enhances the user experience for all, improves search engine optimization, and can help websites comply with legal requirements. In essence, web accessibility is a fundamental aspect of creating a more equitable and user-friendly digital environment.
What is Website Accessibility?
https://www.w3.org/WAI/fundamentals/accessibility-intro/
What does the law say?
https://www.searchenginejournal.com/website-accessibility-law/285199/
In the future, this could certainly be more of a concern depending on your client and their type of business… See this lawsuit about Domino’s Website:
https://mashable.com/article/supreme-court-reject-dominos-inaccessible-website/
Accessibility Tools:
http://wave.webaim.org/
https://www.mediacurrent.com/blog/5-website-accessibility-checkers
https://www.webaccessibility.com/
https://www.w3.org/WAI/ER/tools/
Discussion 6 - The Wayback Machine
*Submit Discussion into D2L
Think of a website that you clearly remember from your past, one that may not be around any more, or may have completely changed from what it used to look like 10 or more years ago, and look it up on this website, The Wayback Machine:
Now look at the results it gives you in the timeline, and select a result from the past, and try to find one that you recognize and remember from your past… Once you find this, please share a link to it.
For example, I remember the super old Hennepin Tech website so clearly from when I went to college here, and here is a link to it:
https://web.archive.org/web/20031120165802/http://www.hennepintech.edu/
Have fun surfing archives of the internet!
Assignment 6 - Responsive Grid System with Previous Park Website Content
*Submit Assignment into D2L
Based on the lesson from this week, build a responsive website structure via CodePen and ChatGPT with a header, content area, and footer, built with rows and columns, and turn it into one simple page with content copied right from your state park website… Keep working back and forth with ChatGPT, copying and pasting code, and continuing to tell ChatGPT to keep helping you update your code…
The final page should include:
-Page Title/Park Name
-Park Description/Paragraph(s)
-Minimum of 1 Park Image
-Minimum of 1 Park Video embedded from YouTube
-1 Footer area should have a Park address and optional contact phone number
-1 Footer area should also have an embedded Google Map of your Park location
Don’t stop there though! Always feel free to add more, maybe create a 3rd column for your footer, try to add your own sidebar, etc…
Also play around with the looks of the page, and tell ChatGPT to keep adding more CSS code to keep making it look better… Push yourself to see what you can keep creating just by prompting ChatGPT…
Submit a link into D2L when finished and look forward to sharing! Good Luck!
Sample Student Work
