Now that went FAST! What a semester!

I just put up a quick survey under our assignments area, mind filling this out when you have a few minutes?

You have all been amazing students, and I want to thank each of you for the time we’ve shared this semester… I wish you the very best as you continue your journey through school and into your future careers.

I would love to see every single one of you in our next Web Dev II E-Commerce Class… You will learn how to start selling online right from the very start of class! Please reach out any time you have any questions about our web classes. I guarantee you’ll have another great experience, while also adding even more tremendous value to your skillset as a Graphic Designer and Web Developer. AND you’ll have another new favorite class to look forward to each week…..

Have a great rest of your finals week, and CHEERS TO BEING DONE !!

Remote Week Participation: (D2L Discussions Area)
Please see our Remote Week Discussion Challenges & catch up on everything before the end of the semester.

Assignments/Homework: (D2L Assignments Area)
Please see our Assignments Area & catch up on everything before the end of the semester.

Great job everyone!

Dustin Grice
[email protected]
952-200-7732

Introduction to Web Stats

Today we are learning about Web Stats & SEO! Your website can be SO much more powerful when you know more about both!

Google Analytics is a popular web analytics service offered by Google that allows website owners and marketers to track and analyze various aspects of their website’s performance and user behavior. It provides valuable insights into how visitors interact with a website, helping website owners make informed decisions to improve their sites and achieve specific goals.

Here are some key features and benefits of using Google Analytics for building better websites:

Visitor data: Google Analytics provides detailed information about your website’s visitors, including their geographic location, device type, browser, and more. This data can help you understand your audience and tailor your website’s content and design to better meet their needs.

Traffic sources: It tracks the sources of traffic to your website, such as organic search, paid advertising, social media, and referrals. Knowing where your visitors come from can help you allocate resources effectively and optimize your marketing strategies.

User behavior: You can track user interactions on your website, including page views, time spent on pages, bounce rates, and conversion rates. This data helps you identify which pages are performing well and which may need improvement.

Conversion tracking: Google Analytics allows you to set up goals and track conversions, such as form submissions, e-commerce transactions, or other desired actions. This helps you measure the effectiveness of your website in achieving specific objectives.

Content performance: You can analyze which pages and content are the most popular and engaging. This information can guide you in creating more of the content that resonates with your audience.

Site speed analysis: Google Analytics provides data on your website’s load times and performance, helping you identify and address issues that could be affecting user experience.

Mobile analytics: With the increasing use of mobile devices, Google Analytics offers insights into how your website performs on different devices and screen sizes. This data can be crucial for optimizing your site’s mobile user experience.

Real-time data: Google Analytics offers real-time reporting, allowing you to monitor current website activity and respond to emerging trends or issues promptly.

Customization and segmentation: You can create custom reports and segments to analyze specific subsets of your audience or particular aspects of your website’s performance, enabling more targeted optimizations.

Data-driven decision-making: By regularly reviewing and analyzing the data from Google Analytics, you can make informed decisions about website improvements, content strategy, marketing campaigns, and user experience enhancements.

In summary, having detailed access to website statistics through Google Analytics is essential for building better websites because it provides valuable insights into user behavior, performance metrics, and the effectiveness of your online efforts. This data-driven approach allows you to make informed decisions and continuously optimize your website to better meet the needs and expectations of your audience.

What is Google Analytics and Why?
https://medium.com/analytics-for-humans/what-is-google-analytics-and-why-is-it-important-to-my-business-8c083a9f81be

Link to Google Analytics:
https://marketingplatform.google.com/about/analytics/

IMPORTANT NOTE WHEN SETTING UP GOOGLE ANALYTICS:
https://support.google.com/analytics/answer/10269537
See Screenshot: https://share.getcloudapp.com/v1uN5Q82

Introduction to SEO

SEO, or Search Engine Optimization, is a set of strategies and practices aimed at improving a website’s visibility and ranking in search engine results pages (SERPs). The primary goal of SEO is to attract organic (non-paid) traffic to a website by making it more appealing to search engines like Google, Bing, and Yahoo.

Here are key components of SEO and reasons why knowing about it is helpful for building more successful websites:

Increased organic traffic: Websites that rank higher in search engine results are more likely to receive organic traffic from users searching for relevant information, products, or services. SEO helps improve a website’s visibility in search results, leading to more visitors.

Credibility and trust: Websites that appear at the top of search results are often perceived as more credible and trustworthy by users. A strong SEO strategy can enhance your website’s authority and reputation in your industry or niche.

Better user experience: SEO involves optimizing website structure, navigation, and content to make it more user-friendly. A well-structured and user-friendly website can result in higher engagement, longer time spent on the site, and lower bounce rates.

Targeted traffic: SEO allows you to target specific keywords and phrases relevant to your business or content. This means that the traffic you attract through SEO is more likely to be interested in what your website offers, leading to higher conversion rates.

Cost-effectiveness: Organic search traffic generated through SEO is free, unlike paid advertising. While SEO requires an investment of time and resources, it can provide long-term benefits and a sustainable source of traffic without ongoing advertising costs.

Competitive advantage: Knowing how to optimize your website for search engines can give you an edge over competitors who may not be as knowledgeable about SEO. A well-executed SEO strategy can help you outrank and outperform competing websites.

Analytics and data insights: SEO tools and techniques provide valuable data and insights about your website’s performance, user behavior, and keyword trends. This data can inform your content strategy, marketing efforts, and website improvements.

Adaptation to algorithm changes: Search engines frequently update their algorithms, affecting how websites rank in search results. Staying informed about SEO best practices allows you to adapt to these changes and maintain your website’s visibility.

Local optimization: For businesses with physical locations or a local customer base, local SEO can help improve visibility in local search results. This is crucial for attracting customers within your geographic area.

Long-term sustainability: While SEO results may take time to achieve, the benefits can be long-lasting. A well-optimized website can continue to rank well and attract organic traffic for months or even years, making it a valuable long-term investment.

Knowing about SEO is helpful for building more successful websites because it can significantly impact a website’s visibility, credibility, user experience, and traffic. By implementing effective SEO strategies and staying updated with best practices, website owners can attract more targeted visitors, achieve better rankings in search results, and ultimately achieve their online goals more effectively.

What is SEO? (Search Engine Optimization)
https://searchengineland.com/guide/what-is-seo

SEO Periodic Table – This is AMAZING:
https://cl.ly/84098a7c337c

SEO Tips:
https://neilpatel.com/blog/10-most-important-seo-tips-you-need-to-know/
https://www.searchenginejournal.com/seo-tips/374673/#close

How to create a Sitemap:
https://www.quicksprout.com/creating-website-sitemap/

WordPress Plugin: Yoast SEO:
https://yoast.com/wordpress/plugins/seo/

LEARNING ABOUT DOMAIN NAMES

Domain names provide a user-friendly way to access websites and online resources. They serve as easily memorable addresses, making it more convenient for people to navigate the internet without needing to remember complex IP addresses. Domain names also help in branding, as they allow businesses and individuals to establish a unique online identity.

-What is a domain & how it works
-How do you find a domain name
-Domain extensions
-Short domains
-What does it cost, where to purchase
-How to renew
-Selling & Sitting on Domains
-Holding Domains Hostage
-Looking up domain name information
-Private registrations
-DNS Records, A Record, MX Record, vs Name Servers
-How to set up, Registrar side and Web Host site

https://www.godaddy.com/
https://domainr.com/
https://network-tools.com/
http://iamtheproudownerofthelongestlongestlongestdomainnameinthisworld.com/

Pointing a Domain Name:
https://www.youtube.com/watch?v=PdWFw1cmwhg
https://dyn.com/blog/dyn-tech-everything-you-ever-wanted-to-know-about-ttls/
https://cloudbric.zendesk.com/hc/en-us/articles/206272533-What-differences-are-there-between-changing-a-name-server-and-an-A-record-CNAME-

LEARNING ABOUT FTP

FTP (File Transfer Protocol) enables the efficient and secure transfer of files between computers over the internet. It simplifies the process of sharing and managing files, making it a valuable tool for businesses, web developers, and individuals. FTP is particularly useful for uploading website files, sharing large documents, and backing up data, as it offers a reliable way to move files between computers and servers.

https://www.wired.com/2010/02/ftp_for_beginners/

