Class

Class Notes

5/19/2021

What Is WiFi?

First, let's cover some of the basics. WiFi stands for Wireless Fidelity and is the same thing as saying WLAN which stands for "Wireless Local Area Network."

WiFi works off of the same principal as other wireless devices - it uses radio frequencies to send signals between devices. The radio frequencies are completely different say from walky talkies, car radios, cell phones, and weather radios. For example your car stereo receives frequencies in Kilohertz and Megahertz range (AM and FM stations), and WiFi transmits and receives data in the Gigahertz range.

To break it down even further, Hertz (Hz) is simply a unit of frequency. Let's say you're standing on a pier watching waves come in. As you look down at the waves you can see the crest of each wave roll on by. If you counted how many seconds between each wave crest this would be the frequency of the waves. So if the time between each crest was 1 second that would meant the wave frequency was 1 hertz or one cycle per second.

Comparing sea waves to Mhz and Ghz, these waves are moving at 1 million and 1 billion cycles per second in the air! And to receive the information found in these waves, your radio receiver needs to be set to receive waves of a certain frequency.

For WiFi this frequency happens to be 2.4Ghz and 5Ghz. These waves are very similar to the frequency found in your microwave! Your microwave uses 2.450Ghz to heat up food and your router uses 2.412 GHz to 2.472 GHz to transmit your data over WiFi. This is why some people with old or faulty microwaves experience a problem with their WiFi signal when they try to make popcorn.

Just to clear up a popular misconception: These microwaves are non-ionizing radiation. That means that they do not cause cancer. That’s right kids, microwaves will not make you radioactive and glow in the dark!

How does WiFi send data?

When you access the Internet on your device, it converts the information you’ve requested into binary code, the language of computers. Everything computers do is based in binary code, a series of 1s and 0s. When you click on this article, your request is translated into a bunch of 1s and 0s. If you’re using Wi-Fi, these 1s and 0s are translated into wave frequencies by the Wi-Fi chip embedded in your device. The frequencies travel across the radio channels mentioned earlier and are received by the Wi-Fi router that your device is connected to. The router then converts the frequencies back into binary code and translates the code into the Internet traffic that you requested, and the router receives that data through a hardwired Internet cable. The process repeats itself until you have loaded this article—or anything that requires the Internet. All of this happens at an unbelievably fast rate; most routers operate at 54 Mbps (megabits per second), meaning that when such routers translate and transmit binary data, 54 million 1s and 0s are taken in or sent out in a single second.

https://www.youtube.com/watch?v=xmabFJUKMdg

Routers: A router is a networking device that forwards data packets between computer networks. Routers perform the traffic directing functions on the Internet. Data sent through the internet, such as a web page or email, is in the form of data packets.

5/12/2021

Virtual Meetings (Zoom, Google Hangouts, Skype)

Videotelephony comprises the technologies for the reception and transmission of audio-video signals by users in different locations, for communication between people in real time.

After the pandemic, knowing how to host or participate in a virtual meeting is common place.

Areas of use:

Personal
Business
School

Various Types:

1. Teleconferencing

A teleconference is a call with various participants dialing into a common conference call bridge using an assigned passcode to enter the call. It is an audio-only meeting between geographically separated individuals. Conference calls are ideal for small group meetings, large groups in various locations, and international callers.

PROS:
The call can be recorded and stored digitally.
Saves on travel and people can participate from anywhere in the world.
Can be recorded for documentation purposes.
CONS:
This type of conferencing won’t allow you to read body language and there is no eye contact.
It won’t allow participants to use visual presentation.
They are less dynamic.
Participants may be in different timezones.

Most conference calls will be done with a VOIP phone system. AKA this thing:

A VoIP phone (Voice over IP) or IP phone uses voice over IP technologies for placing and transmitting telephone calls over an IP network, such as the Internet, instead of the traditional public switched telephone network.

Once you get a job with on of these, get very familiar with it. Read the use manual for how to transfer calls, start a conference call, set up your voicemail, clock out of the call or phone que, ect…

On that note: when you get any job: ask questions and be honest. You will be trained on a lot of stuff (hopefully), during the training don’t act like you understand something when you don’t.

2. Video Conferencing

While teleconferencing relies only on the use of audio, video conferencing makes use of both audio and visual means such as webcams. This technology allows users in different locations to hold meetings without having to be in a single place. Mobile phones are also able to attend via this method as well.

PROS:
You can see the host or participants visually adding another level of personalization.
No need for participants to travel to attend a meeting.
Can be recorded for documentation purposes.
CONS:
Bandwidth plays a big role in the quality of video streaming capabilities
Technical problems may arise causing some participants to have trouble joining.
Participants may be in different timezones.

Examples:

Zoom

Skype

3. Web Conferencing

This is an online service by which you can hold live meetings, presentations, and conferences through the internet. Users can hold a web conference via desktop, smartphones or tablets. It allows individuals to collaborate online, sharing documents or screens. One of its advantages is desktop and application sharing. Web conferencing makes it possible to use slides, videos, or other visual materials for a more efficient meeting. It provides an opportunity for collaborative work regardless of the participants’ location. However, web conferencing is often mistaken to be the same as a webinar. “Webinar” is a combined term that came from the words web and seminar. It is actually a type of web conference wherein the main focus is to educate. This means that while web conferencing is a two-way communication where ideas are shared and exchanged among individuals, and are used for ad-hoc meetings and are used for ad-hoc meetings “webinars” are usually restricted as one-way communication and provides a registration process.

PROS:
This type of conferencing allows the participants to share files including slides and video, increasing engagement.
Allows for collaboration and can increase job efficiency.
Can be recorded for documentation purposes.
CONS:
Technical issues may cause a delay in response.
Depending on the speed of both your and the participant’s internet, web conferencing can greatly reduce the visibility and function of shared desktops and applications.
Participants may be in different timezones.

Examples:

Zoom

Google Hangouts

Whereby

Slack

Note: An essential feature of your whatever company you choose, is shareability. The ideal scenario is for you to be able to send a link to anyone to go to a meeting without signing into an account or anything.

IRC’s (Slack)

Internet Relay Chat (IRC) stands for Internet Relay Chat. IRC is a multi-user, multi-channel chat system that is run on a Network. Like the telephone, the Internet allows people to communicate with each other from any place in the world at the same time.

IRC is mainly designed for group communication in discussion forums, called channels, but also allows one-on-one communication via private messages as well as chat and data transfer, including file sharing. Client software is available for every major operating system that supports Internet access.

The faster and more organized version of email!

5/11/2021

Virtual Meetings (Zoom, Google Hangouts, Skype)

Videotelephony comprises the technologies for the reception and transmission of audio-video signals by users in different locations, for communication between people in real time.

After the pandemic, knowing how to host or participate in a virtual meeting is common place.

Areas of use:

Personal
Business
School

Various Types:

1. Teleconferencing

PROS:
The call can be recorded and stored digitally.
Saves on travel and people can participate from anywhere in the world.
Can be recorded for documentation purposes.
CONS:
This type of conferencing won’t allow you to read body language and there is no eye contact.
It won’t allow participants to use visual presentation.
They are less dynamic.
Participants may be in different timezones.

Most conference calls will be done with a VOIP phone system. AKA this thing:

On that note: when you get any job: ask questions and be honest. You will be trained on a lot of stuff (hopefully), during the training don’t act like you understand something when you don’t.

2. Video Conferencing

PROS:
You can see the host or participants visually adding another level of personalization.
No need for participants to travel to attend a meeting.
Can be recorded for documentation purposes.
CONS:
Bandwidth plays a big role in the quality of video streaming capabilities
Technical problems may arise causing some participants to have trouble joining.
Participants may be in different timezones.

Examples:

Zoom

Skype

3. Web Conferencing

PROS:
This type of conferencing allows the participants to share files including slides and video, increasing engagement.
Allows for collaboration and can increase job efficiency.
Can be recorded for documentation purposes.
CONS:
Technical issues may cause a delay in response.
Depending on the speed of both your and the participant’s internet, web conferencing can greatly reduce the visibility and function of shared desktops and applications.
Participants may be in different timezones.

Examples:

Zoom

Google Hangouts

Whereby

Slack

IRC’s (Slack)

The faster and more organized version of email!

5/10/2021

Biography Group Powerpoint Project

Group 1: Sage, Colton, Hanna, Faith

Biography on Mark Zuccurberg.

Group 2: Jessica, Maxwell, Albert, Mikayla

Biography on Elon Musk.

Group 3: Braxton, Emma, Gabe, Genevieve

Biography on Steve Jobs.

Due: 5/18/21

Presentation Time Limit: between 3 min. and 10min.

Presentation Slide Limit: between 10----

Presentation Medium: Google Slides (feel free to create photos in Canva and upload those to Google Slides)

Content Requirements: personal background, professional achievements, and social impact.

Establish / introduce classmates
Get contact info
1. Maybe make a google doc with all contact info or just start a group email or text
Assign tasks
1. In the google doc with contact info or just on the message group, assign certain tasks of the project to different classmates
2. Try and match people with tasks that they seem naturally inclined towards
  1. The person who hates research, have them do the talking or vice-versa.
Check in frequently to see progress

Communication is KEY!!!

4/19/2021

Pointing Domain to Website Review

Remember that a domain has to be pointing to a site for it to be live.

You can point domains in your DNS settings with the:

Nameservers:

This will point all access to change and edit domain to whatever server or registrar it’s pointed to. It doesn’t point the domain itself.

You can make subdomains, a records, ect... wherever it’s pointed

ns-380.awsdns-47.com

- Ns-1076.awsdns-06.org
- Be very sure before changing these. They could mess up any emails associated with the domain too.

- A Record:

Using an IP address of where the website is hosted, it connects your domain name to your IP address. Makes it human readable.

- - This is the common way to point your domain.

CNAME Record:

can be used to alias (www.) one name to another.

- - - An A record for example.com pointing to the server IP address
    - A CNAME record for www.example.com pointing to example.com
  - If the IP address changes, you only need to update it in one place: just edit the A record for example.com, and www.example.com automatically inherits the changes.
- MX Record:

specifies the mail server responsible for accepting email messages on behalf of a domain name.

Site Traffic Data Collection

This is a very important part of SEO. You need to data to know where you are in rankings and conversion before you can grow.

The most important tools Google offers you website is understanding data. They are free to anyone with a google account and/or gmail account.

Types of data collection:

Analytics
Heatmaps
Eye tracking
Ask people for feedback

4/15/2021

4/15/21

Migrating your Data Base

Remember that hosting is renting space on a server.

Data bases are built with SQL coding language.

SQL is a domain-specific language used in programming and designed for managing data held in a relational database management system, or for stream processing in a relational data stream management system

But managing your databases is similar to managing your files. You use a program.

Usually you are using phpMyAdmin. It organizes your databases and allows you to see all your tables.

Exporting your database is much easier than files. It’s like downloading anything to your computer than you upload it to your new hostings phpMyAdmin.

Export

