Friday, October 23, 2020

End of Blog

 Thank you for all that have read my blog for homework assignments. It is the end of this blog. I am in college now so no more high school homework. That is it.

Goodbye.



Monday, May 18, 2020

SP Project

    On 5/15/2020, I started development for the Spring Capstone Project (SP Project). First, I decided that I was going to do Late Imperial Chinese Art for the subject of the SP Project. Secondly, I designed my wireframe and storyboard for my SP Project which is a website by using Photoshop. Thirdly, I created new folders and new HTML, CSS, and JavaScript files for the website. In the first HTML file, I created the homepage for the website. I started with the <head> tags which had <meta> tags, <title> tags, <link> tags, and <html> tags. Inside the <body> tags, I had <nav> tags for the navigation menu, <main> tags for the main content of the site, and <footer> tags for the footer. Inside the <nav> tags, I have <div> tags, <ul> tags, <li> tags, <a> tags, and an <img> tag for the house icon to go back to the homepage. This navigation bar with all its components function as a list of links that go to the different sites but displays as a navigation bar with CSS display, position, margin, padding, and background-color. Inside the <main> tags, I typed in an <h1> tag for the title of the website, <img> tags for the images that represent the corresponding artists, <div> tags to position and encase the images and text, and <a> tags to make the images and text link to the sites of the website. Inside the <footer>, I typed in <a> tags for the links to the information about the website, wireframe, storyboard, and the reflection which is here. Next, I designed the information for the artists' pages. I used the same navigation bar and footer with minor differences to each of the webpages for the artists and their information. Inside those webpages, I typed in <h1>, <h2>, <h3>, <p>, and <img> tags to display information like a sort of mini article. Due to time constraints and lackluster information on Late Imperial Chinese Artists, there was little information to put inside the webpages. More content may be added if certain factors are met. Finally, in the citations page, I added all the links I used for the research of the Late Imperial Chinese artists and their information. Knowing how to build a project with a topic included is crucial to a web designer because it enables the web designer to make focused websites that convey a certain theme or subject that an employer or contractor desires.

This article will both be on my Blogger and on my SP Project Reflection page.






Friday, April 17, 2020

Internship (Paid) WBL Requirement

In the summer of 2019, I interned at Local Project with Ms. Carolina Peñafiel as my supervisor. I had all my documents/papers completed and my resume given to her. Once I began work,  I first had to make cones from paper. I had to use scissors, paper, tape, and staples to make the cones. The atmosphere of the internship was very focused, lively, and productive when I worked there. So after the first time working at Local Project, I had to do various activities and jobs there from handywork, to painting, to making websites/webpages for Ms. Carolina Peñafiel.  Now even though there were some issues during the internship that I will need to improve in the future, like the ability to speak professionally, I think it went smoothly overall. The internship was organized and with Ms. Carolina Peñafiel's exemplary leadership, I was able to do understand and complete the tasks she assigned me. I excelled at programming Ms. Carolina Peñafiel's website and assisted furnishing of the studio/worksite. I learned a lot from interning at Local Project with Ms. Carolina Peñafiel from how businesses are run to how to take the right photograph. My supervisor gave some advice on how bosses in companies want their employees to be and how to be an independent person that can support themself. At the end of the evaluation, Ms. Carolina Peñafiel said that I did a good job and that it was appreciated for all the handywork I did and how hard I worked. She also told me to be vigilant and practice social skills to get further in my career path.

REQUIRED WBL EVENT - SPEAKER SERIES 4/17/20 - CTE Career Event Senior Year (in-person or online)

Today on 4/17/2020, I learned about how a person who works in the film industry does their job. I learned that you have to navigate through people to get networked and to get tasks done. In a CTE Career Fair, you attend an event that presents speakers and showcases professions. It is important because it brings knowledge to people who may look for a job or advice for a job. A stage manager was present during the video conference in which she described the various activities she did. I did not research about stage manager or know her. I was not planning to apply to any colleges before the event. One criticism was that there was no person for web designers and the stage manager was more directly targeted towards the video production students. You could improve this by having a person who does web design next to the stage manager. The video conference was smooth and had a good connection. There were a lot of useful information for networking also. I can guarantee it going well by paying attention and asking questions to the speaker.  This event helps me understand how to get a job or be prepared for a job as both an individual and a web designer.





