Lesson 8 - Working with Existing Code, Website Tools, Advanced CSS - Minnesota’s Real World Website Classes & Mentorship

—–Working with Existing Code & Hackers—–

When working with existing HTML and CSS code as a new web developer, remember to:

-Understand the code’s structure and purpose.
-Validate and clean the code for standards compliance.
-Create backups before making changes.
-Add comments for clarity and documentation.
-Ensure responsiveness and browser compatibility.
-Optimize for performance and accessibility.
-Thoroughly test changes and collaborate with your team.
-Keep a record of your modifications.
-Stay updated with evolving web development practices.

What about diving into a website that has been “hacked”? If you suspect a website has been hacked, here’s what to do:

-Assess the breach’s extent.
-Isolate affected areas.
-Back up the site.
-Scan for malware and remove it.
-Change all passwords.
-Update software and patch vulnerabilities.
-Review access logs.
-Remove malicious code.
-Implement security measures.
-Monitor for future breaches.

It’s important to note that not all hacks result in catastrophic damage. Some hackers may deface a website or change its appearance without causing data loss or significant harm. However, even in such cases, it’s crucial to treat the hack seriously and take appropriate actions to restore the website’s integrity and security.

—–Backing Up & Troubleshooting Websites—–

What can we do to help our clients, and also help us ensure saving massive amounts of time for ourselves…

Backing Up Websites:
Read this: https://www.dreamhost.com/blog/10-important-reasons-to-perform-website-backup/

-Backing Up HTML Sites via FTP: https://www.youtube.com/watch?v=zE4SKMGW2Wo
-Backing Up WordPress via FTP: https://www.youtube.com/watch?v=SuyMvWrVZ1M
-Backing Up WordPress Database & Restoring: https://www.youtube.com/watch?v=DZrYdRYTniM
-Backing Up WordPress via Plugin “All In One WordPress” & Restoring: https://www.youtube.com/watch?v=kpsjTPsygbs
-Backing Up WordPress Sites into Google Drive, Dropbox, etc: https://ca.wordpress.org/plugins/updraftplus/
-Backing Up All Sites via cPanel Backup: https://www.youtube.com/watch?v=Xxvn5D7QTFc

Backing Up Files in General:
-Time Machine: https://www.youtube.com/watch?v=Cd2YaBCXpaM
-Basic Backup 101: https://medium.com/@johnmireles/how-to-not-lose-your-photos-a-simple-and-easy-hard-disk-backup-strategy-for-photographers-2ea69bbfb6b4
-Personal Month & Date Structure, Google Drive Remote Folders, Dropbox

Troubleshooting HTML & CSS Code:
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

Updating HTML & CSS Code:
Using a Code Library & running into an issue? Have you also updated to the latest version of the code library? This code should always stay up to date as well! Any plugins, APIs, connected services, sample code, etc.

Troubleshooting WordPress:
https://thedesignspace.co/5-ways-to-troubleshoot-wordpress/
https://www.collectiveray.com/wordpress-debug
https://wordpress.org/plugins/health-check/

Updating WordPress:
https://www.wpbeginner.com/beginners-guide/why-you-should-always-use-the-latest-version-of-wordpress/
https://optimwise.com/why-update-wordpress-and-plugins/

Working with LOTS of plugins? Try this: https://wordpress.org/plugins/plugin-detective/

—–ADVANCED CSS—–

Advanced CSS can enable you to implement responsive design with media queries for various screen sizes, use custom fonts to enhance typography, create intricate animations and transitions for engaging user experiences, and even achieve 3D effects through transforms and perspective properties, among other possibilities.

You can also achieve effects like parallax scrolling, complex grid layouts, sophisticated image filters, flexible box alignment, custom shape creation, and fine-grained control over text and typography, allowing for highly creative and visually appealing web designs.

You can even create simple games using CSS, leveraging animations and transitions to build more interactive experiences.

—–CSS Media Queries—–
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

—–CSS Custom Fonts—–
Notes Link: https://www.w3schools.com/css/css3_fonts.asp

You can also add fonts via Google Web Fonts: https://fonts.google.com/
Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face