Connect to your database using phpMyAdmin.
From the left-side, select your database.
Click the Export tab at the top of the panel.
Select the Custom option.
You can select the file format for your database. In this example, we will use the default SQL option.
Click Select All in the Export box to choose to export all tables.
At this stage make note of the WordPress prefix. It will be needed when you are adding the database to your new WordPress Hosting service. In this example it is wp_.
Select the check box, Add DROP TABLE / VIEW / PROCEDURE / FUNCTION.
If you wish to change the name of your backup database, you can do so in the File name template section .
Click Go.
This will export your database content in the form of an .sql file to your local computer.

Import

CAUTION:

If you import a backup file to a database that already has content, it will replace the existing content.

If you are planning to import to a brand new database, you will want to ensure that the database is created first. If you require a refresher on how to accomplish this, please view the following: How do I create a database?
On the left-side, select your database.
Click on Import from the top set of tabs.
Click on the Browse button next to "Location of the text file."
Browse to your local database file and click Open.
- If it is a zipped file, please unzip the file first.
Click the Go button at the bottom. Wait while your database imports. Depending on the size, this can take a few minutes.
Once completed, you should get a success message similar to the following.

Connecting your Files to your DB

Wp-config in your files

If you have a WordPress site, you may need to update the the table prefix. This is done by editing the wp-config file that exists in your site root. You will need to look for a line that looks similar to the following and modify it.

$table_prefix = 'wp_xxxxxxxxxxxx_';

You will need to replace the existing table prefix in the wp-config.php file with the one from your previous host. For example, if your tables looks similar to the following: wp_ary2vyj2rw_options then you will want to update your tables to:

$table_prefix = 'wp_ary2vyj2rw_';

Once the content is uploaded, the database is imported, and the database table prefix in the wp-conf file is updated, your site should be migrated.

What if you don’t want to migrate an ugly site to your new host?

Make a new website from scratch at your new host!

You can so this by creating a staging website like staging.domain.com

What is that called? A subdomain. When you add text in front of your domain name.

4/14/2021

Migrating your site to your hosting

Remember that hosting is renting space on a server.

Automatic

Ask your new hosting provider to do it. On their website you can find a chat box or email their help address.

Semi-Automatic

Help articles on how to migrate. SiteGround

Manually

A website is made of files and data base.

You need to migrate both to move your site.

Files

Remember that they hold the text files with code and are separated in a hierarchy.

Here is WP’s hierarchy:

You need to somehow get these downloaded, log into your new hosting account, and upload them there.

These are huge files so the best way to do it is with a client using FTP.

A client is a piece of computer hardware or software that accesses a service made available by a server as part of the client–server model of computer networks. I usually use FileZilla.

They allow you to login to your hosts server and download things quickly to your computer.

FTP is a file transfer protocol used for transferring files between servers - your website and your computer, for example. For better management you can create different FTP accounts for different users and roles within your organization.

So you need to create an FTP account with your host and then use the login info to connect the client to the server.

Hostname (your domain or server number)

Username

Password

Port

Here’s what FileZilla looks like:

You can drag files from the right in the server to your computer on the left.

When you are done, connect the client to your new host/server and upload them there. (you will need an ftp account with the new host to do this)

NOTE: after you transfer this your site isn’t live. It needs a domain first.

4/7/2021

Quiz this Thursday!

How to transfer your domain

You will not have to do this to get your site up and running!

Remember you can have your domain and your hosting in two separate places.

You just need to point the domain with DNS settings such as nameservers and a records and more.

When you want to transfer your domain’s registration to one company to another:

Before you initiate the transfer:

Take a deep breath (it’s a sometimes frustrating job)
Open your email
Find a help article from the current and new registrar
1. They should have one to walk you through the process
@whois.com Double check where the domain is registered
@current Registrar Double check when the domain was last transferred or registered
1. You can’t do either until 60 days afterward. Brought to you by our good friends at ICANN.
@current Registrar Double check the email registered with the domain
1. You will need access to that email to transfer
@current Registrar Unlock your domain
@current Registrar turn off domain security
@current Registrar Request EPP code (the code that the registrar uses to confirm the transfer)
@new Registrar Request transfer
1. Usually just start a new site, press “already have domain”, and it will ask for your epp code and let you initiate the transfer.
Check your email! You will get a timed email with a link that will take you to an approval page
1. You need to confirm the contact info associated with the domain
2. You may get another email asking if the transfer is from you

Note: if you initiate the transfer and it doesn’t

How not to permanently lose your domain:

RULE #1:Always Register A Domain In Your Own Name or that of Your Organization.

RULE #2:Never use an email address in your domain registrations that are outside of your direct control.

RULE #3:Never, Ever, Intentionally Let a Domain Expire with the Intention of Re- Registering it Elsewhere.

RULE #4:Always Enable the "Domain Lock" for Your Domains

RULE #5:Enable "Login Notifications" and/or two factor authentication for your Registrar Account

RULE #6:Protect your Registrar User Account with Additional Security Measures

RULE #7:Be Aware of "Phishing" and "Domain Slamming" Attacks

3/30/2021

Your 3rd quarter grade was mainly your website grades.
Record who officially wants to continue the site.
- If your parents want to see your websites, I can send it to them. Just ask them to contact me!

Continuing website on your own….

Finding a good hosting provider as you leave my hosting

Find a hosting provider

You will need to support the three parts of your site:

Hosting
cms/wp
Domain registration

The best hosting account you can get will do all three for less than $20/mo. They should also have no less than 30gb and almost 100% uptime.

Type of hosting

Shared: Probably the most common option for small businesses with minimal levels of traffic, shared hosting means that more than one website is stored on a single server or a single piece of hardware. Shared servers are often the least expensive option, which makes them appealing to startups and other small entrepreneurial businesses.
Dedicated: When a single server plays host to a single website, it is called a dedicated server. This configuration allows the computer power of that server to be concentrated on just the website it is hosting. The dedicated server is usually more expensive than a shared server but that extra cost can be worth it to businesses where website performance is paramount to success.
Cloud hosting (VPS): Similar to the shared server, virtual private servers (VPS) allows many websites to be hosted by one cloud-based server system. A VPS is essentially the cloud-based version of a shared server; however, because of the scalability, flexibility, and redundancy of cloud computing, the VPS can offer more features. A VPS is often a good choice for businesses with computational and feature requirements that fluctuate over time.
WordPress: Physically speaking, a managed WordPress server can be hosted by any of the three previously mentioned configurations

You will probably want shared hosting.

Companies

NOT GODADDY for hosting!!!

Hosting providers:

SiteGround

$7/mo for first yr

$14/mo usual

Domain will cost about $15/yr not including security ($10-20)

Security is

Dreamhost- haven’t personally tested

$3/mo

Ultimately, you need to do your own research!

Finding a good domain

Usually you can register this when you sign up for hosting.

Make sure you add security to your domain or else people can see your email, name, and maybe address!

Search for available domains here: https://www.name.com

Most of your domains should be available. That’s why I asked you to check that before the project.

Later on we will discuss how to migrate your site over to your new hosting!

3/18/2021

Peer Review due 3/23