Thursday, March 26, 2020

WBL Workshop 5 (Mock Interviews) RJ Part 3

The purpose of Mock Job Interview Questions and Tips for a Successful Interview by Virginia Western Community College is to teach people what answers interviewers are looking for from their questions so that people can contribute to the company by working there. The first important point in the video is to be hygienic and professional so that you are presentable to the interviewer. The second important point in the video is to give background about yourself so the interviewer knows who you are.The third important point is to give the interviewer your strengths so that he or she can know the capabilities that you possess. The fourth important point of the video be realistic and be able to solve problems so that the interviewer knows that you're honest with yourself and are able to fix and issues that the company may have. The fifth important point of the video is to be interested in the job that you are applying for so that the interviewer knows that you actually want the job. The final point is to show dedication so that the interviewer knows that you are willing to do the work. Knowing how to respond to the questions the interviewer asks of you is important for getting hired for the job and allows you to earn revenue.

WBL Workshop 5 (Mock Interviews) RJ Part 2

The purpose of Job Search Tips (Part 13): How to not get hired by Snagajob is to teach people about the mistakes people should not make when getting, going, or having an interview. One important point is to be on time for the interview since interviewers do not have all day for just one person but are actually busy with tons of work. Another important point is to talk in a professional manner that is respectful and sophisticated to the interviewer so that the interviewer would not feel distressed or would actually consider picking you for the job. Furthermore, be proactive and responsive to the job or company you are wanting to go or at working for so that the interviewer or boss has a good impression on you. Also, pay attention to the interviewer or boss since that will increase your chances of getting the interview. Knowing how to succeed in an interview with these skills is important so that you can get hired and work for the job to get money to financially secure yourself.

Elevator Pitch WBL Workshop #5

The purpose of Elevator Pitch Examples for Students by Home at 30 is to teach people how to articulate an effective and professional elevator pitch. The important strategies that were used in the video for effective articulation of elevator pitches are giving background about yourself, describing your uniqueness, providing your goal or how it can benefit the company, and your call to action. The person in the video stresses short but concise pitches that other people can understand in a timely manner since people have short attention spans. Knowing how to do elevator pitches helps you get an interview or job that you are seeking because it allows for effective communication about yourself and the presentation of skills that are required to get the job.

Tuesday, March 10, 2020

Project 6 Master Your Finances Website

In this project, I built a website that teaches primarily teenagers about finance.

Project 5 Credit Score App

In this project, I built a website/app that estimates or predicts your credit score based on the user's answers. In the beginning of the project development, I created new HTML, CSS, and JavaScript files. In the HTML file, typed in  <!doctype html>, <html> tags, <head> tags, <meta> tags,  <title> tags, <link> tags, <body> tags, and <script> tags. I linked my CSS file through a <link> tags and JavaScript file through a <script> tags. Next, I typed in <nav> tags inside the <body> tags and inside the <nav> tags I typed in <div> tags and <a> tags to create the navigation menu. After that, I typed in <main> tags. Inside the <main> tags, I typed in <div> tags, <h1> tags, <form> tags, <input> tags, and <p> tags to create the questions and answers for the user. Below the <main> tags, I typed in <footer> tags that has <button> tags, <div> tags, <h5> tags, <p> tags, and <small> tags to create text explaining the disclaimer/terms of use for the website/app.

For the CSS, I typed in:

html {
min-width: 100%;
min-height: 100%;
max-height: 100%;
max-width: 100%;
box-sizing: border-box;
}

body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #34C400;
}

to make the website/app responsive to size changes.

Next I typed in:
#navbar {
display: flex;
position: relative;
width: auto;
height: 100%;
margin: 0;
padding: 0;
background-color: #E34D64;
overflow: hidden;
}

#navbar a {
width: 100%;
height: auto;
padding: 20px 15px;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
font-size: 18px;
font-weight: bold;
color: #000000;
text-decoration: none;
}

#navbar a:hover {
  background-color: #F3556E;
}