Okay, so what is FTP in English?
FTP allows you to take your desktop HTML files, and actually drag and drop them right onto the internet for anyone to see! You actually drag them into your web hosting account! It is extremely simple:)

Understanding Folder Structures in our Web Host:
https://community.reclaimhosting.com/t/understanding-folder-structures-in-cpanel/295

application_backups – Any locally stored backups from Installation will be stored here.
logs – An archive of Apache access logs for your domain.
mail – You guessed it, email to local email accounts on your domain is stored here.
public_ftp – This folder is not often used except for instances where you need a space to allow FTP users to upload files that aren’t immediately public.
public_html – This is where the magic happens. This folder is the main folder for your domain that is accessible to the web. Files uploaded to this folder will be visible on your main cPanel domain.
tmp – Temporary uploads and statistics information is stored here.

Inside the public_html folder, every website you create will be organized into a new folder. You can manually create a new folder for each site, you can drag & drop a new folder via FTP, and you can also use the WordPress install tool to create the new folder automatically as well. In general, each website will be in a new folder, just remember that!

You main primary domain name will be tied to the main public_html folder, and display any index.html file in this folder.
For Example: http://yourdomain.sg-host.com

However I do not have an index.html file in here, or any website. Instead, I have multiple websites in multiple folders here. So then you can add each folder name to the end of your primary domain name to access that folder.
For Example: http://yourdomain.sg-host.com/test123/

It does not matter if the folder is a HTML website, a WordPress website, etc, they are all just folders & files. As long as there is an index.html file, it will display the website.

You could then technically add your own domain name to each of these separate websites, however this in general are how multiple websites are organized on the web host.

HTML TEMPLATES

An HTML website template is a pre-designed and pre-coded web page or set of web pages that serve as a starting point for creating a website. These templates contain the basic structure, layout, and often include CSS styles and sometimes JavaScript functionality, making it easier for web developers to build a website by customizing and adding content without starting from scratch. This speeds up the web development process and ensures a consistent design across a website.

For Example:
https://templated.co

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/

WORDPRESS THEMES

General Information & Basics:
https://www.wpbeginner.com/beginners-guide/how-to-install-a-wordpress-theme/

1. How many themes can I use in WordPress?
   You can only use one theme at a time. However, you can install as many themes as you like. Not all installed themes on your WordPress website are active. As soon as you activate a WordPress theme, it automatically deactivates your previous active theme and makes the new theme your active theme.
2. What is a child theme in WordPress?
   A child theme in WordPress is a sub-theme that inherits all the functionality, features, and style of its parent theme. You will need to install both parent and child themes on your website and activate the child theme. For more details, see our guide on how to create a child theme in WordPress and how to install a child theme in WordPress.
3. What is a WordPress theme framework?
   Theme frameworks are highly optimized WordPress themes designed to be used as parent theme. Intended for advanced users and developers, these theme frameworks contain several code and speed optimizations that help other developers quickly build upon them. Genesis by StudioPress is the best example of a WordPress theme framework. For more information, see our article on WordPress theme frameworks.
4. Premium vs Free themes – Which one I should use?
   If you are just starting out on a limited budget, then we recommend getting started with a flexible free theme. See our pick of the best free WordPress themes for blogs and best free themes for business websites. If you can spend a little more, then choose a premium theme. These themes come with priority support which comes in handy particularly for beginners. For more on this topic, see our guide on free vs premium WordPress themes.
5. How do I choose the best theme for my website?
   There are so many WordPress themes out there and most of them are designed by professionals so they look really great. This makes it a bit confusing for beginners to choose the perfect theme for their website. We recommend keeping it simple. Choose a minimalist design that comes close to what you have in your mind. Make sure that the theme looks great on mobile and run a website speed test on the demo site. See our beginner’s guide on how to choose the perfect WordPress theme for your website.
6. Can I use the same theme I have seen on another WordPress site?
   If it is not a custom WordPress theme that is specific for that site and not intented for selling, then yes you can typically find and use the same theme on your own website.
7. What about Custom CSS? Are themes even necessary?
   This is a great question with the direction of WordPress, drag & drop builders, and especially with CSS… Technically with enough CSS skills, you can create nearly any type of look & feel/theme just by applying your own CSS to a basic theme… This is a whole different approach to WordPress website development, and may even give you more control over what you want to create…