Get three people to look at your site on mobile and desktop and write down at least 1 pro (elements they like) and 3 cons (elements that don't work, look bad, or are confusing) that they give you. Make sure they browse the site like your user would: buy product, search for things, ect... they should click on as many links as possible and test how easy it is to find what they are looking for.

Peer #1 Name: ____________

Pros:

Cons:

--------------------------------------------------------------------------------------------------------------------------------------

Peer #2 Name: ____________

Pros:

Cons:

--------------------------------------------------------------------------------------------------------------------------------------

Peer #3 Name: ____________

Pros:

Cons:

3/16/2021

Website Project is due next Thursday!!!

Is your site responsive yet?
Do you have 5 blogs or products yet?
Do you have a contact us and about us page completed?
Is everything responsive?

How to market your website

What platform?

Your goal should be to market on the platforms that your target audience would use.

Facebook- most popular and common (all, photos)

17-60

Instagram (photos)

11-40

Youtube (videos)

1-50

Twitter (text)

20-60

Snapchat (photos)

11-30

Twitch (streams)

11-30

Pinterest (photos)

17-50

Email (text)

20-60

And many more!

How to market your website

Your goal should be to market on the content type that your target audience would use.

Informational with depth rich content (science, history, Bible, blogs)- longform blog or live streams

Informational with short and eyecatching content (art, fashion, recipes)

More situational or performance (gaming, musical, visual performances)- livestream and videos

Videos are the king of content!! They can be transformed into blogs, podcasts, visualizers, ect...

3/15/2021

How to make your site load faster:

Choose a good web hosting provider

The major factor that influences the speed of a website is the hosting of your WordPress website. It might seem like a good idea to host your new website on a shared hosting provider that offers “unlimited” bandwidth, space, emails, domains and more. However, the point that we usually miss out on regarding this offer is that shared hosting environments fail to deliver good loading times on peak traffic hours, and most fail to provide 99 percent uptime in any given month.

Shared hosting tends to deliver a poorer performance because you are sharing the same server space with countless other websites, and there is no telling how much resources others are using. Plus, you don’t know exactly how well the servers are optimized.

Thankfully, the web-hosting industry has advanced with technology, and the prices of cloud hosting providers have decreased with the passage of time. In the present times, you can buy dedicated cloud servers from SiteGround, DigitalOcean, Amazon Web Services, and even Google Compute Engine at a nominal price. However, setting those servers up can be a daunting task as you are required to set servers up from scratch.

Reduce image sizes

Images are the major contributors to size increment of a given webpage. The trick is to reduce the size of the images without compromising on the quality.

If you manually optimize the images using Chrome PageSpeed Insights extension or Photoshop or any other tools, the process will take a long time. Fortunately, there are plugins available for just about everything you can think of, including image optimization. The ones worth mentioning are:

Using any of the above mentioned plugins on your WordPress site will drastically reduce image sizes, thus improving the speed of your website.

Minify JS and CSS files

SG optimizer plugin allows you to do this.

Use advanced caching mechanisms with a caching plugin

SuperCacher: NGINX direct delivery of static resources, dynamic cache switched on for all by default, Memcache option.

Use a CDN

The people who visit your website belong to various locations in the world, and needless to say, the site-loading speed will differ if the visitors are located far away from where your site is hosted. There are many CDN (Content Delivery Networks) that help in keeping the site-loading speed to a minimum for visitors from various countries. A CDN keeps a copy of your website in various datacenters located in different places. The primary function of a CDN is to serve the webpage to a visitor from the nearest possible location. Cloudflare and MaxCDN are among the most popular CDN services.

SG offers a CDN option.

Enable GZIP compression

Compressing files on your local computer can save a lot of disk space. Similarly, for the web, we can use GZIP compression. This maneuver will dramatically reduce the bandwidth usage and the time it takes to gain access to your website. GZIP compresses various files so that whenever a visitor tries to access your website; their browser will first have to unzip the website. This process brings down the bandwidth usage to a considerable extent.

You can use either a plugin like the PageSpeed Ninja, which enables GZIP compression, or add the following codes in your .htaccess file.

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

SG automatically does this for you.

Cleanup WordPress database and posts (take out trash)

Deleting unwanted data from your database will keep its size to a minimum and also helps in reducing the size of your backups. It is also necessary to delete spam comments, fake users, old drafts of your content and maybe even unwanted plugins as well as themes. All of this will reduce the size of your databases and web files, and thus speed up WordPress – your WordPress.

Deactivate or uninstall plugins

Keeping unwanted plugins on your WordPress websites will add a tremendous amount of junk to your web files. Moreover, it will also increase the size of your backup and put an overwhelming amount of load on your server resources while backup files are being generated. It is better to get rid of the plugins that you don’t use and also look for alternate methods to use third-party services for automating or scheduling tasks (like sharing of your latest posts to social media).

IFTTT or Zapier are two web services that help in automating such tasks and reduce the burden on your website and server resources.

Keep external scripts to a minimum

The usage of external scripts on your web pages adds a big chunk of data to your total loading time. Thus, it is best to use a low number of scripts, including only the essentials such as tracking tools (like Google Analytics) or commenting systems (like Disqus).

3/11/2021

Loading Speed

Super important part of UX and SEO. If your site takes to long to load, people will bounce (leave).

The margins are getting smaller by the year.

Code makes things load more slowly.

Tracking your speed

https://developers.google.com/speed/pagespeed/insights/

Test your speed on multiple browsers.

The main culprit of loading speed are images.

What is SEO?

If you are reading this you probably already have an idea of what SEO is, but just in case you don’t: SEO (Search Engine Optimization) is the art of making your website meet all the demands of search engines (namely Google) so that they rank you higher in search results.

Images often break two major demands: loading speed and “crawlability”. Loading speed is primarily dictated by how you produce the image (file type, size, dimensions, etc.). The “crawlability” of the image is primarily dictated by the code in and around the image.

Now that you know why we should optimize images, let’s see how:

Side Note: the order in which you do these steps matters.

1. Check the rights

Full disclosure: this has nothing to do with SEO, it is just really important and is often overlooked.

Any image you use without permission is a chance to be sued for a buttload of money. So unless you have thousands of dollars in legal fees lying around, check with the proprietor of the image before using it.

If you found it on a social media platform, DM the person and ask about using it on your site. If you found it on Google Images, go to the website from which Google is pulling the image and check their copyright license.

*Note: you can filter your Google search by license; but even if you do this, check out the license of the original website.

If the site has the Creative Commons CC0, you will most likely be free to do whatever you need to, but even then, check the site for any other additional conditions.

Here are some sites that I usually go to find images:

These sites all have simple terms and licenses that should give you a clear conscience as you upload your image.

2. Use the right file type

Images come in many different forms called file types; however, Google has a limit on what they will support. According to their webmasters: “Google Images supports images in the following formats: BMP, GIF, JPEG, PNG, WebP, and SVG. You can also inline images as Data URIs.”

You also want to make sure you are using the file type that best compliments the image you are uploading. Learn which file type you should use for your image.

3. Scale down the dimensions

This step relates to the loading speed of your website. The larger your image, the longer it will take to load. Therefore, every pixel is valuable real estate that will determine how fast it will load.

Use a digital ruler to measure the dimensions of where you want the image to be on your website. If it is a small employee photo, it probably only needs to be about 200 x 400 pixels. But if it is a large call to action image, it can be up to 2400 pixels wide.

No fancy image editing software is necessary. Just use Microsoft Paint or whatever your computer has.

4. Shrink the file size

The file size of your image is different than the visual dimensions of the image. An image is just a bunch of data strewn together to make render some colored pixels. Sometimes image editing software or other sites add unnecessary data to the image. This means that you could have an image that is visually small but still loads slow.

This is why you need to run your image through an image optimizer. Some that I use are:

And, if you’re feeling crazy, you can even run your image through multiple times.

These websites will trim off all the unnecessary data lowering the file size whilst keeping the image looking sharp.

Now that image is optimized for loading speed, let’s get it ready to be crawl-able.

5. Name the image

Many of your images are probably named some random string of words and letters or they have a half-written description of what’s in the picture capitalized. This is not going to cut it. The title of the image file needs to be briefly describing the image in a “slugged” format.

A slug is a phrase or series of words that has been optimized for technology to read but is still easy for humans to understand. You will often see slugs in web page URLs and optimized file names. It should be short, lowercase, and have hyphens between each word. Don’t use special characters, spaces, or underscores which can make it hard for things like search engine bots to process your slug.

Side Note: this website will do it for you!

6. Add ALT text

The ALT text is an HTML attribute that describes the purpose of the image. It stands for ‘alternate text’.

Your text should briefly explain the image using specific names of the people or places in the image, not generic titles. Make sure the ALT text also relates to the context of the photo. For you SEO buffs out there, yes, you can put keywords in your ALT text, but do so only when it is natural.

Alt-text is important for two reasons:

Screen readers use ALT text to describe images to the visually impaired.
Search engine bots that crawl your website use the ALT text to fully understand an image and therefore better serve it to queries. Bots are getting smarter, but they are still far from understanding images full significance and purpose.

7. Upload an image sitemap

For the overachievers out there, Google Search Console allows you to list images in your sitemaps.

In your sitemap’s code, you can specify the image’s caption, location, and license.

<image:caption>

<image:geo_location>

<image:title>

<image:license>

All in a hard days work!

I know what you’re thinking: “I just wanted to upload a simple image, not spend forever adding boring ALT tags!” I totally get it. This just made a simple upload so much more complex.

But when it comes down to it, that’s what successful SEO is all about: getting out of your comfort zone and spending a ridiculous amount of time and effort on the simplest tasks. Just keep in mind that ultimately you’re putting in the effort to make a great experience for your customers. Also, there’s nothing like seeing your website at the top of the SERPs. So, push through! You got this! 👍

3/10/2021

How has your site map, homepage design, ect… change since you’ve created them?

What are some misconceptions you had about the project going in?

Website Finishing Touches:

Add at least 5 posts or products with the best photos you can find
Make your site responsive- due March 25th with the rest of the site.

Mobile-First Design Review:

Google doesn’t want to send people to a page that is broken. So much so that they will actually base your rankings based on the mobile design before desktop.

So when you are designing you need to prioritize a design element on mobile over desktop.

Constantly check your site on mobile by:

Checking it on your phone
Reshaping your browser
Using the debugging tool
While editing in BB: press “r” to edit in different screen sizes

Common mistakes to avoid:

Large fonts sizes that are too big on mobile
1. If you change a setting with a phone icon next to it, click the icon to change the settings per screen size.
2. Small= phones
3. Medium= tablets
4. Large= desktops
Wide banners or images that have sections cut off on phones
1. If you need to design a whole new row for mobile users, use the devices specifications in the advanced tab of all modules to only have the row show up on certain sized devices.
Headers
1. Use a browser shrinking method and see when the logo or other elements start stacking or shrinking.
  1. Bad- https://www.gcestrategicconsulting.com/
  2. Good- https://fatty15.com/
2. I usually create a whole new row for mobile layouts
  1. Create a hamburger menu for this (I prefer off-canvas styled)
Test test test
1. Slide all slides and push all buttons
2. Test all your changes on your phone and/or ipad. There are things that come up that you can’t see otherwise.
3. For example: if someone has a plus-sized phone, than it may be hard for them to reach things in the top left of the screen with their thumb.
  1. Keep your buttons in the easy to push zone (within a comfortable reach of the right thumb)!

3/9/2021

How do search engines work?

Search engines work through three primary functions:

Crawling: Scour the Internet for content, looking over the code/content for each URL they find.
Indexing: Store and organize the content found during the crawling process. Once a page is in the index, it’s in the running to be displayed as a result to relevant queries.
Ranking: Provide the pieces of content that will best answer a searcher's query, which means that results are ordered by most relevant to least relevant.

Keywords!

SEO- Search Engine Optimization

SEO is a term for making your website better compliant and therefore rank higher on search engine result pages (SERPs). There is paid and organic traffic that your site can gain. You want organic traffic. To do that you need to build your audience by producing quality content that meets a need and appeals to a certain niche.

What do search engines want the most? Usually what’s best for your user:

Crawling: Can search engines find your pages?

One way to check your indexed pages is "site:yourdomain.com", an advanced search operator. Head to Google and type "site:yourdomain.com" into the search bar. This will return results Google has in its index for the site specified:

To connect with google about having them index and rank your site, create a search console account. You can create that with your free Google Account.

3/8/2021

SSL- Keeping Your Users Safe

This is super important! Especially if you have a store or a contact form.

Do you have SSL:

There should be a padlock symbol in the browser window frame.
The web address should begin with ‘https://’. The ‘s’ stands for ‘secure’.

The above indicate that the website owners have a digital certificate that has been issued by a trusted third party, such as VeriSign or Thawte, which indicates that the information transmitted online from that website has been encrypted and protected from being intercepted and stolen by third parties. In other words, the communication between you and the site owner is secure, however a certificate is no guarantee that the site owner is the organisation or person you think you are communicating with ... you need to carefully check the web page address to confirm authenticity.

Without it, your connection to the server may be looked in upon by a hacker or you could be connected to the wrong server.

means the connection is not encrypted.
means the connection is encrypted, but the SSL certificate for FileMaker Server cannot be verified. You may be connected to a server pretending to be your actual destination, which could put your confidential information at risk.

If you get this: open up debug with f12 and find the insecure image or media and reupload it to the media library in WP.

means the connection is encrypted with a verified SSL certificate.

Show how to add one in SiteGround.

Make sure you set it to force content to be SSL

3/4/2021

WP Security

Since WP is open source and it is the most popular CMS by far, it has a target on it’s back for hackers. That’s why each of your sites have security software. But no matter your CMS you need to do everything in your power to prevent a hack.

Hacking

the gaining of unauthorized access to data in a system or computer. We will talk more about it later.

Securing your site

Software Updates

Update software at least every month

Number one way websites are hacked

Software updates usually include patches so you need to update.
The older the software the easier it is to hack.

Software to update:

Plugins
Themes
WP core

Always clear your SG cache and review the site after updating to make sure it didn't’ break anything.

Passwords and accounts

Use long and random passwords

Second most common reasons people are hacked is having short or predictable passwords.

Use password manager like lastpass
Why?
1. Hackers either guess the password or brute force crack it with algorithms and a lot of computing power.
You should use 2 factor authentication if possible!
Browsers will automatically save your login info, don’t let them.
Change your password at least every couple years too.

Don’t share your passwords willy nilly! If you want to give someone access, only give them the amount of access for what they need.

Remember that your site isn’t just WP. It is hosted on a server that can also be accessed via FTP and other ways. But if you pick a quality hosting provider than you shouldn’t have to worry about that too much.

If you are hacked and you are using a shared hosting account with multiple clients on one server (most common), than when your host finds out that you are hacked in their many scans, they will usually shut down your site until the whole account is scrubbed, to make sure the hackers can’t get to the other clients in the server.

Note: Why do hackers want servers? Spamming, bitcoin mining, personal info, or to create a botnet.

3/3/2021

3/3/21

Favicons

A favicon (/ˈfæv.ɪˌkɒn/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.

How to make one.

Create a design
Set the custom size to 500px by 500px
1. It will end up only being 16px by 16px so just making a square will do. (sometimes they are 32x32)
Add your logo to the canvas are start simplifying!
1. Basic shapes should be even more basic
2. Preferably have a transparent bg
Download as a png and name it favicon
Login to your site>dashboard>appearance>customize>settings>site identity>choose icon>drag and drop the favicon image from your files into your media library>done

If you have a text based logo then add a stylistic flare of it or use the first letter of it. https://kitecreative.co.uk/

https://andyhardy.co/

3/2/2021

Intro to Canva

Use for any graphics you need to make. Social banners, logos, pdfs, infographics, slideshows, videos. Things that are important to do in college or at whatever job you get. Or for your own personal life to make banners or memes!

Canva.com

We will use it for favicons and your logo.

Logo recap:

Logo- cornerstone of your brand

Not all of you will create a logo and that is ok, you only need to have text there, but we will discuss the basics of a logo.

Logos can be for a company or just a personal brand, and should be the graphical summary of the entity.

Logos should:

Reflect your overall look and feel
1. Classic- fancy curls and drawing
2. New modern- minal simple
Use basic shapes
1. It can be elaborate, but when looked at far away it
2. should still be recognizable.

It should look when:good far away

Black and white
Bent in different angles on clothes and cars

Creating the logo:

Canva
Other logo creators online
- Wix
Make sure the logo’s background is transparent

3/1/2021

3/1/21

Contact Us Page

Remember: you need to make the user’s journey to your goal as easy as possible. So you need to get into the head of your demographic and anticipate the ideal ways that they would communicate.

Older- phone, email, contact form

Younger- facebook message, sms,

Depending on your industry the contact us page will need different things. Find a company that matches yours and see how they designed their contact form. If you have a service, it is very important that people can contact you so invest a lot of time in your design.

Things to add:

Email
- mailto: your emailaddress@gmail.com
Phone
- tel:1+815-830-8938
Social Links
- Make sure the link opens in a new tab
Contact Form
- Best plugin: Contact Form 7
- example: igloodiner.com/contact-us
  - BB has modules for that plugin
- In the backend: set your fields in html and make sure you set the email it sends to.
- Test it!!!
If you have a physical location:
- Clickable directions
- Or a google map- BB module
Hours of operation

Examples:

https://www.yeti.com/en_US/contact-us.html

https://infinum.com/contact

https://dev.zeroqode.com/contact

Homework: Complete contact us page by Thursday, 3/4

2/25/2021

Footers

People don’t scroll to the bottom of pages.< Fallacy

You should end the pages on a high note, calling them to act or explore.

Things to add:

CTA
Navigation or additional links
Logo
Contact Info/Links
- mailto:your emailaddress@gmail.com
- tel:1+815-830-8938
Social Links
- Make sure the link opens in a new tab
More about you
Blog Content ticker
Copyright Stuff
Who designed it

*Make sure it’s balanced!

2/24/2021

Refer to this article:

https://docs.wpbeaverbuilder.com/beaver-themer/layout-types-modules/archive-layout-type/themer-archive-layout-type

Creating essential themer templates

Products

Themer layout> singular> location: product> publish> open in bb> use woocomerce template

You can access it in bb on the front end by hovering over bb

Posts

Themer layout> singular> location: posts> publish> open in bb> use woocomerce template

Appling your branding style

WP: Customize

Set the font properties for different headings, paragraph text, and set background color.

This effects WordPress default template. For example: search pages and 404 pages. (you can change all those styles in bb with the themer)

Creating content pages

Remember that the rules of the assignment say that you need more than one page on the site.

What other pages should you make? Depends on your site. Most sites will have post or product pages.

Every site should have an about us, contact, and homepage.

Pages> Add New> Open in BB

Add text and images. It doesn’t need to be fancy or contain a lot of content. Keep it simple.

Look at sites like yours for guidance.

Keeping branding consistent with BB Templates and saved modules

All your templates can be access on the backend and front end (when editing in beaver builder)
Create templates to keep padding, colors, spacing, ect... consistent
You can create different default themes for a type of page, such as a product page, in Beaver Themer Layouts.
Keep your overall design and brand consistent across your site and even other marketing banners and such. We will talk more about how to design your brand later.
- To do this without recreating all your design elements you can save modules, columns, rows, and templates.

HW: create your about us page with at least one paragraph and heading about your website. Due 2/25

2/18/2021

Now that your homepages are complete and you have a better idea of what you want your sites to look like, we will start designing/building the rest of your sites.

To do that we need to keep our branding rule: keep it consistent! The same styling elements should be the same across the whole website.

Before we do that on your sites we need to make sure you have guidelines.

Branding Style Guide- keeping styles consistent across the site

A brand style guide is a rulebook that explains how an organization presents itself to the world through its logo, font and color selections, photography and much more. Put another way, it’s a reference tool that helps maintain consistency in what a brand looks, feels and sounds like.

Mission and vision: Write a mission statement about why your company exists and a vision statement about where you want your brand to go. These can be big (you’re going to change the world) or small (you solves a small, annoying problem), as long as they’re true to your brand.

Target audience: Describe who your customers are and why they need you (i.e. how your products or services solve their problems). If you’ve done market research, include any insights that could help your team communicate more effectively to your customers. Here’s a deeper guide on how to define your target audience.

Personality: Make a list of 3-5 adjectives that describe your brand. This will set the tone for both design and writing. Are you sophisticated or quirky? Classic or trendy? Ask your team for input and perspective.

Tip: It can also be helpful to list 3-5 adjectives that your brand is not. In fact, many advertising agencies begin their branding projects with an “Is / Is Not” exercise.

Fill this out and hand it in on Tuesday

______________________________________________________________________________

Branding Style Guide- keeping styles consistent across the website and beyond

Fill in the blanks:

Mission Statement:_________________________________________

Write a mission statement about why your company exists and a vision statement about where you want your brand to go. These can be big (you’re going to change the world) or small (you solves a small, annoying problem), as long as they’re true to your brand.

Target audience: _________________________________________

Describe who your customers are and why they need you (i.e. how your products or services solve their problems).

Personality/Tone of Voice: _________________________________________

Make a list of 3-5 adjectives that describe your brand. This will set the tone for both design and writing. Are you sophisticated or quirky? Classic or trendy?

Color Pallet: primary color________________ secondary color (optional)_________ highlight color_________

Use colorhunt.co to help you find a pallet. Write the name of the color or the hex code above. Make sure that the colors matches your tone.

Typography: primary________________ secondary_________ highlight (optional)_________

Use fonts.google.com to find fonts you would like to use. Make sure that the types match your tone.

Logo Ideas::

Draw a logo that you would like to represent your brand or site:

You can use canva or a drawing app on an ipad to make the logo a reality and put it on your site. Use simple shapes so that it looks good in black and white and from far away. Whenever you add a logo make sure it has a transparent background (and a png file type is best). ______________________________________________________________________________

2/17/2021

Homepage Peer review:


albertsrecipebox.bradenhamiel.com header- search icon bigger find green and orange color pallet, and change logo color, add categories to homepage
campingsports.bradenhamiel.com make category photos clickable, CTA is amazing!!! header links are not readable on hover, find a color pallet, so as to not use different greens, copyright year
thesugarbin.bradenhamiel.com add category links, add search icon, more space in cta, rethink updates section to resemble a feed, FAQ text should be black or consistent colors
fbphotography.bradenhamiel.com balance out header with equal spacing, add categories to filter through of different types of photos, add cta height

2/11/2021

Homepage Peer review:

bassfishingofficial.bradenhamiel.com links should be obvious, align modules center in column settings, copyright thingy smaller
squadxmerch.bradenhamiel.com cta text more contrasted in size, more space between rows, longer or no white separator, dropdown menu fixed, top bar menu full width
saiditbefore.bradenhamiel.com buttons all caps, view all instead of long text, maybe add another row maybe a cta that has a different background color.
informationalzebra.bradenhamiel.com button text, create header, create footer,
stickerco.bradenhamiel.com Cta text could be bigger, more space above first row, buttons text color,
thecookbook.bradenhamiel.com larger cta text,
naroclothing.bradenhamiel.com header full width, add buttons under right heading things,
salanderfarms.bradenhamiel.com cta text more contrasted or readable and larger font-sized, more space between rows,

2/9/2021

2/9/21

In general, the more people reviewing the work, the better it will be.

How to critique Work

Before you view it: get in the mind of the user
- Critique from their perspective
Be slow to speak
- Don’t make quick harsh remarks
Use sandwich technique
- Positive
- Negative
- Positive

How to bring up the negatives:

Ask many questions about something you don’t like
- Why did you go with that color or size?
- Be constructive
  - Offer up ideas
- Bring up examples
- Question your own ideas!

How to take critique

Patience and empathy.

Our work is a part of us… but that doesn’t mean it has to be perfect!

2/4/2021

2/4/21

Responsive Design

One of the biggest aspects of SEO. Over half of your users will be viewing your site on phones.

SEO- search engine optimization

Mobile-First Design

Google doesn’t want to send people to a page that is broken. So much so that they will actually base your rankings based on the mobile design before desktop.

So when you are designing you need to prioritize a design element on mobile over desktop.

Constantly check your site on mobile by:

Checking it on your phone
Reshaping your browser
Using the debugging tool
While editing in BB: press “r” to edit in different screen sizes

Common mistakes to avoid:

Large fonts sizes that are too big on mobile
1. If you change a setting with a phone icon next to it, click the icon to change the settings per screen size.
2. Small= phones
3. Medium= tablets
4. Large= desktops
Wide banners or images that have sections cut off on phones
1. If you need to design a whole new row for mobile users, use the devices specifications in the advanced tab of all modules to only have the row show up on certain sized devices.
Headers
1. Use a browser shrinking method and see when the logo or other elements start stacking or shrinking.
  1. Bad- https://www.gcestrategicconsulting.com/
  2. Good- https://fatty15.com/
2. I usually create a whole new row for mobile layouts
  1. Create a hamburger menu for this (I prefer off-canvas styled)
Test test test
1. Slide all slides and push all buttons
2. Test all your changes on your phone and/or ipad. There are things that come up that you can’t see otherwise.
3. For example: if someone has a plus-sized phone, than it may be hard for them to reach things in the top left of the screen with their thumb.
  1. Keep your buttons in the easy zone!

2/3/2021

2/3/21

Informational Site Students- Homepage:

Each row will be starting at the most important to the least important.

Most important thing: information (blog/posts or photos [Fath])

Your goal: for people to enjoy your content so much that they want to come back to your site.

Faith: for people to contact her

Users should “Enjoy your content”

Show them the content in a very organized way. Make it as easy as possible for them to consume it.

Create either content or test content
1. Posts for blogs, recipes, ect...
  1. Create and manage Posts in backend
    1. Set categories
2. Photos for Faith
Use a module on frontend to have posts automatically show up on the frontend (homepage).
1. Start with your most important posts (trending, most popular, most recent) categories and work your way down to the least.
2. Different types of modules
  1. Slideshows/Carousels
  2. Grids
If your content is unclear to consume make it painfully obvious

Users should “Come back”

Your homepage should also have a CTA for people to come back

Subscribing to your blog, newsletter, blog, ect…
Follow your blog on social media

Faith- CTA for them to contact you

2/2/2021

2/2/21

Informational Site Students- Homepage:

Each row will be starting at the most important to the least important.

Most important thing: information (blog/posts or photos [Fath])

Your goal: for people to enjoy your content so much that they want to come back to your site.

Faith: for people to contact her

Users should “Enjoy your content”

Show them the content in a very organized way. Make it as easy as possible for them to consume it.

Create either content or test content
1. Posts for blogs, recipes, ect...
  1. Create and manage Posts in backend
    1. Set categories
2. Photos for Faith
Use a module on frontend to have posts automatically show up on the frontend (homepage).
1. Start with your most important posts (trending, most popular, most recent) categories and work your way down to the least.
2. Different types of modules
  1. Slideshows/Carousels
  2. Grids
If your content is unclear to consume make it painfully obvious

Users should “Come back”

Your homepage should also have a CTA for people to come back

Subscribing to your blog, newsletter, blog, ect…
Follow your blog on social media

Faith- CTA for them to contact you

2/1/2021

2/1/21

Online Store Students:

Woocommerce is the plugin that lets you have a store
1. In the settings fill out your payment processor, shipping, address, and store settings.
Before you build your homepage, add some products.
1. Make sure you add categories to each product
On your homepage, use the Woo- Products module to create a automatically populating list of the products you are selling.

1/27/2021

1/27/21

General Design Mistakes to Avoid

Image right next to image in row backgrounds
- Having photos as backgrounds usually look better with more separation and white space. Photo on photos is very busy and distracts from the content.
- Beware of making your headers have a photo background.
Text is hard to read with background photo
- Make sure the text is very contrasting in color from the background
- If the background has changing colors to contrast, add an overlay over the image.
Make sure text is short and let’s user know what you want them to do.
- If you just can’t shorten it, make a super short heading and have some descriptive text underneath it.
Your button should be in contrasting colors and stand out.

Ask yourself these questions:

What do you want them to do?

Short, to the point

Why do they want it?

What will it add to their life?

How do they get it?

Quick and easily seen button to the page where they can get what you offer.
What can we do to draw the eye to a button?

CTA Feedback Time

Homework: Give me links to three CTA’s that you like and why you like them ( aka: make a pro’s and con’s list).

1/25/2021

1/25/21

CTA workshop!

What makes a Top Banner CTA?

Usually:

Short, large in font, eye-catching text telling you to do something.
- The few words the better
Bright, clear button that is linking to a page where they can complete the action.

How to design a Top Banner CTA?

Establish your goal
Create a button to a page with the easiest way for the user to complete the goal
1. Make it contrasting in colors, using your highlight color.
Establish why they should complete the goal
1. You need to solve a problem
  1. Status (style)
  2. Convenience ()
  3. Money (you offer them savings)
  4. Danger (offering safety or security)
  5. The more you know your audience the better you can nail this down
  6. Put yourself in the user's shoes and be critical
Create a short imperative phrase that tells the user why completing the goal will help them.
Find or create an image that shows them what you sell and why how it meets the need.
1. Include:
  1. Your product
  2. People that are your target audience using or benefiting from your product
  3. If the product is more vague- simplify and illustrate what it is with graphics

1/21/2021

1/21/21

Call to actions

Getting the user to do something you want them to do.

(before doing this you need to know what target audience you have and how to market to them)

These can be ads, radio ads, primarily for us we will discuss them as your top banner.

The first things that should happen in their first view of your top banner:

Know what you sell or make - image, or description
Know how to get it - button

Rules:

What do you want them to do?

1. 1. Short, to the point

Why do they want it?

1. 1. What will it add to their life?
    1. Do examples-
      1. fbphotos- memories to cherish
      2. Naro- express yourself through fashion
      3. Camping- relax in nature

How do they get it?

1. 1. Quick and easily seen button to the page where they can get what you offer.
  2. What can we do to draw the eye to a button?

Make text large!!!
Make it simple- only one focal point!

Homework: Complete your homepage’s top banner CTA using the principles in the CTA lesson.

1/20/2021

1/20/21

Competitor Research (competitive analysis)

Google your keywords and your website name

1. 1. Primary Competition: These are your direct competitors, which means they’re either targeting the same audience or have a similar product — or both.
  2. Secondary Competition: These competitors may fofer a high- or low-end version of your product, or sell something similar to a completely different audience. If you’re selling Timex watches, a secondary competitor might be a Rolex retailer.

Gather data:

1. 1. Name of store
  2. Location
  3. Mission statement
  4. Products
  5. Strengths and weaknesses of their business
  6. Category of competition

What do they selling? Affordability or Experience?

1. 1. Affordability: selling cheap quality products- “you will save money”
    1. Focus on longevity
    2. Flaunting low prices

Experience: selling a philosophy and experience- “you will feel this when you buy our product”

1. 1. 1. Focus on design and feeling good
    2. Hide price

Check out their skeletons in their customer reviews

1. 1. How can you fill the needs where they are lacking?

What social media platforms do they market on?

1. 1. How do they talk to their customers?
  2. How many followers?
  3. What platforms could you use to target your market that they don’t?

Identify what you want

1. 1. Don’t just try to make money- fill a need!
  2. Solve a problem in the market
  3. Add value to the market

Bonus: sign up for their email newsletters and like their social pages!

1/19/2021

1/19/21

Branding- people’s overall perception of you or your business

Jeff Bezos: “Your brand is what other people say about you when you're not in the room.”

Rules:

1. Your brand should be reflect you or your business honestly
  1. Try to dig deep into what the entity is about and express that visually.
  2. Companies that try and act like something they are not is see-through ans fake.
  3. Especially Gen Z and millennials are drawn to credibility over anything else.
2. Your brand should be consistent in tone of voice and style
  1. The user should have the same great experience and impression of your business after visiting your store, going to your social media accounts, website, banners and ads, and physical branding like shirts, hats, billboards, bags, ect..
    1. Environment (storefront or office)
    2. Print collateral, signage, packaging
    3. Website & online advertising
    4. Content publishing
    5. Sales & customer service
    6. Internal (with employees)
  2. The text in each should be the same tone of voice as well, the more casual the more modern
3. How to build your brand (it’s built slowly)

Competitor research- design elements and style

1. 1. 1. Google your keywords for your business and see who’s out there
      1. What are they doing right and wrong
      2. How can you do it better and add value to the market

If you don’t know how to style your brand, look at your competitors, what do you like or dislike? Why?

Target audience research

1. 1. 1. Using Google Analytics on your site you can see user data.
    2. Most ad platforms like Google Ads, Facebook, Twitter, LinkedIn, Instagram, ect.. Will let you see data surrounding your ads, like
      1. Age
      2. Technology
      3. Gender
      4. General location
      5. How they got to your page

Brand voice- website’s content/text

1. 1. 1. We have already discussed this.
    2. Your tone of voice will depend on the target audience
      1. Older- more to the point
      2. Younger- honest and real, yet down to earth and casual

Brand message & story- about us page

1. 1. Establish what your brand’s origin is.
    1. Who founded it?
    2. What were the circumstances surrounding the founding?
    3. Why was it founded?
    4. What is the goal?
    5. What are the future plans for growth?

1/18/2021

1/18/21

Branding and Logos

Logo- cornerstone of your brand

Not all of you will create a logo and that is ok, you only need to have text there, but we will discuss the basics of a logo.

Logos can be for a company or just a personal brand, and should be the graphical summary of the entity.

Logos should:

Reflect your overall look and feel
1. Classic- fancy curls and drawing
2. New modern- minal simple
Use basic shapes
1. It can be elaborate, but when looked at far away it should still be recognizable.

It should look when:

good far away
Black and white
Bent in different angles on clothes and cars

Creating the logo:

Canva
Other logo creators online
- Wix
Make sure the logo’s background is transparent

1/14/2021

1/14/21

Creating Templates

Make a list of the most important elements and add them from least to greatest using your design tools to draw attention to singular content that leads them to your goal.

All your templates can be access on the backend and front end (when editing in beaver builder)
Create templates to keep padding, colors, spacing, ect... consistent
You can create different default themes for a type of page, such as a product page, in Beaver Themer Layouts.
Keep your overall design and brand consistent across your site and even other marketing banners and such. We will talk more about how to design your brand later.
- To do this without recreating all your design elements you can save modules, columns, rows, and templates.

Work on site time!

Advice: especially when making your navigation and layout, look to a well designed website in the same field.

1/13/2021

1/13/21

What are Pages

Files of code on your hosting that is accessed with a URL being typed into a browser. The URL’s path to the file is a slug. It is the slugified version of your page’s title (lowercase, dashed, short).

You can type that in to access any page quickly without using your navigation.

Adding Pages to Menu

An automatic list of pages (via links) usually in your header that help the user navigate your site.

You can create a menu in customize>menu
Add all the pages you want on the menu
Drag a link to the right to make it a child in a dropdown format
- Do this as much as possible to keep your menu very short
- The less options the easier your navigating
While Beaver Building your header, you can add a menu module and choose whichever menu you created

Creating Pages

You can view all your pages on in the wordpress admin.
Press add new to add a new page.
Type title and publish
To the right of the title you can change the details of the page (date, status, featured image to be generated when you share your link)
Open in Beaver Builder
- Don’t add your content on the backend of the page (unless it’s a post or product), although that would technically work, opening it in Beaver Builder is the easiest way to design the layout of the page. If you did add content to the backend of the page, then the design on the front end would be whatever your theme has established.

1/12/2021

1/12/21

Headers and Footers

Top section with your logo and navigation menu that usually is the same on every page. The bottom section is called the footer

WordPress has a header option in the Customize section of the site. That will give you a header, but it will be very limited in styling (unless you know CSS). That’s why I installed the plugin Beaver Themer to all your sites.

Beaver Themer lets you create layouts/templates for archive pages, template an entire post type, product pages, 404 and search pages, and create parts like headers and footers. Field connections allow you to connect your layouts to the data inside each type of template.

So it’s not just headers and footers that you can edit in Beaver Builder, it’s also the autocreated pages that WordPress creates for you.

Your whole website is made up of many pages. Login page, default posts, blog search page, and more. And WooCommerce that I installed to let you build a store automatically created pages like product pages, category pages, check out page, ect.

Beaver Themer let’s you make a template that will be applied to all those pages that WordPress has designed for you

Class demonstration of how to edit Beaver Themer and the Header. Q & A

Homework:

Create or Begin creating your website's header. This is done by creating a beaver themer layout, setting the location to entire site, publishing, and designing the header in beaver builder. - due 1/14

1/11/2021

1/11/21

General Site Settings

Title Tags found in the Head Tag

WordPress, and other CMS’s allow you to change the head tag of your html documents.

HTML= language for content

All websites are made, ultimately, from an HTML document or file, containing HTML code. Which is why we can look at the source code of any page on the internet.

Here is the structure of all those HTML documents:

<!DOCTYPE html>

<head>

<title>Title of the document</title>

</head>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

<title> **required in every HTML document**
- The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
- The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
<style>
- The <style> tag is used to define style information (CSS) for a document.

<style>

h1 {color:red;}

p {color:blue;}

</style>

<base>
- The <base> tag specifies the base URL and/or target for all relative URLs in a document.

<head>

</head>

<body>

</body>

<link>
- Link to an external style sheet:

<head>

</head>

<meta>
- The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
- <meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
- Metadata will not be displayed on the page, but is machine parsable.
- Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
- There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag
<script>
- The <script> tag is used to embed a client-side script (JavaScript).
- The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
- Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Many of the things you would see in the head tag will be in the general settings of your CMS.

**required in every HTML document**

The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

Seeing settings in wordpress

Creating homepage in Beaver Builder

1/7/2021

1/7/21

What are these files?

HTML: Content

CSS: Style

JavaScript: Action/Dynamic

But mainly built with PHP script :

PHP is a scripting language, whereas HTML is a markup language. HTML determines the general structure and content of a web page, while PHP provides dynamic content through scripts. PHP is typically a server-side language, while HTML is client-side.

PHP is a programming language used in web design to create dynamic web pages. HTML provides the foundation and structure for a web page, while various programming languages allow you to create the inner workings of that page. There is no shortage of languages that can get this work done for you, and PHP is one of the most popular ones around. PHP scripts are powerful enough to create almost anything you need on your page. It is also flexible and easy to learn. With care, a novice web developer can use PHP to make their pages hum.

Database:

A database is like a storage cupboard with many shelves. It stores files in a structured manner. By default, the database has eleven tables. The tables can be thought of storage spaces inside a cupboard. The tables will expand as you begin using the WordPress website, adding more posts, attracting comments to the site. Database tables have a default prefix wp_ which can be changed at will. These tables can be optimized and repaired, and they can also be exported or backed up using a backup plugin like BlogVault. Each table has its own function, and we are going to discuss these functions below. But first, let’s see how you can access the database.

To access your database, you will have to visit your web host account. Log in to your web host and go to a page called cPanel. There, you should be able to find an option for phpMyAdmin. Select that, and a page will open that would look something like this:

Now let’s take a look at what each of these tables contains:

Table 1: wp_commentmeta

wp_commentmeta stores metadata for comments left on your WordPress site. Information on things like whether a comment is approved, or pending or trashed are stored in this table.

Table 2: wp_comments

wp_comments stores information surrounding comments left on your account. It includes unique number assigned to each comment, email addresses, IP Addresses and URL for the comment author, pingback or trackback, replies to comments, time and date of the comment, among other things.

Table 3: wp_links

wp_links takes care of blogrolls (a list of hyperlinks to other blogs or websites) that was fashionable in the past. WordPress websites had blogroll by default in the past, but since version 3.5 there have been no blogrolls. The table remains in the database for backward compatibility, i.e. if someone is still using older versions of WordPress that has blogrolls, this particular table will help taking care of the blogroll feature.

Table 4: wp_options

In your WordPress dashboard, there is an option called Setting. wp_options stores data related to that Settings feature. If you select Setting from your WordPress dashboard, you’ll see options that enable you to change site title, tagline, site address (URL), etc. This information is stored in the wp_options table. Let’s see the wp_options table on my website.

I visited the Setting option from my WordPress dashboard. As you can see in the picture above, my Site Title is ‘My Blog’, and the Tagline is ‘Just another WordPress site’. I found that the same information is stored in my wp_options table. Look at the picture below.

Table 5: wp_postmeta

wp_postmeta stores metadata (like Post ID, meta ID, among other things) for posts and pages. Identification numbers allotted to each post helps to store them in a structured manner. The IDs also makes it easier to find posts and web pages when they are needed.

Table 6: wp_posts

wp_posts stores information from posts, pages, and the navigation menu. How is it different from wp_postmeta? In wp_postmeta, you’ll find unique identification number allotted to posts and pages whereas in wp_posts consists of information like post name, author name, post date among other things. Let’s see how the information of a post is stored in this table.

I published a post called ‘Structure of a WordPress Site’ on my website.

As soon as my post was published, information of the post appears on the wp_posts table.

Table 7: wp_terms

wp_terms stores three things: categories for tags of posts, categories of posts and link categories. To understand what these things are, let’s take a look at the pictures below:

Tags of posts

Post Categories

Link Categories

In the three pictures above, we have:

WP Security Audit Log (tag)
Review (post categories)
Uncategorized (post categories)
Blogroll (link categories)

These tags, post categories, and link categories are present in the wp_terms table of my database.

Table 8: wp_term_relationships

wp_term_relationships stores relationship data for categories and tags from the wp_terms table. What does that mean? Let’s say there is a post on your website named A. It belongs to the category 9. This table helps determine that post A belongs to 9 categories and not some other category.

Table 9: wp_term_taxonomy

wp_term_taxonomy stores descriptions of the taxonomy (tag, link, or category) for the entries in the wp_terms table. This table helps differentiate between tags, or links or categories.

Table 10: wp_usermeta

wp_usermeta stores metadata of a WordPress user. For instance, your user ID is 1, and your fellow admin’s user ID is 2. This particular information is stored in the wp_usermeta table.

Table 11: wp_users

wp_users stores data for WordPress users. How is it different to wp_usermeta? Well, the wp_usermeta table stored unique identification number of users but the wp_users table stores other user information like the Username, User Login Name, Email address, etc.

To give you an idea, I created a new user on my WordPress website.

I looked up my wp_users table and saw information of the new user had been stored in there.

1/6/2021

1/6/21

WP Files Hierarchy/Architecture

These are the files that are unique to a particular WordPress installation and contain all of your website data.

So if you want to take a backup of your WordPress website then take a backup of the following installation files and folders.

(these were shown yesterday in SG in Site Tools> File Manager)

/wp-content/

This folder contains all of your plug-ins and themes. It also contains all of your blog posts and comments (in the ‘cache’ sub-folder). So if you want to take a back up of your WordPress site then first take a back up of this folder.

/wp-admin/

The wp-admin folder contains administrative files that power the WordPress dashboard. The first thing that you see after logging into your WordPress site is the WordPress dashboard

/wp-includes/

wp-includes contains everything needed to run WordPress via the frontend ( and then some ). It is the territory of WordPress Core, and as the adage goes, never modify core under any circumstances.

/wp-config.php

This file stores your WordPress database information like database name, database username, database password, etc. It is a very important file and can easily take down your website. So don’t mess with it unless you know what you are doing.

/.htaccess

Another important file for server access control. You can find this file in the root folder via your FTP. It is a very important file and can easily take down your website. So don’t mess with it unless you know what you are doing.

/favicon.ico

This is your website’s favicon file. You can find this file in the root folder via your FTP.

/robots.txt

This file is used to block specified files and folders from being crawled and indexed by Google.

Website Projects

You were given a sheet with your user, password, and login page url.

Homework: Login to your site and click around.

Remember the project rules:

You need more than one page.

It has to be responsive (function and look good on mobile devices).

You can only use the boring template that I will preinstall.

Do not install plugins!

1/5/2021

1/5/21

Installing WP Hosting Account

Depending on the host these could all be different, but overall it will go something like this

*Before anything else: Make sure your domain is pointing to your host (your dns settings have to have nameservers using nameserver 2 codes and/or a record using the IP address of your host)

Log into hosting account
Find cpanel or site tools (siteground will give you different site’s that you’ve made where you can access their site tools)
In cpanel find WordPress (softaculous)
Using their installer (softaculous) Press “install wordpress”
It will ask you what domain or subdomain to use
It will ask where in your server’s file to install WP’s files
Add username, password, and email for the admin user account the installer will automatically create
Set language of the site
Install!

What the installer is doing for you:

Uploading the open source WP files

And creating a database

1/4/2021

1/4/21

Review: what do I need to create a website? Hosting, CMS, and domain.

Your websites:

Drag and Drop Styler WYSIWYG- Beaver Builder
- Demo it here: https://5ff357e48cc3a.demo.wpbeaverbuilder.com/demo/?fl_builder
CMS- WordPress.org
- Demo it here: https://s1.demo.opensourcecms.com/s/39
Hosting- SiteGround

Domain/Registrar- GoDaddy to SiteGround (your-sites-name.bradenhamiel.com)

- - If you want to actually have an account yourself after the project is complete I can help you get a domain and hosting and we can transfer the site to your accounts.

What is WordPress?

At its core, WordPress is the simplest, most popular way to create your own website or blog. In fact, WordPress powers over 38.8% of all the websites on the Internet.

Remember that WP.org and .com are different.

WordPress.org, often called self-hosted WordPress, is the free, open-source WordPress software that you can install on your own web host to create a website that’s 100% your own.
WordPress.com is a for-profit, paid service that is powered by the WordPress.org software. It’s simple to use, but you lose much of the flexibility of the self-hosted WordPress.

Who Made WordPress And How Long Has It Been Around?

WordPress was created as a standalone project all the way back in 2003, originating as an offshoot of a previous project called b2/cafelog.

WordPress is open-source software, so nowadays it’s made by a huge community of contributors. But if we were to trace WordPress’ origins back to its roots, its original creation was a collaboration between Matt Mullenweg and Mike Little.

Since then, Matt Mullenweg has largely become the face of WordPress. And he’s also the founder of Automattic, which is the company behind the for-profit WordPress.com service.

Made on WP:

Whitehouse.gov
Microsoft
The Rolling Stones

Why Should You Use WordPress?

WordPress Is Free And Open Source

WordPress Is Extensible

Even if you aren’t a developer, you can easily modify your website thanks to WordPress’ huge ecosystem of themes and plugins:

Themes – these primarily change how your website looks. The foundation of your styling that drag and drop plugins like beaver builder need to change layouts. You can only have one activated at once (as opposed to plugins which are multiple and constantly working).
- THEME USED FOR YOUR SITE IS BEAVER BUILDER
Plugins – these primarily change how your website functions. Plugins can be something small, like a contact form, or huge, like creating an eCommerce store.
- PLUGIN LIST FOR YOUR SITE:
  - Beaver builder (4 plugins)
  - Wordfence Security
  - WooCommerce Store
  - SiteGround Optimizer

Currently, there are over 50,000 free WordPress and 5,000 free WordPress themes, as well as tons of premium options. That to say – you have plenty of choices! Here is a hand-picked list of the best WordPress plugins.

It’s Easy To Find WordPress Help

Because WordPress is so popular, it’s easy to find help if you ever run into any issues. There are heaps of…

Blogs
Tutorials
Forums
Facebook Groups
Developers

…that you can turn to for free and paid help if needed.

Student site example walk through:

A template is already installed, you use another template. You have to open it in BB and change it yourself.

PLUGIN LIST FOR YOUR SITE:

Beaver builder (4 plugins)
Wordfence Security
WooCommerce Store
SiteGround Optimizer

THEME LIST FOR YOUR SITE:

Beaver Builder

Our lessons will be explorations into your sites and diving deeper into how they work. Almost every class will have a time at the end to work on your sites. You can use the computers at the sound booth under my supervision. Bring laptops or ipads in to work on these things at school with permission.

The first things we need to do are edit our site settings. Everything from site title to robot viewing.

12/16/2020

Website Project

Develop and design an optimized website that reflects your topic. Due March 25th (3rd quarter end)

Limited quizzes until that date, so the project will be your make up most of your 3rd quarter grade. Grade is generously based on:

General Design - 50%

Organization - 30%

Optimization - 20%

Development

Hosting- SiteGround

CMS- WordPress.org

Domain/Registrar- GoDaddy to SiteGround (your-sites-name.bradenhamiel.com)

- - If you want to actually have an account yourself after the project is complete I can help you get a domain and hosting and we can transfer the site to your accounts.

Page Builder- Beaver Builder

Ecommerce- WooCommerce

Graphics- Canva or Microsoft paint (any editor you want)

Photos- unsplash, pixabay, ect.. Just make sure you have the legal right to post it on your site and that you follow the compression and cropping notes before uploading to your site.

Rules

You need more than one page.

It has to be responsive (function and look good on mobile devices)

You can only use the boring template that I will preinstall.

Do not install plugins!

We will be going through the project tasks with teacher reviews, peer reviews, and general tips and lessons on optimization until March 25th. Class time will be focused on preparing your site. Some classes up to the end of the project you will be allowed to bring a device into school and work on the project during study halls with permission.

By the end of the school year I will delete the sites after saving screenshots so you can still have images of it. If you want invest in the website after the project, I can help you get your website and domain transfered to your own hosting and/or registrar that you pay for. Usually hosting is about $5-15/mo and domains usually cost $5-20/yr. not including privacy protection which is usually over $10/yr.

12/15/2020

In class demonstration of domain registrars and hosting via GoDaddy and SiteGround.

Domain Registrars

Hold a domain that you pay yearly for.

Hosting

Hold the website files and CMS. Contains an IP address and nameserver info so you can point domains to your hosted site.

The DNS settings are controlled wherever your nameservers are pointed.

The DNS settings allow us to use temporary domain pointing via A records. A records need the IP address of where the site is hosted to point.

12/14/2020

Reviewing URLs

Find a domain that you want to use for your site.

We can use name.com to see if it’s available.

TLD

A top-level domain is one of the domains at the highest level in the hierarchical Domain Name System of the Internet. The top-level domain names are installed in the root zone of the name space.

Examples of popular TLD’s:

TLD	Common Uses
.com	Most popular, usually used for corporations, but can be used for any type of entity.
.org	Usually used by organizations (mainly nonprofits).
.net	Used for networks especiatlly computer networks.
.edu	Used for formal schools and universities.
.gov	Limited to United States governmental entities and agencies as well as qualifying state, county and local municipal government agencies.

ICANN

The Internet Corporation for Assigned Names and Numbers (ICANN /ˈaɪkæn/ EYE-kan) is an American multistakeholder group and nonprofit organization responsible for coordinating the maintenance and procedures of several databases related to the namespaces and numerical spaces of the Internet, ensuring the network's stable and secure operation.

They make rules about domains to keep them safe. For example, they don’t let you transfer a domain until after a waiting period after buying it or transferring it.

12/10/2020

Not in Codecademy:

**URL (*Uniform Resource Locator***)

address of a given unique file that is connected to the internet.

Basics: anatomy of a URL

Here are some examples of URLs:

https://developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Learn/

https://developer.mozilla.org/en-US/search?q=URL

Any of those URLs can be typed into your browser's address bar to tell it to load the associated page (resource).

A URL is composed of different parts, some mandatory and others optional. Let's see the most important parts using the following URL:

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

http is the protocol. The first part of the URL indicates which protocol the browser must use. A protocol is a set method for exchanging or transferring data around a computer network. Usually for websites it is the HTTP protocol or its secured version, HTTPS. The Web requires one of these two, but browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.

You need to point your domain to your IP.

Nameservers- permanent

A record- temp

MX record- email

www.example.com is the domain name. It indicates which Web server is being requested. Alternatively, it is possible to directly use an IP address, but because it is less convenient, it is not often used on the Web.

:80 is the port. It indicates the technical "gate" used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the HTTP protocol (80 for HTTP and 443 for HTTPS) to grant access to its resources. Otherwise it is mandatory.

/path/to/myfile.html is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.

?key1=value1&key2=value2 are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the & symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.

#SomewhereInTheDocument is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an HTML document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the #, also known as the fragment identifier, is never sent to the server with the request.

Note: There are some extra parts and some extra rules regarding URLs, but they are not relevant for regular users or Web developers. Don't worry about this, you don't need to know them to build and use fully functional URLs.

You might think of a URL like a regular postal mail address: the protocol represents the postal service you want to use, the domain name is the city or town, and the port is like the zip code; the path represents the building where your mail should be delivered; the parameters represent extra information such as the number of the apartment in the building; and, finally, the anchor represents the actual person to whom you've addressed your mail.

12/09/2020

*Text in red is on the quiz.*

Intro to HTML- Study Guide

HTML stands for HyperText Markup Language:

A markup language is a computer language that defines the structure and presentation of raw text.
In HTML, the computer can interpret raw text that is wrapped in HTML elements.
HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.

Ex 2: Elements

HTML is composed of elements. These elements structure the webpage and define its content. Let’s take a look at how they’re written.

The diagram to the right displays an HTML paragraph element. As we can see, the paragraph element is made up of:

An opening tag (<p>)
The content (“Hello World!” text)
A closing tag (</p>)

A tag and the content between it is called an HTML element. There are many tags that we can use to organize and display text and other types of content, like images.

Let’s quickly review each part of the element pictured:

HTML element — a unit of content in an HTML document formed by HTML tags and the text it contains.
HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.
Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.

Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

Ex 3: The Body

One of the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed to the screen. Here’s what opening and closing body tags look like:

<body>

</body>

Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body.

<body>

</body>

Work:

Add a body to your web page using the <body> element.
Add the following code between your opening and closing body tags:

<p>"Life is very short and what we have to do must be done in the now." - Audre Lorde</p>

Ex 4: HTML Structure

HTML is organized as a collection of family tree (or hierarchy) relationships. As you saw in the last exercise, we placed <p> tags within <body> tags. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element.

<body> <- Parent

<p>This paragraph is a child of the body</p> <- Child

</body>

In the example above, the <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, and the <body> element is considered the parent.

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendant elements is known as hierarchy.

Let’s consider a more complicated example that uses some new tags:

<body>

<div>

<h1>Sibling to p, but also grandchild of body</h1>

<p>Sibling to h1, but also grandchild of body</p>

</div>

</body>

In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are at the same level, they are considered siblings and are both grandchildren of the <body> element.

Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. You’ll learn more about webpage hierarchy when you start digging into CSS.

Instructions:

Add the paragraph below as a child of the div element.

<p>This paragraph is a child of the div element and a grandchild of the body element</p>

Ex 5: Headings / Hierarchy

Headings in HTML are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader’s attention. Other times, headings are used to describe content, like the title of a movie or an educational article.

HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content.

The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

<h1> — used for main headings. All other smaller headings are used for subheadings.
<h2>
<h3>
<h4>
<h5>
<h6>

The following example code uses a headline intended to capture a reader’s attention. It uses the largest heading available, the main heading element:

<h1>BREAKING NEWS</h1> | BREAKING NEWS

*** Not on Codecademy:

I don’t know why they don’t give you this from the get-go, but here is a list of all the HTML Tags you should know. If you have this list in front of you you can make a full (really basic design webpage). Walk through these with them.

Ex 6: Divs

One of the most popular elements in HTML is the <div> element. <div> is short for “division” or a container that divides the page's code (not visible on page) into sections. These sections are very useful for grouping elements in your HTML together. <div>s can contain any text or other HTML elements, such as links, images, or videos.

(Notice how my children of my div are indented)

<body>

<div>

<p>Great for grouping elements!</p>

</div>

</body>

<div>s don’t inherently have a visual representation, but they are very useful when we want to apply custom to our HTML elements.

I would group these elements together to add a styling to all of them at once.

Instead of this:

<h1 id=”style”>Who Am I?</h1>

<p id=”style”>My name is Brady.</p>

I can do this:

<div id=”biography”>

<h1>Who Am I?</h1>

<p>My name is Brady.</p>

</div>

Then in my CSS file, I will apply a certain style to the id “biography.”

#style {

color: red;

}

Then in my CSS file, I will apply a certain style to the id “biography.”

Ex 7: Attributes

“biography” in my code is an attribute. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. There are different types of attributes; but they all look the same:

<div id=”biography”>

The type of attribute is an id and the value is “biography”. It’s kind of like labeling different parts of my page. I separate the code of one part of my page and name the code something using an attribute. Here are the different types and their functions:

Class Names an element or group of elements, usually for styling.

Be able to name at least one attribute.

Ex 8: Displaying Text

If you want to display text in HTML, you can use a paragraph or span:

Paragraphs (<p>) contain a block of plain text.

<span> used to separate small pieces of content that are on the same line as other content.

Take a look at each of these elements in action below:

<p><span class=”fancy-font”>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p>

In the example above, there are two different <div>. The second <div> contains a <p> with <span>Self-driving cars</span>. This <span> element separates “Self-driving cars” from the rest of the text in the paragraph.

It’s best to use a <span> element when you want to target a specific piece of content that is inline, or on the same line as other text. If you want to divide your content into blocks, it’s better to use a <div>.

Ex 9: Styling Text

You can also style text using HTML tags. The <em> tag emphasizes text, while the <strong> or <b> tag highlights important text.

Later, when you begin to style websites, you will decide how you want browsers to display content within <em> and <strong> tags. Browsers, however, have built-in style sheets that will generally style these tags in the following ways:

The <em> tag will generally render as italic emphasis.

The <strong> will generally render as bold emphasis.

In grammar class you should have learned when to use these in titles of articles, boats, magazines, ect…

Ex 10: Line Breaks

<br> Makes a space between a line of content on the page.

The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: <br>.

The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.

<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately 4,260 <br> miles).</p>