#navBtns {
position: relative;
text-align: center;
vertical-align: middle;
align-content: center;
align-items: center;
line-height: 30px;
border: none;
outline: none;
flex: 1;
}

to give color and size to the navigation menu with some user interface elements that make it easier to know what is clicked.

Next I typed:

#Estimator {
display: block;
position: static;
width: 100%;
height: auto;
margin: 0;
padding: 0px 0px 5px 0px;
background-color: #00FF62;
color: #000000;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: normal;
text-align: center;
}

.question {
display: none;
padding-bottom: 1%;
}

.question input[type="button"] {
width: 75px;
height: 50px;
margin: 25px 50px 25px 50px;
padding: 0;
color: #000000;
background-color: #A2EBFF;
border: solid 2px #000000;
border-radius: 5px;
font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
font-weight: bold;
font-size: 16px;
text-align: center;
cursor: pointer;
}

#creditScoreTxt {
display: none;
}

to give color, size, font weight, font family, and position to the main content of the website/app.

Lastly, I typed in:


#ftBtn {
width: 6%;
height: auto;
margin: 0;
padding: 0;
float: right;
cursor: pointer;
}

#upArrow {
width: 37.5%;
height: auto;
margin: 0;
padding: 0;
}

#txtSpace {
background-color: rgba(255,255,255,0.50);
margin: 0 auto;
padding: 0% 0% 2.5% 0%;
clear: both;
}

#ftText {
display: none;
}

#ftHeader {
display: block;
text-align: center;
margin: 0;
padding: 0;
}

@media only screen and (max-device-width : 1024px) {
#ftBtn {
width: 10%;
}

#upArrow {
width: 40%;
}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#navbar a{
display: block;
}
}

to style the footer with color, size, positioning, fonts, and space while also using the media query to change the navigation bar text positioning when a 320 pixel by 480 pixel screen condition is met.

For the JavaScript, I stored multiple variables from classes of <div> tags and entered them into functions to run the program as intended. The program gets the number 850 which is the maximum credit score a person can get and subtract 70-85 points based on if the user clicks on specific buttons. Then I typed in the code document.getElementById("").style.display to toggle the questions showing up as well as the final score out of 850 at the end of the questions. I used functions like:
function btn8() {
qa8.style.display = "none";
document.getElementById("creditScoreTxt").style.display = "block";
document.getElementById("creditScoreNum").innerHTML = maxCreditScore;
}
to display the next question while hiding the current question when the user clicks a button. Also, I typed:

//Shows or hides the footer when the up arrow is clicked.
function toggle() {
var clickedBtn = document.getElementById("ftText");

if (clickedBtn.style.display == "block") {
clickedBtn.style.display = "none";
}

else {
clickedBtn.style.display = "block";
}

console.log("clickedBtn");
  return;
}

which shows or hides the footer.
Knowing how to build a credit score website/app is useful to a web designer since it offers more options the web designer can create and gives knowledge whenever the web designer needs to create a website/app similar to this project.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Projects/credit_Score_App_P3/Credit_Score_App.html


Saturday, March 7, 2020

Junior Achievement (Senior Year)

On March 6, 2020 I went to PS/IS 128 which is an elementary school in Middle Village, New York.  I had to teach 4th graders with 3 other seniors about business and finance on this mandatory trip. Before  the trip, I prepared for the lessons to teach the 4th graders by rehearsing and memorizing the lesson plan  with the 3 other seniors who were my teammates. We planned out as many scenarios as possible and  decided to adapt to the rest of the scenarios. During the lessons, I went second in the order my teammates  and I agreed upon. I helped out my teammates with their lessons like holding up materials or helping out students during the lesson. When my lesson began, I first introduced myself to the students. I taught the students about the types of resources. I also taught the students about how an entrepreneur  uses resources to create products and services and vise versa. To do this, I first remind the 4th graders of  what an entrepreneur is and what good they provide. Next I had my teammates post the map of the United  States to teach the students about the different regions of the United State of America. Then I asked if  entrepreneurs vary between climates and regions. Once the 4th graders got around the answer that  entrepreneurs do vary between climates and regions, I had them complete a flier about creating a business from a resources and advertise that business. The students then shared their business to the class.  Furthermore, I taught them about capital resources, human resources, and natural resources with  vocabulary cards. Finally, I wrapped up the lesson with a recap and then the next lesson began with one of my teammates. After the lessons, my teammates and I went back home with the rest of the people on the  field trip. I taught the students because it was mandatory and I wanted to teach the students to expand their knowledge of the world around them. I learned that you had to engage with the students more and know the material better to teach students about a topic. I envision improving my social skills with this experience. One advice I'll give is that you need to actively engage your students to keep them focused and yearning to learn.