How to Install – and Set Up – a New WordPress Theme:
https://winningwp.com/how-to-install-and-set-up-a-new-wordpress-theme/

20+ Important Things To Do After Installing WordPress:
https://artisanthemes.io/20-important-things-after-installing-wordpress/

UPDATING WORDPRESS

Regularly updating WordPress, themes, and plugins is essential for maintaining a secure, stable, and functional website. However, it’s also important to consider when to update, as immediate updates may sometimes introduce issues. Here’s a list of reasons to update regularly and considerations for when to update:

Reasons to Update Regularly:

Security Enhancements: Updates often include security patches that address vulnerabilities and protect your site from potential attacks. Running outdated software increases the risk of security breaches.

Bug Fixes: Updates fix software bugs and issues that may affect the performance and functionality of your website. Regular updates help ensure a smooth user experience.

New Features: Updates may introduce new features, improvements, and functionalities, enhancing the capabilities of your website and offering a better user experience.

Optimization: Updates can improve the speed and efficiency of your website, leading to better overall performance.

Compatibility: Updates often ensure compatibility with the latest versions of WordPress and other related software. Staying up to date prevents conflicts between different components.

Support: If you encounter issues with your website, having an updated system can make it easier to receive support from theme and plugin developers.

SEO and Ranking: Search engines favor websites with updated and well-maintained software, potentially boosting your SEO rankings.

Considerations for When to Update:

Test Environment: Before updating on your live site, consider setting up a test environment to check for any compatibility issues or conflicts that updates may introduce.

Compatibility: Ensure that your existing themes and plugins are compatible with the latest updates. Sometimes, third-party themes and plugins may need updates themselves to remain compatible.

Plugin Reputation: Be cautious of updating third-party plugins from untrusted sources. Stick with well-established plugins with a good track record of updates and support.

Backups: Always make complete backups of your website before performing any updates. In case something goes wrong, you can easily revert to a stable version.

Wait for Reviews: Consider waiting a short period after an update’s release to allow others to test it. Check reviews and forums to ensure there are no major issues.

Mission-Critical Sites: For websites where uptime is critical, such as e-commerce sites, waiting for reviews and thorough testing is advisable to avoid downtime or issues impacting sales.

Customization: If your site relies heavily on custom code or modifications, updates may affect this code. Consult with your developer or test the updates carefully in a staging environment.

In summary, regular updates are crucial for the security and performance of your website. However, the timing of updates should be approached with caution, especially for mission-critical sites or sites with extensive customization. Always balance the benefits of new features and security improvements with the potential risks and consider best practices for updating WordPress, themes, and plugins.

DRAG & DROP VISUAL BUILDERS: ELEMENTOR

Pros of Using a Drag-and-Drop WordPress Website Builder:

Ease of Use: Drag-and-drop builders make it simple for beginners to create and design websites without coding knowledge.

Speed: You can build websites quickly, reducing the time it takes to launch a site.

Customization: They offer extensive design and customization options, allowing you to create unique layouts and styles.

Cost-Effective: Many drag-and-drop builders have free versions, reducing the need for expensive web design services.

Templates: Pre-designed templates provide a starting point for various types of websites.

Responsive Design: Most builders facilitate responsive design, ensuring your site looks good on all devices.

Third-Party Integration: Integration with other plugins and tools is typically straightforward.

No Coding Required: You don’t need to be a developer to build a professional-looking website.

Cons of Using a Drag-and-Drop WordPress Website Builder:

Limited Control: While versatile, builders may not offer the same level of customization as hand-coding.

Performance: Excessive use of builder elements can negatively impact page load times and performance.

Learning Curve: While easier than coding, builders still have a learning curve, and advanced features may require time to master.

Lock-In: Your website’s structure and content are often tied to the specific builder you use, making it challenging to switch later.

Compatibility: Compatibility issues can arise when using builders with other themes or plugins.

Bloat: Builders can sometimes lead to code bloat, potentially affecting site performance.

Cost (for Premium Versions): While there are free versions, premium features may require a subscription or one-time payment.

Alternative Drag-and-Drop WordPress Website Builders to Elementor:

Beaver Builder: Known for its simplicity and clean code, Beaver Builder offers a user-friendly experience.

Divi: Divi by Elegant Themes is a popular builder with a visual interface and a wide range of modules.

Visual Composer: Visual Composer is a feature-rich builder with a unique “tree” view for page editing.

SiteOrigin Page Builder: SiteOrigin Page Builder is known for its widget-based approach and is a good choice for developers.

Brizy: Brizy is a newer builder with a focus on user-friendliness and an intuitive interface.

Thrive Architect: Thrive Architect is designed for conversion-focused websites and offers a set of elements for marketing purposes.

WPBakery Page Builder: WPBakery Page Builder (formerly Visual Composer) is widely used and offers both back-end and front-end editing options.

Oxygen: Oxygen is a builder focused on complete design freedom and is popular among developers for its flexibility.

When choosing a drag-and-drop builder, consider your specific needs, including your skill level, the type of website you’re creating, and your long-term plans for your website. Each builder has its own strengths and weaknesses, and the best choice depends on your individual requirements.

WORDPRESS PLUGINS & SHORTCODES

Shortcodes: A WordPress shortcode is a small piece of code enclosed in square brackets, such as [shortcode], that allows you to embed dynamic content or functionality into your WordPress posts, pages, or widgets. Shortcodes are a convenient way to add complex features or elements to your website without needing to write custom code.

WordPress provides some built-in shortcodes for common tasks like embedding videos, creating galleries, or adding contact forms. Additionally, many plugins and themes also include their own custom shortcodes to extend the functionality of your website.

For example, if you’re using a contact form plugin, it might provide a shortcode like [contact_form] that you can place on a page to display a contact form. When you publish the page, WordPress will replace the shortcode with the corresponding functionality or content generated by the plugin.

Shortcodes are user-friendly and make it easy to incorporate various elements and functionality into your WordPress site, even if you don’t have extensive coding knowledge.

Introduction to WordPress Plugins, Shortcodes, and Galleries & Contact Forms:
Notes Link: https://www.inmotionhosting.com/support/edu/wordpress/318-adding-a-form-using-contact-form-a-in-wordpress/

WORDPRESS CSS

Knowing how to add custom CSS to a WordPress website is important for several reasons:

Customization: WordPress themes provide a certain degree of customization, but to achieve a unique and personalized look for your website, you often need to modify its appearance using CSS. Custom CSS allows you to change fonts, colors, layouts, and other styling aspects to match your brand or design preferences.

Responsive Design: CSS is crucial for creating responsive designs that adapt to different screen sizes and devices. You can use CSS media queries to adjust your website’s layout and styling for mobile, tablet, and desktop users.

Fixing Issues: Sometimes, WordPress themes or plugins may not perfectly align with your vision or may introduce styling conflicts. Custom CSS can help you fix layout issues, adjust spacing, or override default styles to make your website look and function as intended.

Accessibility: Custom CSS can be used to improve the accessibility of your website. You can adjust text sizes, contrast, and other design elements to ensure that your site is usable by individuals with disabilities.

Branding: To create a cohesive online presence, you may want to incorporate your brand’s colors, typography, and visual elements into your website. Custom CSS allows you to align your website’s design with your brand identity.

Performance: While this isn’t the primary purpose of CSS, efficient CSS coding can help improve your website’s loading speed. By minimizing redundant code and optimizing styles, you can enhance performance.

Troubleshooting: When issues arise on your website, having a basic understanding of CSS can be invaluable for troubleshooting. You can inspect elements, identify problematic styles, and make quick adjustments as needed.

Future-Proofing: As your website evolves, you may want to make design changes or add new features. Knowing how to work with CSS gives you the flexibility to make these updates without relying solely on theme or plugin developers.

Learning and Control: Learning CSS is an essential skill for anyone working with web design and development. It empowers you with greater control over your website’s appearance and functionality.

In summary, adding custom CSS to a WordPress website is essential for achieving a unique and tailored design, resolving styling issues, ensuring accessibility, and maintaining control over your site’s appearance and behavior. While you don’t need to be an expert in CSS, having a basic understanding of it can greatly enhance your ability to create and maintain an effective WordPress website.

Using HTML Inspector & Adding CSS Style Code into WordPress:
Notes Link: https://www.hostinger.com/tutorials/wordpress-custom-css