WordPress Example:
@import url(‘https://fonts.googleapis.com/css2?family=Secular+One&display=swap’);

{
font-family: 'Secular One', sans-serif;
}

Upload any Font File WordPress Plugin:
https://wordpress.org/plugins/use-any-font/

Then in your CSS Code:
h1 { font-family: ‘Droid Sans’, arial, serif; }

—–CSS Animations—–
https://www.w3schools.com/css/css3_animations.asp

—–Code Libraries—–

Kicking things off with a very simple introduction to Font Awesome!
https://fontawesome.com/

Bootstrap – You could even almost call this a Design Library… Where we can add pre-written code into our website, and instantly make incredible looking web designs all still via code:)
https://getbootstrap.com/docs/4.0/examples/

More Bootstrap Themes and Snippets:
https://startbootstrap.com/

More Code Libraries to Explore if interested:
https://jquery.com/
https://script.aculo.us/
https://www.educba.com/jquery-alternatives/

Discussion 8 - Advanced CSS Tips

*Submit Discussion into D2L

Google Advanced CSS Tips until you find something that really seems helpful that you did not know about! Share with the class so we can all learn about it too.

Assignment 8 - Woocomerce Store Updates & Hacked Website Fix

*Submit Assignment into D2L

—–Part 1: Woocommerce Store – Someone Needs to Return an Item!—–

Let’s imagine you sold & shipped a product on your e-commerce website… However, now someone wants to return it! Now what?

At the bottom of your Woocommerce website, create a link to a brand new Returns & Exchanges page.

On your new Returns & Exchanges page, create a new contact form any Contact Form Plugin of your choice with the following fields at a minimum:

-Name
-Email
-Order Number
-Reason for Return
-Refund or Exchange?
-Additional Notes

Any other fields you feel are also necessary to add?

Add something similar to the following text above your form: Thank you for your purchase, we apologize for this inconvenience. Please fill out the form below to start your return or exchange.

When the form submits, modify the contact form so that it displays something similar to this success message or on a separate Thank You Page: We have received your return inquiry and will be in touch with you shortly.

When you are all done with all of the steps above, submit a Return! Make the form send yourself. Submit a link into D2L!

—–Part 2: Woocommerce Store – Integrate Font Awesome and Add Icons to Your Homepage—–

Let’s add Font Awesome but only with code… We will do this with a plugin called “Head & Footer Code” Can you figure it out with ChatGPT? We’ll do a demo in class! Once it is working, add a few icons to your home page & style them how you’d like. Submit a link into D2L!

—–Part 3: Woocommerce Store – Optimize Mobile Version of Your Store Using CSS—–

Access your WooCommerce website and navigate to Appearance > Customizer. Scroll down to find the CSS section. (If this option isn’t available in your theme, install a Custom CSS plugin to add this functionality.)

Now, review your website’s appearance on mobile devices. Ask yourself:

• Is the design clean and user-friendly?

• Is there unnecessary clutter or elements that don’t need to be displayed on mobile?

• Are there excessive white spaces, padding, or margins that could be reduced?

Identify areas that could be improved and use CSS to optimize the layout for a better mobile experience. Keep in mind that any time you do not like how something looks on your website, you always have the option to just hide it with CSS… And on ANY website builder too… WordPress, Squarespace, Wix, Weebly, etc… This is why CSS is so powerful.

Make sure you review all of your CSS code and make sure you are using selectors : and ; correctly! Feel free to use AI tools !! Copy and paste the HTML and ask what CSS to use to fix it… Submit a link into D2L!

—–Part 4: Woocommerce Store – Backup Your Store & Create a Copy of Your Store—–

Download a WordPress backup plugin and create a backup file of your website… Then create a new WordPress Site and import the backup so you now have a copy of your website to work on that is not the live website… Submit a link into D2L!

—–Part 5: Freelance Request – Repair Hacked Website Code—–

You’ve just received an urgent email from a client:

Subject: HELP! My Website Was Hacked—Fix It ASAP!

Message:

HELP!! My website has been hacked—please fix it as soon as possible! Here are the HTML files: Download Here Please send the fixed website back as soon as you can. Thanks!

Instructions:

1. Download the provided files.

2. Identify and fix the hacked code.

3. Once the website is repaired, zip the files.

4. Submit the zipped file.