Sunday, February 9, 2020

CTE Expo

On 2/7/2020, I participated in the Career and Technical (CTE) Expo. The CTE Expo's objective is to advertise the CTE program to incoming students for them to join and practice our entrepreneurship skills. To prepare for the CTE Expo, I got dressed in appropriate attire, took care of hygiene, and got all necessary work done to show to the students. During the CTE Expo, I helped set up the computers and the websites for presentation. Next I greeted the incoming students and showed them around the CTE Expo. I guided them to my display or someone else's display. Then I talked and advertised to the incoming students about the benefits of the CTE program and for the mto join the CTE program. After all the interactions with the students, I got my belongings and left. I think that the organization of the CTE Expo went really well because of how everyone knew what they were supposed to do and automated the process was. I think that the room/furniture layout could be improved because it was difficult to navigate through the tables with the poster boards in a timely and efficient manner to get to the incoming students. I felt that the CTE Expo was really exuberant.

Tuesday, January 28, 2020

Smart Goals

Today, during 1/28/2020, I was assigned to make S.M.A.R.T. Goals. The short term goal I made was about healing my body from illnesses. I will ascertain this goal by applying medicine to myself. I will know when my goal has been reached when I do not have redness and coughing. The mid-term goal is getting an 80-90+ grade point average. I will ascertain this goal by studying the subjects that I have. I will know when my goal has been reached when I get my report card. The long term goal is improving my intelligence. I will ascertain this goal by learning about specific topics and/or subjects and gathering information from credible sources. I will know when my goal has been reached when I get do well on exams or get my report card.




My S.M.A.R.T. Goals.

Tuesday, January 14, 2020

Lab 12 Jason