The code in the example above will result in an output that looks like the following:

The Nile River is the longest river

in the world, measuring over 6,850

kilometers long (approximately 4,260

miles).

-------------------------------------------------------------

Lists:

Ex 11: Unordered Lists

In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.

In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.

The <ul> element should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list.

<ul>

<li>Limes</li>

<li>Tortillas</li>

<li>Chicken</li>

</ul>

In the example above, the list was created using the <ul> tag and all individual list items were added using <li> tags.

The output will look like this:

Limes
Tortillas
Chicken

Ex 12: Ordered Lists

Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.

You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.

<ol>

<li>Preheat the oven to 350 degrees.</li>

<li>Mix whole wheat flour, baking soda, and salt.</li>

<li>Cream the butter, sugar in separate bowl.</li>

<li>Add eggs and vanilla extract to bowl.</li>

</ol>

The output will look like this:

Preheat the oven to 350 degrees.
Mix whole wheat flour, baking soda, and salt.
Cream the butter, sugar in separate bowl.
Add eggs and vanilla extract to bowl.

Ex 12.5: Links (not on Codecademy!) aka hyperlinks

<a> tag is used to make normal text clickable. When clicked it will go to another page on the internet.

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

target attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
- Opening links in new tabs
And more...

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Ex 13: Images

The <img> tag allows you to add an image uploaded to the internet to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly.