INTRODUCTION TO CSS

Notes Link: https://www.w3schools.com/css/css_intro.asp
Notes Link: https://html.com/css/

What is CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
External stylesheets are stored in CSS files.

Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

For Example, click the link below, look to the right, and click on a different design… It’s the exact same HTML with different CSS!
http://www.csszengarden.com/001/

CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files. With an external stylesheet file, you can change the look of an entire website by changing just one file!

CSS Demo – One HTML Page – Multiple Styles!
Click this link below, look at the CSS Demo, and click on Stylesheet 1, Stylesheet2, etc… This will give us all a very good visual of what CSS actually can do.
https://www.w3schools.com/css/css_intro.asp

MOVING FORWARD, PLEASE PAY ATTENTION & STUDY/REMEMBER THIS EXACT CSS CODE FORMAT

p {
color:red;
}

-The first portion says to take ALL p tags, and apply a Style to them…
-The brackets then contain all the styles that you want to apply.
-Then within those brackets you can start assigning any CSS styles you’d like… color:red; will make all p paragraph tags red!

h1 {
color:red;
font-size:100px;
}

The CSS code above make all H1 tags red and 100px!

STUDY & REMEMBER THIS FORMAT ABOVE AND YOU WILL BE A CSS PRO!

Basics of HTML Code

Using Inspector & Exploring Code on HTC’s Website:
https://hennepintech.edu/

Notes Link: https://html.com
Editor Link: https://codepen.io/ (Create Free Account)

Basic HTML Page Structure: https://codepen.io/dustingrice/pen/podJzgq
(Click FORK to create your own duplicated CodePen)

Empty HTML Page Template:
https://codepen.io/dustingrice/pen/YzEXKZV

W3Schools:
https://www.w3schools.com/html/

How to add images into HTML:
https://www.w3schools.com/html/html_images.asp

How to add links into HTML:
https://www.w3schools.com/html/html_links.asp

Placeholder Images:
https://placeholder.com/
https://via.placeholder.com/500×120?text=Hennepin%20Tech

HTML Cheat Sheet:
https://share.getcloudapp.com/z8urlx5d

HTML Infographics:
https://share.getcloudapp.com/8Lu5gjgY
https://share.getcloudapp.com/Z4ujmLnx
https://share.getcloudapp.com/RBuLBvrL

AI Coding Tools:
https://chatgpt.com/

THIS WEEK’S LESSON: LEARNING ABOUT THE WEB!

Basic Website Vocabulary & Average Salaries:
Follow Along Link: https://share.getcloudapp.com/nOukXjwO (Click to Zoom)

Basics of Website Building Tools:
Follow Along Link: https://share.getcloudapp.com/Z4ukAgJe (Click to Zoom)

*WordPress is used by 63.1% of all websites that use a content management system. This is 43.1% of all websites via w3techs.com.
https://w3techs.com/technologies/details/cm-wordpress

INTRODUCTION TO WEB HOSTING

-Setting Up our own Web Hosting Environment
-Setting Up our own WordPress Website on our own Web Host

First of all… What is a Web Host?
In very basic terms, Web Hosting is a server/computer that you can pay monthly to store your website files on, so that it can be accessed by everyone on the internet 24/7. Without a Web Host, your website will not be online for anyone to access.

Turn Key Websites vs Our Own Web Host
Turn Key Websites Websites such as Square Space, Shopify, etc typically include this Web Hosting as part of the entire website plan that you are paying monthly for, and you typically pay per website. However, if we pay monthly for our own Web Host from a Web Hosting Provider, in many cases we can now host unlimited websites for no extra cost. We also learned earlier that the Free version of WordPress.com we used earlier in this class is very limited by not giving us access to plugins and adding extra functionality to your website unless we start paying to unlock it… This is how WordPress offers their own way of paid accounts and web hosting, by charging you to use plugins. However, this is where the power of having our own shared web host is often the way to go, where we can now create unlimited websites for the same cost… Today we will be setting up our very first shared web hosting account, and create our own free unrestricted version of WordPress where we can now use plugins to add so much more website functionality!