In this lab, I used JavaScript and JSON to build a website with videos in it. First, I opened my zip file containing the HTML for Lab 12. All of the code for the HTML was complete already from <html> tags to <video> tags. For the CSS, I typed in html {min-height: 100%; min-width: 100%; max-height: 100%; max-width: 100%;} body {width: 100%; height: auto; background-color: #383838;} to make the webpage responsive to size changes and have a background color. Next I typed in .container {background-color: #F9A93e;} to make the background color of the <div> displaying the video orange. Then I typed in #videos-list {display: block; position: relative; float: left; height: 440px; width: auto; list-style-type: none;  overflow-x: hidden; overflow-y: scroll;} to make the column containing the videos have a defined size, no bullet points, and have a vertical scroll. After that, I typed in .col-md-12 {width: 100%; height: auto; background-color: #F04C6b;} that makes the top <div> red. Lastly, I typed in .col-md-3 {width: 210px; height: auto; background-color: #3C3C3c;} This makes the div containing the video list have a black background color. For the JavaScript, I placed in:

{
"youtubeId": "yrWOhhOsg2k",
"title": "ur cute",
"author": "narpy"
},
{
"youtubeId": "QabOws88zD4",
"title": "give me the ball papa",
"author": "jimmy2296"
},
{
"youtubeId": "Fa2irrYK09w",
"title": "Knights in gym",
"author": "Ordo Kromen"
}

to insert more videos into the webpage. Knowing how to use JSON is useful to a web designer because it allows the web designer to input updated information into their website without changing the information over and over again.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_12/Lab_12.html



Monday, January 13, 2020

WBL Workshop #4 Resume Writing

On January 13, 2020 I came to the Web Design room of my school to do a Work Based Learning (WBL) workshop. I sat down and listened to the workshop presentation by the WBL Coordinator about resume writing, building, and the importance of resumes. The most important points of the workshop was about the importance of persuading the employer to select you for a job with an excellent resume.  Skills like literary fluency and resume design are important to a web designer because it advertises their skills to potential employers for the web designers to make money and keep themselves sustained.

Friday, January 10, 2020

Lab 10 Cycle Simple Slideshow

In this lab, I implemented/fixed simple cycle slideshows on a pre-built webpage via a zip file. First, I downloaded the zip file and opened it up. Secondly, I linked all the CSS and JavaScript files onto the HTML file with <script> and <link> tags in the <head> and <body> tags. After that, I typed in id="subContent1" class="subColumn" data-cycle-fx="carousel" data-cycle-carousel-vertical="true" inside the bottom-left div containing images of a t-shirt, people in line, and alcoholic beverages. The images themselves have <img> tags with alt attributes that I added. Next, I typed id="subContent2" class="subColumn" into the bottom middle <div> containing text. Afterwords, I typed in id="subContent3" class="subColumn" for the bottom right <div> which contained images of music ads. Images have <img> tags with the alt attribute added in by me. Lastly, I typed in the javascript to make the slideshow function as intended inside <script> tags with:

$(document).ready(function(){

$('#subContent1').cycle({
fx: 'scrollVert',
speed: 200,
timeout: 5000,
delay:3000
});

$('#subContent2').cycle({
fx: 'scrollHorz',
speed: 200,
timeout: 5000,
delay:3000,
rev: true,
slides: "> div"
});

$('#subContent3').cycle({
fx: 'fade',
speed: 200,
timeout: 5000,
delay:3000
});
});

This JavaScript code cycles through the images of the bottom left div vertically, cycles horizontally through the texts of the bottom middle div, and cycles through the images of the bottom right div by fading the images away to the next one. Slideshows are useful to web designers because it grants the web designers access to more tools in their arsenal to build and improve their website.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_10/


Thursday, January 9, 2020

Lab 9 Carousel

In this lab, I created a carousel from the images and links given by the website from a zip file. First, I downloaded and opened up the zip file. Next, I linked most of the CSS and JavaScript files onto the HTML file with <script> and <link> tags. After that, I made <div> tags with ids in them to align the images, texts, and links to the correct order. After that, I typed in more <div> tags that encompassed <span> and <a> tags that are used to navigate the carousel. Carousels are useful to a web designer because it allows more options to the web designer and can enhance the page.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_09/


Lab 8 Random Testimonials Troubleshooting

In this lab, I fixed the website that was given to me via a zip file. First up, downloaded and opened up the zip file. Next I looked through the code to see if there was any errors like missing semicolons or wierd syntaxes. Then I noticed that the multiple texts did no change right below the top image. So I typed in <script> tags to link my JavaScript file to the HTML file to make the text change. I typed into the JavaScript:
$(function(){
"use strict";
var pressQuotes = [];
pressQuotes[0]="NAPS is by far the most significant cultural force of the decade. — New York Times";
pressQuotes[1]="These days sleeping at your desk is not just acceptable, it's encouraged. — The Atlantic";
pressQuotes[2]="NAPS has changed the way people think about sleep, on a grand scale. — Washington Post";
pressQuotes[3]="Happiness increased 200% since NAPS began promoting siestas. — National Science Review";
pressQuotes[4]="NAPS has ushered in a new era of sleep. — USA Today";
pressQuotes[5]="Not surprisingly, more siestas means more productivity. — Wall Street Journal";
pressQuotes[6]="NAPS is doing the hard work of helping people get the rest they need. — U.S. News";

var rando = Math.floor(Math.random()*pressQuotes.length);

$("#press-quote").html(pressQuotes[rando]);
});


which changed the text everytime the page was reloaded. Knowing how to troubleshoot code is useful to a web designer when debugging and fixing their websites.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_08/



Lab 7 Simple Accordion

In this lab, I created a simple accordion with HTML, CSS, and JavaScript. To do this, I first created new HTML, CSS, and JavaScript files. The <html>, <head>, <body>,  <meta> and <title> tags were present in the HTML file. Thirdly I linked my CSS and JavaScript files via <link> and <script> tags in the <head> and <body> tags. Fourthly, I typed in <div class="center"><h1>Lab 7</h1><h2>Wei Jian Zhen</h2><h3>1/2/2020</h3></div> to create the header of the lab. I put some <br> tags afterwords to create a line break for the next content. Next, I typed in <dl> tags which are description list tags. Inside the <dl> tags, I typed in <dt> tags which are terms/names of the description list. Inside the <dt> tags, I typed in <dd> tags which defines the description list terms/names. Inside the description list, I typed in text so that <dt> tags show a question and <dd> tags show an answer. For the CSS, I typed in html {min-width: 100%; min-height: 100%; padding: 0; margin: 0;} body {
min-width: 100%; min-height: 100%;} to make the webpage responsive to size changes. I typed in dl {width: 100%; height: auto;} to give the description list a defined size. I typed in dt {background-color:#0090FF; width: 80%; height: 45px; border-style: solid; border-color: white; border-radius:4px;
color: white; font-size: 25px; cursor: pointer;}  to give the <dt> tags a background color of blue, width of 80% of its original width, height of 45 pixels, a white border, white text color, font size of 25 pixels, and a change in the mouse cursor when at the <dt> tags. Next I typed in dt:hover { background-color:#00D0FF;} to further indicate that the mouse is at the <dt> tags. After that, I typed in dd {width: 75%; height: 40px; background-color:#DBDBDB; object-position: center; border-radius:4px; font-size: 20px;} to give the <dd> tags 75% of its original width, a height of 40 pixels, background color of grey, center the text, a border, and a font size of 20 pixels. To center the content, I used the class .center { margin-left: auto; margin-right: auto;margin-top: 3px; margin-bottom: 3px;
text-align: center; }. For the JavaScript, I typed in $(document).ready(function(){$("dd").hide(); $(".answer").hide(); $("dl").on("mouseover", "dt", function(){ $(this).next() .slideDown(300) .siblings("dd") .slideUp(300);});}); to make the <dd> tags show when it is sliding down the <dt> tags and when the mouse cursor is at the <dt> tags. Knowing how to use accordions is useful to a web designer as it gives the web designer another tool they can use to enhance their websites.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_07/Lab_7.html


Wednesday, January 8, 2020

Lab 11 AJAX load

In this lab, I used jQuery AJAX, which assists in loading data from a server without a browser page refresh, to load a text file onto the HTML file when the user presses the button. To do this, I first downloaded the zip file given to me for the lab. Secondly, I opened my HTML file to see what was inside. I had my <html>, <head>, <meta>, <title>, <script>, <body>, <div>, and <button> tags as a preset for me. Thirdly, I typed in <div id=”head”><h1>Lab 11</h1><h2>Wei Jian Zhen</h2><h3>1/8/2019</h3></div> to make the heading of the lab. Fourthly, I surrounded the <div id=”div1”> <h2>Let jQuery AJAX Change This Text</h2></div> and <button>Get External Content</button> with <div id="main"></div> to style the content. Next, I created a CSS file to style the webpage. I typed inside the CSS file html {min-width: 100%; min-height: 100%; max-width: 100%; max-height: 100%;} and body {width: 100%; height: auto; background-color: cyan;} to make the html document responsive to any changes to the document’s width or height and have a background color of cyan for the page. After that, I typed in #main {width: 50%; height: auto; margin: 0 auto; text-align: center; background-color: aquamarine; border: 1px solid #000000;} to make the <div id="main"></div> half its width, have proportionate height in response to the width, center the div, center the text and button inside the div, have a aquamarine background color, and a thin black border around the div. Afterwards, I typed in #main button {font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 32px; background-color: ghostwhite; color: black; border: 1px solid #000000; margin: 5px; cursor: pointer;} to style the button inside the div with a font family of Lucida Granda, font size of 32 pixels, background color of ghostwhite, text color of black, a black thin border, space around the button, and to turn the cursor into a pointer. Then I typed in #head { text-align: center;} to center the heading with the <h1>, <h2>, and <h3> tags inside. Furthermore, I typed in #div1 {text-align: center;} to center the text above the button. Lastly, I changed the JavaScript inside one of the <script> tags which loads the txt file to the HTML document. JQuery AJAX is useful to web designers because it allows web designers to change text almost instantaneously without changing the HTML document and reloading the webpage, as that process is slower.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_11/Lab_11.html