The <img> tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image.

Ex 15: Videos

<video> element requires an opening and a closing tag.

I gave you the wrong code for this. This is the real code to make a video:

Video not supported

</video>

In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls: pause, play and skip.

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

12/08/2020

12/15/2020

In class demonstration of domain registrars and hosting via GoDaddy and SiteGround.

Domain Registrars

Hold a domain that you pay yearly for.

Hosting

Hold the website files and CMS. Contains an IP address and nameserver info so you can point domains to your hosted site.

The DNS settings are controlled wherever your nameservers are pointed.

The DNS settings allow us to use temporary domain pointing via A records. A records need the IP address of where the site is hosted to point.

12/14/2020

Reviewing URLs

Find a domain that you want to use for your site.

We can use name.com to see if it’s available.

TLD

A top-level domain is one of the domains at the highest level in the hierarchical Domain Name System of the Internet. The top-level domain names are installed in the root zone of the name space.

Examples of popular TLD’s:

TLD	Common Uses
.com	Most popular, usually used for corporations, but can be used for any type of entity.
.org	Usually used by organizations (mainly nonprofits).
.net	Used for networks especiatlly computer networks.
.edu	Used for formal schools and universities.
.gov	Limited to United States governmental entities and agencies as well as qualifying state, county and local municipal government agencies.