Web Hosting Packages/Options
Web Hosts offer various packages depending on how large of website(s) you have, the amount of total traffic you have (measured as bandwidth), and how powerful the server is that you are hosting it on. You can pay for your own dedicated server that only your website(s) will then use which can costs hundreds of dollars per month, however you can also use what is called shared web hosting which is often more common, where your web hosting account is technically sharing with other web hosting accounts, and you are essentially sharing the costs of a server/computer, such as only $10/month. Depending on your project, website, or client requirements, you as the web developer will need to make the best decision to move forward with, and in most cases event for clients, shared web hosting is very common.
Visual Example: https://share.getcloudapp.com/v1uxoPAq

Ongoing Costs Moving Forward
We no longer have the cost of a book in this class, and so as web developers, one of the most important tools we could have is our own web host. If we continue down this path of web, this is a necessity. You can typically find web hosts for around the $10/month range (you can find cheaper however you get what you pay for typically applies here).

CHOOSING A WEB HOST

If you do already have your own web host, and you can install WordPress, feel free to continue using your own web host. Please just let me know what type of environment you do have to work with. You just want to make sure that whatever you do have for web hosting, you can have unlimited websites. After reviewing new web hosts annually, this is by far the best deal we have come across lately, you can pay for an entire year for under $40 last time we checked:

Explore Hostinger Premium Shared Hosting Plan for ONLY $2.99/mo *NEW & RECOMMENDED*
https://www.hostinger.com/web-hosting

FREE WEB HOSTING TRIAL

We did however, also find a web host that will actually give students a FREE 3 month trial as well… This company is called Site Ground and you must use your HTC email address when signing up. You can change this later however for now you do need our .edu email address to sign up. After the trial, you would then need to start paying for the service, figure roughly $10-15/month to continue hosting all of your websites, possibly even websites for family, friends, and even clients that are paying you… Having your own web host opens up an extremely large door of possibilities… After our class is over, and you decide that web is not for you, you can always save all of your websites to your desktop and cancel your web hosting plan. Use the link below to access this free 3 month trial program with Site Ground:

However, the actual savings is extremely minimal if you do plan to continue exploring building websites in the future… This will give you 3 free months of a trial, however then you will be paying a full rate of $14.95/month (Last time I checked) versus just starting a plan for only $4.95/month ish from the start, plus you will need to move all of your websites etc it really is more of a hassle to use the free trial, however here are the details below if you’d like to try it out. Otherwise, all you will want to do is look for a hosting plan that will allow you to have multiple websites, and not just one website. Usually this is the not the cheapest plan, but the next plan up…

How To Set Up Student Web Host Free Trial:
Sign Up Link: https://www.siteground.com/studentsprogram

YOU NEED TO USE your @hennepintech.edu EMAIL ADDRESS… They require this when signing up on their site… You can use your [email protected] however last I recall you do not need to confirm your email address, and then later on I recall students even changing their email address in their account… So just use anything @hennepintech.edu for now and that should get us into our accounts.

WRITE DOWN your password! Once you get all set up, you will be assigned a login to your Web Hosting Control Panel. PLEASE SAVE THIS LOGIN PAGE ADDRESS/URL, USERNAME, AND PASSWORD IN A SAFE PLACE. These will be the admin keys to all of your websites now moving forward.

You will be assigned a Primary Domain Name/Website Address. PLEASE SAVE THIS ADDRESS/URL AS WELL. This is the main website address that you will use to access all of your websites online moving forward. You can also pay for and add specific domain names to each of your websites down the road as well, versus using your primary domain name.

AFTER YOU ARE SET UP AND LOGGED INTO YOUR WEB HOST

After you get into your Control Panel, we will Install our very first WordPress Website which is completely unrestricted from any limits, and completely free, now that we have our very own web host. At this point feel free to always keep working ahead & expanding your knowledge, building as many websites as you’d like, exploring more about your web host, etc.

Basics of Building a Simple WordPress Page with WordPress Block Editor
Notes Link: https://share.getcloudapp.com/5zuGbRpm

Understanding WordPress Theme Customizer, Theme Widgets, Changing Themes, & Simple Contact Forms
Notes Link: https://share.getcloudapp.com/6quewA7g

Keeping track of our logins & passwords… I’ll be checking in with everyone to see how you are planning to do this!