ICANN

They make rules about domains to keep them safe. For example, they don’t let you transfer a domain until after a waiting period after buying it or transferring it.

12/10/2020

Not in Codecademy:

**URL (*Uniform Resource Locator***)

address of a given unique file that is connected to the internet.

Basics: anatomy of a URL

Here are some examples of URLs:

https://developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Learn/

https://developer.mozilla.org/en-US/search?q=URL

Any of those URLs can be typed into your browser's address bar to tell it to load the associated page (resource).

A URL is composed of different parts, some mandatory and others optional. Let's see the most important parts using the following URL:

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

You need to point your domain to your IP.

Nameservers- permanent

A record- temp

MX record- email

12/09/2020

*Text in red is on the quiz.*

Intro to HTML- Study Guide

HTML stands for HyperText Markup Language:

A markup language is a computer language that defines the structure and presentation of raw text.
In HTML, the computer can interpret raw text that is wrapped in HTML elements.
HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.

Ex 2: Elements

HTML is composed of elements. These elements structure the webpage and define its content. Let’s take a look at how they’re written.

The diagram to the right displays an HTML paragraph element. As we can see, the paragraph element is made up of:

An opening tag (<p>)
The content (“Hello World!” text)
A closing tag (</p>)

A tag and the content between it is called an HTML element. There are many tags that we can use to organize and display text and other types of content, like images.

Let’s quickly review each part of the element pictured:

HTML element — a unit of content in an HTML document formed by HTML tags and the text it contains.
HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.
Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.

Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

Ex 3: The Body

<body>

</body>

Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body.

<body>

</body>

Work:

Add a body to your web page using the <body> element.
Add the following code between your opening and closing body tags:

<p>"Life is very short and what we have to do must be done in the now." - Audre Lorde</p>

Ex 4: HTML Structure

<body> <- Parent

<p>This paragraph is a child of the body</p> <- Child

</body>

In the example above, the <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, and the <body> element is considered the parent.

Let’s consider a more complicated example that uses some new tags:

<body>

<div>

<h1>Sibling to p, but also grandchild of body</h1>

<p>Sibling to h1, but also grandchild of body</p>

</div>

</body>

Instructions:

Add the paragraph below as a child of the div element.

<p>This paragraph is a child of the div element and a grandchild of the body element</p>

Ex 5: Headings / Hierarchy

The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

<h1> — used for main headings. All other smaller headings are used for subheadings.
<h2>
<h3>
<h4>
<h5>
<h6>

The following example code uses a headline intended to capture a reader’s attention. It uses the largest heading available, the main heading element:

<h1>BREAKING NEWS</h1> | BREAKING NEWS

*** Not on Codecademy:

Ex 6: Divs

(Notice how my children of my div are indented)

<body>

<div>

<p>Great for grouping elements!</p>

</div>

</body>

<div>s don’t inherently have a visual representation, but they are very useful when we want to apply custom to our HTML elements.

I would group these elements together to add a styling to all of them at once.

Instead of this:

<h1 id=”style”>Who Am I?</h1>

<p id=”style”>My name is Brady.</p>

I can do this:

<div id=”biography”>

<h1>Who Am I?</h1>

<p>My name is Brady.</p>

</div>

Then in my CSS file, I will apply a certain style to the id “biography.”

#style {

color: red;

}

Then in my CSS file, I will apply a certain style to the id “biography.”

Ex 7: Attributes

<div id=”biography”>

Class Names an element or group of elements, usually for styling.

Be able to name at least one attribute.

Ex 8: Displaying Text

If you want to display text in HTML, you can use a paragraph or span:

Paragraphs (<p>) contain a block of plain text.

<span> used to separate small pieces of content that are on the same line as other content.

Take a look at each of these elements in action below:

<p><span class=”fancy-font”>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p>

Ex 9: Styling Text

You can also style text using HTML tags. The <em> tag emphasizes text, while the <strong> or <b> tag highlights important text.

The <em> tag will generally render as italic emphasis.

The <strong> will generally render as bold emphasis.

In grammar class you should have learned when to use these in titles of articles, boats, magazines, ect…

Ex 10: Line Breaks

<br> Makes a space between a line of content on the page.

The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.

<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately 4,260 <br> miles).</p>

The code in the example above will result in an output that looks like the following:

The Nile River is the longest river

in the world, measuring over 6,850

kilometers long (approximately 4,260

miles).

-------------------------------------------------------------

Lists:

Ex 11: Unordered Lists

In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.

In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.

<ul>

<li>Limes</li>

<li>Tortillas</li>

<li>Chicken</li>

</ul>

In the example above, the list was created using the <ul> tag and all individual list items were added using <li> tags.

The output will look like this:

Limes
Tortillas
Chicken

Ex 12: Ordered Lists

Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.

You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.

<ol>

<li>Preheat the oven to 350 degrees.</li>

<li>Mix whole wheat flour, baking soda, and salt.</li>

<li>Cream the butter, sugar in separate bowl.</li>

<li>Add eggs and vanilla extract to bowl.</li>

</ol>

The output will look like this:

Preheat the oven to 350 degrees.
Mix whole wheat flour, baking soda, and salt.
Cream the butter, sugar in separate bowl.
Add eggs and vanilla extract to bowl.

Ex 12.5: Links (not on Codecademy!) aka hyperlinks

<a> tag is used to make normal text clickable. When clicked it will go to another page on the internet.

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

target attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
- Opening links in new tabs
And more...

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Ex 13: Images

The <img> tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image.

Ex 15: Videos

<video> element requires an opening and a closing tag.

I gave you the wrong code for this. This is the real code to make a video:

Video not supported

</video>

In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

12/08/2020

Ex 15: Videos

Video not supported

</video>

In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

MP4- most commonly supported and used. MPEG-4 Part 14 or MP4 is one of the earliest digital video file formats introduced in 2001. Most digital platforms and devices support MP4. An MP4 format can store audio files, video files, still images, and text. Additionally, MP4 provides high quality video while maintaining relatively small file sizes.

MOV- designed by Apple. Usually used for long form videos and feature length films

AVCHD- the most advanced with small file sizes and supporting 3D videos

GIF- low quality, no sound, but can be simpler than an mp4 with no controls. It automatically loops too. EZgif.com has a lot of great tools.

MARKETING TIME- Videos

KING OF KING OF CONTENT

Can be used in many channels: blogs, podcast, videos, graphics, live stream

live streams- Real time videos. Reach far.

Video editors:

Paid Adobe Premiere Pro.- the best! $20/mo. For students and teachers. Very complex.

Filmora- free, no watermark. Haven’t tried it yet.

Headliner- free, no watermark. Simpler editor. Magic tools where you can transcribe a video for a podcast or something.

Measuring Data

Don’t know why we havn’t talked about this yet??

Unit	Value	Size
kilobyte (KB)	10001 bytes	1,000 bytes
megabyte (MB)	10002 bytes	1,000,000 bytes
gigabyte (GB)	10003 bytes	1,000,000,000 bytes
terabyte (TB)	10004 bytes	1,000,000,000,000 bytes

**Know these!**

Homework

Complete Biography Group Powerpoint Project - due 5/18
Complete Peer Review handout - due 3/23
Complete contact us page by Thursday - due 3/1
Create About Us page with at least one heading and paragraph with actual text about your site - due 2/25
Hand in the brand handout - due 2/23
Give me links to three CTA’s that you like and why you like them (aka: make a pro’s and con’s list). - due 1/28
Complete your homepage’s top banner CTA using the principles in the CTA lesson. - due 1/26
Fill out the competitor analysis handout. - due 1/27
Create a list of your website's competitors. - due 1/20
Create or Begin creating your website's header. This is done by creating a beaver themer layout, setting the location to entire site, publishing, and designing the header in beaver builder. - due 1/14
Log into your site, go to general settings, and change the title and tagline of your site. - due 1/12
Practice using WordPress and Beaver Builder
- WP Demo: https://s1.demo.opensourcecms.com/s/39
- BB Demo: https://5ff357e48cc3a.demo.wpbeaverbuilder.com/demo/?fl_builder
Complete Website Project, - due 3/25
Exercise 15 in Codecademy

Class

Class Notes

What Is WiFi?

How does WiFi send data?

Virtual Meetings (Zoom, Google Hangouts, Skype)

1. Teleconferencing

2. Video Conferencing

3. Web Conferencing

IRC’s (Slack)

Virtual Meetings (Zoom, Google Hangouts, Skype)

1. Teleconferencing

2. Video Conferencing

3. Web Conferencing

IRC’s (Slack)

Biography Group Powerpoint Project

Group 1: Sage, Colton, Hanna, Faith

Group 2: Jessica, Maxwell, Albert, Mikayla

Group 3: Braxton, Emma, Gabe, Genevieve

Pointing Domain to Website Review

Site Traffic Data Collection

Migrating your Data Base

Export

Import

Connecting your Files to your DB

Wp-config in your files

What if you don’t want to migrate an ugly site to your new host?

Migrating your site to your hosting

Automatic

Semi-Automatic

Manually

Files

How to transfer your domain

Continuing website on your own….

Finding a good hosting provider as you leave my hosting

Find a hosting provider

Type of hosting

Companies

Finding a good domain

How to market your website

What platform?

How to market your website

How to make your site load faster:

Choose a good web hosting provider

Reduce image sizes

Minify JS and CSS files

Use advanced caching mechanisms with a caching plugin

Use a CDN

Enable GZIP compression

Cleanup WordPress database and posts (take out trash)

Deactivate or uninstall plugins

Keep external scripts to a minimum

Loading Speed

Tracking your speed

What is SEO?

1. Check the rights

2. Use the right file type

3. Scale down the dimensions

4. Shrink the file size

5. Name the image

6. Add ALT text

7. Upload an image sitemap

All in a hard days work!

How has your site map, homepage design, ect… change since you’ve created them?

What are some misconceptions you had about the project going in?

Website Finishing Touches:

Mobile-First Design Review:

How do search engines work?

Crawling: Can search engines find your pages?

SSL- Keeping Your Users Safe

Hacking

Securing your site

Favicons

Intro to Canva

Logo- cornerstone of your brand

Contact Us Page

Footers

Creating essential themer templates

Products

Posts

Categories