Web Design and Development II Assignments (subject to change)

May 20

Fix Web 1 code

  • Objective: Troubleshoot and fix a page
  • Open the folder fix mysite 05-20-19 from your folder.
  • Fix the code so the slider works on the comics page.

May 6

Fix Web 1 code

  • Objective: Troubleshoot and fix a page
  • Open the Dharma index6.html page from your folder.
  • Fix the code so the arrows show on the slider.

Apr 22

Joomla!

  • Objective: Build a responsive website using Joomla!, a Content Management System (CMS)
  • Go to https://www.joomla.org/
  • Introduction
  • Content
    • How to Navigate the Joomla Administrator Area
      In this video, you'll take a tour of the Joomla administrator interface. You'll learn about all of the main areas of the interface, including the dashboard, main menu, extensions and more.
    • The Joomla Content Workflow
      In this video, you'll learn about the Content Workflow for Jooma: CASh: Categorize Add Show This process will help you quickly build categories, articles and menu links.
    • How to Create Categories
      In this video, you'll see how to create categories in Joomla. Following the plan from earlier videos, you'll create categories called About, Attractions, Festivals, Transportation and more. Rod also gives his recommendation for how to deal with the "Uncategorised" category.
      Your categories should like like this
      howtocreatecategories.JPG
    • How to Create Articles in Joomla
      In this video, you'll start to add the articles we planned earlier in this class. Here are the names of the 12 articles you'll create:
      • About category: Joomlaville Climate (this is later referred to as JoomlaVille Overview), Joomlaville Location, Joomlaville History
      • Attractions category: Museum, Zoo, Aquarium
      • Festivals category: New Years, Independence Day, Mother Day
      • Transportation category: Train Station, Bus Station, Airport
      • https://www.ostraining.com/books/j3e/intro/
        It seems the video skips making the Welcome to Joomla article, this is used for the index page, which is shown at 2'38". The text for the article is also from the book but Chapter 4.
        You can make this now and set it as a featured article so the pages look the same. It is covered in the video "How to Use Featured Articles".
      • Creating More Joomla Articles
        In this video, you'll continue to add the articles we planned earlier in this class. As a reminder, these are names of the articles you'll create:
        • About category: Joomlaville Overview, Joomlaville Location, Joomlaville History
        • Attractions category: Museum, Zoo, Aquarium
        • Festivals category: New Years, Independence Day, Mother Day
        • Transport category: Train Station, Bus Station, Airport
      • How to Add Formatting, Tags and Images to Joomla Articles
        In this video, you'll see how to use the formatting options in Joomla's text editor. You can add bold and italic text, plus bulleted lists. You can also add Tags to categorize your content, decide when your article is published and add metadata for search engines.
        • Minor changes are made to the Climate article and tags are added.
        • At 2'42" it seems as the name of the climate article gets changed to Joomla Overview.
        • Also change the alias to joomlaville-overview
      • How to Link to Articles
        You have completed Parts 1 and 2 of the CASh workflow. In this video, you'll complete Step 3: Show. You'll see how to create menu links to show your content to visitors.
        • You are creating menus for each of the categories to appear in the left sidebar.
        • At 4'03" it has you select the Joomlaville Overview article for the menu. This was previously the Climate article.
        • Finished menu
          How to Link to Articles
      • How to Link to a Category Blog
        In this video, you'll create a blog layout which shows several articles. A Category Blog will automatically update to show all the new articles in a particular category. You'll also see how to add a "Read More" link and set up teaser versions of your articles.
        • The new Attractions Menu
          How to Link to a Category Blog

        • The Attractions Category Blog with two columns
          How to Link to a Category Blog
        • The Attractions Category Blog with one column
          How to Link to a Category Blog

      • How to Link to a Category List
        In this video, you'll create a list of articles in a particular category. As with the previous examples, you'll create a menu, menu links and a module.
        • This is the view after changing the List Layouts options for the menu.
          How to Link to a Category List
      • How to Use Featured Articles
        In this video you'll write a "Welcome to Joomlaville" article that will appear on your homepage. To make this work, we'll use the Featured Article option in Joomla.
        • This shows the new Festivals Menu.
          How to Link to a Category List
      • Finishing Up Our Menus
        In this video, we finish up the CASh workflow that we planned earlier in the class. This involves adding several articles to a new menu. You'll also see how to rearrange modules.
        • Preview
          Finishing Up Our Menus
      • How to Add Images to Articles
        In this video, you'll see how to upload, organize and add images to your Joomla site. You'll see how use the Media Manager, insert images into articles and how to use the "Intro Image" feature.
        • Your page may not look the same as you need to find your own museum image.
          How to Add Images to Articles

      • How to Change the Article Options
        In this video, you'll explore Joomla's Article Options. These allow you to set the global options for your site, although you can also override them on individual articles.
        • This is the preview at 2'57". The text on your page may not match exactly.
          How to Change the Article Options
         
  • Extend
    • Understanding Joomla Extensions
      As we continue to build the Joomlaville site, we turn our focus to Joomla extensions. There are five different types of extension:
      • Components
      • Modules
      • Templates
      • Plugins
      • Languages
    • How to Use the Banners Component
      In this part of the class, you'll learn about Joomla's core extensions. In this first video, you use Banners component that allows you to show advertising banners on your site.
      • Breadcumbs and Banner need to be switched and your link should function.


    • How to Use the Contacts Component
      The Contact component allows you to create contact forms for your site. Your contact forms can contain email addresses, phone numbers, addresses and more.
      • The following show the new Contact Us menu item, the contact page and the contact information for the mayor. You will need to find your own image for the mayor.
        How to Use the Contacts Component

        How to Use the Contacts Component

        How to Use the Contacts Component
    • How to Use the Joomla Update Component
      When a Joomla update is available, a message will appear in your administrator area. The Joomla Update component allows you to update your site smoothly with just a single click. 

      Note: you won't have to use this component if you're using the Joomla demo site. The demo site is automatically updated for you.
    • How to Use the Messaging Component
      The Messaging component allows you to send private messages between users. These users must have at least "Manager" status on your Joomla site.

      For the grade, show me that you created a new user.
    • How to Use the News Feeds Components
      The News Feeds component allows to use RSS Feeds to show news from other sites. After you have set up the News Feeds, the news will be automatically updated.
      • The link should show on the Joomla home page in the Main Menu.
        How to Use the News Feeds Components
    • How to Use the Redirect Component
      The Redirect component collects all the broken links and 404 errors on your site. It stores all those bad URLs and allows you to redirect them to URLs that do work correctly.
      • This will be verified by going to http://yoursitename/index.php/joomlaville-locations to see if it redirects to http://yoursitename/index.php/joomlaville-location
        How to Use the Redirect Component

        How to Use the Redirect Component
    • How to Use the Search Component
      The Search component offers a simple search for your site. You can allow your users to use the search via a module or a menu link.
      • Remember his preview will look different
        How to Use the Search Component

        The preview below shows some of the search plugins turned off
        How to Use the Search Component
    • How to Use the Smart Search Component
      The Smart Search component is more powerful alternative to the normal Search component. Smart Search offers "Advanced Search" options so that visitors can drill down more accurately. You can also create completely custom Search Filters.
      • Note the order on the menus is different in the video. You may need to reorder the menus on the Modules screen so Search is above About.
        How to Use the Smart Search Component

        To show you created the filter search zoo as he did in the video.
        How to Use the Smart Search Component
    • How to Use the Module Manager
      In previous videos, we've created modules. In this video, you'll learn much more about modules. You'll see how to position modules in different parts of your site and how show them on certain pages.
    • The Latest Articles menu is below the Main Menu. In the video it is above it. Positioning can be changed in the Module screens and is addressed at 5'26".
      How to Use the Module Manager

      The Welcome module in addition to the Most Read module.
      How to Use the Module Manager

      The Welcome module is gone after logging in. You must set the Access to guest.
      How to Use the Module Manager
    • How to Use the Plugin Manager
      In this video, you'll explore plugins. The plugins are easy to ignore, but play a very important role on your site. Plugins enable everything from authentication, to editor plugins, caching and much more.

      Component = engine. Does the heavy work
      Module = dashboard. Displays information
      Plugin = sparkplug. Helps with small tasks
      Tamplates = paint job
      Languages = translations

      The welcome module moved to the bottom of the article.
      How to Use the Plugin Manager
    • How to Use the Language Manager
      The Language Manager allows you to translate your Joomla site into other languages. With a single click you can install translations that range from Afrikaans and Albanian to Vietnamese and Welsh.

      Please add Spanish as a site language. Show me this screen.
      How to Use the Language Manager

      Example of the language override in the login module.
      How to Use the Language Manager
    • Introduction to the Joomla Extensions Directory (JED)
      The best place to find new extensions for your site is the Joomla Extensions Directory, or JED. The JED provides lots of information about each extension so you can easily decide which one is right for you. Some of the extensions on the JED are free, and some you will need to pay for.

      You should be able to find JCE by searching for it... https://extensions.joomla.org/extensions/extension/edition/editors/jce/
    • How to Install Extensions via Install from Web

      Show me your editor to verify JCE was installed.
    • Design
        • What is a Joomla Template?
          In this video, we'll introduce you to Joomla templates. What are templates and where can you get them from?
          Template Workflow
          • Research
          • Download
          • Upload
          • Modules
          • Modify
        • How to Install a New Template
          In this video we'll show you how to download and install a template called Breeze. This is the example template that we use in many of our Joomla video classes. You'll see how to install and configure a new template, putting modules into the correct positions and setting up your menus.

          The template is at https://www.ostraining.com/breeze/

          The new template.
          How to Install a New Template

      • How to Modify Your Template
        Now that you have your template set up, we'll show you how to modify the color and design of the template. Each template will have different options, ranging from the very simple to the very complex.
      • Site Cleanup
        This is one of the final videos in this class and we're going to tidy up and complete some of the work we've done so far. You'll see how to place your modules in the correct position and also upload a logo and some images.

        The Joomlaville Logo at the top of the image and the Attractions footers at the bottom.
        Site Cleanup
  • People
    • How to Use the User Manager
      In this part of the class, we're going to talk about creating accounts for your users. You'll see how users are created and how you can control their basic options.
    • How to Manage User Registration
      By default, user registration in Joomla is disabled. You can enable registration to allow people to join your site. In this video, you'll learn how you can manage the registration process for your Joomla site.

      Show me the screen after you have signed up a new user.
      How to Manage User Registration
    • How to Use Access Control
      Access Control in Joomla is the process of deciding what your users can see and do. By default, there are five access levels that control what people can see:
      • Public
      • Guest
      • Registered
      • Special
      • Super Users
  • Find and install a different template.
    • Show me when you are done.
    • Change back to the Breeze template.
    • Install a template other than Breeze.
    • Modify colors, fonts, headings, etc. It must look significantly different.
  • Manage
    • Maintenance and Security
      In the final video of this class, we'll show you how to maintain your Joomla site and keep it safe. You'll see how to take your site offline, run updates and protect your logins with 2-factor authentication.
  • How to Maintain a Joomla! 3 Site
    In this class we show you how to manage a Joomla 3 site. Rod explains user access control. He also shows you how to maintain, backup, update and move your Joomla site.

April 19

DUE: WordPress Site

Download your WordPress Site

Mar 22

Resume Quiz in Google Classroom

Mar 4

WordPress

  • Objective: Build a responsive website using Wordpress, a Content Management System (CMS)
  • Install Wordpress app on Go Daddy-Espy
  • Log into the admin area from the email you received.
    • For example: http://respinola.com/ruiza/wp/wp-admin/
  • Example WordPress sites
    • Choose one of the sites at https://wordpress.org/showcase/ to replicate.
    • Show me the site you are using.
    • Recreate the layout of the site, not the content.
    • You must have a minimum of 5 pages.
    • Use at least five plugins of your choice. One can be a backend utility such as a page editor.
    • You must edit the CSS. Create notes as proof of the edits.
    • The content (including images) cannot be placeholder or filler.
    • https://www.wix.com/blog/2017/01/7-food-trucks-websites-on-the-road-to-success/
  • If you can't think of a site to make, create a website for a food truck.
    • Home
    • Menu-Food items
    • Feedback/Comments
    • About/History
    • Staff
    • Add several widgets
    • Add social media buttons and feeds.

How to Create a Website: An easy, step-by-step guide from a web developer

  • https://websitesetup.org/

WordPress tutorials

WordPress Tutorials

Mar 1

DUE: your site

  • All elements must be in your site
  • Must include at least 10 pages

Feb 15

The following are due

Feb 6

Restructure site

  • Objective: Build a responsive website using HTML and CSS
  • https://getbootstrap.com/
  • https://www.w3schools.com/bootstrap/bootstrap_templates.asp
  • https://startbootstrap.com/templates/
  • https://www.templatemonster.com/bootstrap-website-templates/
  • https://bootstrapmade.com/

Feb 4

Nav/Menu

  • Check your email.
  • I saved a folder to your network directory to use for the menu.

Feb 1

Nav/Menu

  • It must be responsive

Jan 25

DUE: Favicon and Social media Icons

Jan 13

Owl Carousel

  • Google it and download the zip folder

Jan 10

Fix Code

  • Objective: Troubleshoot and fix a page
  • The directory "fix1" or "fix2" is in your folder.
  • The home page needs to have two columns side-by-side.
  • The pics page needs to have the images arranged 3x3.

go to https://alligator.io/css/cropping-images-object-fit/

Jan 8

Fix Code

  • Objective: Troubleshoot and fix a page
  • The directory "fixthis" is in your folder.
  • The home page needs to have two columns side-by-side.

Nov 14

Fix Code

  • Objective: Troubleshoot and fix a page
  • Copy and paste the code into Brackets.
  • The picture areas needs to be centered on the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chicago</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

* {
box-sizing: border-box;
}

body {
margin: 0;
font-size: 20px;
color: #000;
background-color: #203663;
font-family: Verdana, Arial, sans-serif;
}


a:link {
color: #06132B;
}
a:visited {
color: #06132B;
}
a:hover {
color: #FFFFFF;
}
a:active {
color: #06132B;
}

.wrapper {
max-width: 1000px;
width: auto;
background-color: #203663;
padding: 1em;
margin-left: auto;
margin-right: auto;
}

.header {
background-color: #546DA0;
color: #2C3539;
padding: 20px;
text-align: center;
}

.topnav {
overflow: hidden;
background-color: #6a6a6a;
}

.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.topnav a: hover {
background-color: #000;
color: white;
}

.row {
background-color: #375081;
line-height: 1.5em;
}

.column {
float: left;
padding: 10px;
text-align: center;
width: 100%;
background-color: #375081;
}
.footer{
max-width: 1100px;
background-color: #546DA0;
margin-right: auto;
margin-left: auto;
border: 4px solid #000;
display:block;
overflow: hidden;
clear:both;
line-height: 1em;
padding: 2em;
text-align: center;
width: auto;
}

.iv{
width: 30%;
height: auto;
margin: 10px;
}
@media (max-width: 600px) {

.column {
width: 100%;
}
img{
width: 100%;
height: auto;
float: none;
clear: both;
}
.iv {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 10px;

}
}

</style>
</head>
<body>
<div class= "wrapper">
<div class= "header">
<h1>Chicago</h1>
<p>The Windy City</p>
</div>
<div class="topnav">
<a href ="index.html">Home</a>
<a href="/links.html">Favorites</a>
<a href="/pics.html">Pictures</a>
<a href="/cubs.html">Sports</a>
<a href="/vote.html">Elections</a>
</div>

<div class="row">
<div style="margin-right: auto; margin-left: auto; display: table; width: 100%;">

<a href="/images/aquarium1.jpg">
<img class="iv" src="/images/aquarium1.jpg" alt="This is the description of the picture." title="Shedd Aquarium">
</a>

<a href="/images/riverwalk.jpg">
<img class="iv" src="/images/riverwalk.jpg" alt="This is the description of the picture." title="The Chicago Riverwalk">
</a>

<a href="/images/navypier.jpg">
<img class="iv" src="/images/navypier.jpg" alt="This is the description of the picture." title="Navy Pier">
</a>

<a href="/images/fieldmuseum.jpg">
<img class="iv" src="/images/fieldmuseum.jpg" alt="This is the description of the picture." title="Field Museum">
</a>

<a href="/images/planet.jpg">
<img class="iv" src="/images/planet.jpg" alt="This is the description of the picture." title="Alder Planetarium">
</a>

<a href="/images/art2.jpg">
<img class="iv" src="/images/art2.jpg" alt="This is the description of the picture." title="The Art Institute of Chicago">
</a>

<a href="/images/tilt.jpg">
<img class="iv" src="/images/tilt.jpg" alt="This is the description of the picture." title="Chicago Tilt">
</a>

<a href="/images/lpzoo.jpg">
<img class="iv" src="/images/lpzoo.jpg" alt="This is the description of the picture." title="Licoln Park Zoo">
</a>

<a href="/images/chinatown.jpg">
<img class="iv" src="/images/chinatown.jpg" alt="This is the description of the picture." title="Chinatown">
</a>
</div>
</div>
<div class="footer"><p><p class="p1"><a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</a></p></div>
</div>
</body>
</html>

Nov 7

CSS Test 2

  • Objective: Build a responsive website using HTML and CSS Grids
  • Complete in Google Classroom

Oct 18

Job opportunities:

Oct 12

Make a responsive layout using CSS

  • Objective: Build a responsive website using HTML and CSS Grids
  • DUE: Layout for both pages
    • Please include background colors for each area.

Oct 9

CSS Test 1

  • Objective: Build a responsive website using HTML and CSS Grids
  • Complete in Google Classroom

Oct 8

Make a responsive layout using CSS

  • Objective: Build a responsive website using HTML and CSS Grids
  • Create mysite folder with an assets sub directory.
    • Save all site files there.
  • Your layout will be similar to the images below.
    Index PageSub Page
  • You will receive a weekly grade for your progress on your site.
    • Evidence of progress will be notes you make in your code.
    • You will also be saving screenshots of both pages of your site. One needs to be full screen and the other mobile.
    • Make a new page to hold the pics so they can be uploaded to your site.
    • The files will be saved as the date and the page. For example, "12-11-18 index full.jpg" and "12-11-18 index mobile.jpg" and "12-11-18 sub full.jpg" and "12-11-18 sub mobile.jpg".
  • Wrapper (container), Header, Menu, left and right content areas (main and sidebar), footer.
  • Divide the footer into three columns using a grid or divs.
  • Add divs to the sidebar.
  • Build only the index page and one sub page.
    • This means a page with actual content.
  • The nav bar in the menu should be responsive and have at least one dropdown. Just use <a href ="#">Link</a> for the links for now.
  • Appropriate CSS for all classes.
  • Make an external stylesheet.
    • Organize your styles by order of appearance in the page.
    • And use comments.
  • Create several heading styles as well as styles for text in the body.
  • Responsive for desktop, tablet and mobile.
  • Use place holder images and text https://loremipsum.io/ and https://loremflickr.com/.
  • Upload using Filezilla to the Go Daddy server. I will supply the FTP info.
  • Examples
    • http://www.os-templates.com/premium-website-templates/transform
    • https://templated.co/solarize
    • https://w3layouts.com/preview/?l=/radiant-energy-industrial-category-bootstrap-responsive-web-template/
    • https://templated.co/p/9265150585917340
    • https://www.w3schools.com/css/css_templates.asp
  • use the @font-face rule or https://developers.google.com/fonts/docs/getting_started
  • Incorporate http://fontawesome.io/
  • Create a favicon.
  • Create a custom logo for your business.
  • Carousel
    • OWL Carousel
    • BootStrap
    • W3 Schools
    • GitHub
    • jcarousel
    • Must have a caption on the pictures and must be linked.
  • Social Media icons
  • Social Media feed
  • FACEBOOK (View PDF Directions)
    • Once installed change the account from lowryhighschool and change some of the settings such as width, header, data, etc.
    • Step 1: Include the JavaScript SDK on your page once, ideally right after the opening body tag.
      <div id="fb-root"></div>
      <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
    • Step 2: Place this code wherever you want the plugin to appear on your page.
      <div class="fb-page" data-href="https://www.facebook.com/lowryhighschool/" data-tabs="timeline" data-width="300px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
      <blockquote cite="https://www.facebook.com/lowryhighschool/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/lowryhighschool/">Albert M Lowry High School</a></blockquote></div>
    • The code above inserts a the stream below.
  • FACEBOOK IFRAME METHOD
      • <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fnba&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  • TWITTER
    • <div class="editor-pics twitter">
      <a class="twitter-timeline" href="https://twitter.com/LowryHigh" data-widget-id="543900127291658240" width="300" height="400" data-link-color="#0066ff"
      data-border-color="#0066ff" data-chrome="noheader light">Tweets by @LowryHigh</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      <div class="clearfix"></div>
      </div>
    • Twitter 1
    • Twitter 2
    • Twitter 3

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>My Great Business Inc.</title>
    <!-- for-meta-tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="One brief sentence about your website/business." />
    <meta name="keywords" content="YOU NEED TO ADD YOUR OWN KEY WORDS" />
    </head>

Sep 27

Tutorial: How to build a HTML5 website from scratch

Sep 26

Complete the tutorials at

Grid Guide

Sep 21

Fix the following

  • The right div needs to be the same height as the two left divs combined.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test page</title>
<style type="text/css">
<!--
html, body{height: 100%}
body{
font-size: 14px;
color: #E9F319;
background-image: url(images/backround2.jpg);
margin-top: 0;
margin-bottom: 0;
margin-bottom: 0;
height: 100%;
background-attachment: fixed;
}
.wrapper{
max-width: 1100px;
background-color: rgba(204, 0, 0, .6);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: block;
overflow: hidden;
clear:both;
line-height: 1.5em;
padding: 2em;
width:auto;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
min-height: 100%;
}
.header{
max-width: 1100;
background-color: rgb(0, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: block;
overflow: hidden;
clear:both;
line-height: 1.5em;
padding: 2em;
width:auto;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
}

.content{
display: table;
width: 100%;

}
.left-top{
max-width: 550px;
background-color: rgb(0, 111, 26);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: table-cell;
overflow: hidden;

line-height: 1.5em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
height: 50%;
width: 50%;
}
.left-bottom{
max-width: 550px;
background-color: rgb(235, 255, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: table-cell;
overflow: hidden;
line-height: 1.5em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
float: left;
width: 50%;
height: 50%;
}
.right{
max-width: 550px;
display: table-column-group;
background-color: rgb(24, 0, 157);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: table-cell;
overflow: hidden;
line-height: 1.5em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
width: 50%;
}

a:link {
color: #b0de16;
}
a:visited {
color: #b0de16;
}
a:hover {
color: #039f33;
}
a:active {
color: #039f33;
}
.button{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.footer{
max-width: 1100;
background-color: rgb(0, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
display: block;
overflow: hidden;
clear:both;
line-height: 1.5em;
width:auto;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 0px;
height: 50px;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<div class="header"><p><a href="/index.html">Home</a> | <a href="/links.html">Favorites</a></p>
<h1 align="center"><u><i>Gaming!</i></u></h1>
<hr width="50%" align="center" size="25px" color="#000000">
<p>Welcome to my site about my interests.</p></div>


<div class="content">
<div class="left-top">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Video-Game-Controller-Icon-IDV-green.svg/2000px-Video-Game-Controller-Icon-IDV-green.svg.png">
<img src="/assets/controller.png" width="50%" height="auto" style= "padding-bottom: 10%" alt="controller" title="controller"></a>
</div>
<div class="right">
<button id="open" onclick="myfunction()">open</button>
<p id="demo"></p>
<p style="border: 3px dotted; margin-left: auto; margin-right: auto; text-align: center; width: 80%; background-color: rgba(185, 31, 18, 0.54); border-color: rgb(186, 255, 0); outline-style: solid; outline-color: rgba(255, 0, 0, 0.9); box-shadow: 10px 10px;">This page is under construction, expect everything to change, even the concept.</p></div>
</div>
<div class="left-bottom">
<a href="https:/google.com"><img src="/assets/ps2.png" width="50%" height="auto" alt="console" title="console">
</a>
<p>52852525252</p>
<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>

<p>52852525252</p>



</div>
<div class= "footer"><p>You can email me at <a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</a>,but please don't.</p>





</div>
<script>
function myfunction() {
document.getElementById("demo").innerHTML = "Now what do I do?!?";
document.getElementById("open").innerHTML = "close";
document.getElementById("open").setAttribute("onclick", "test()");}
function test() {
document.getElementById("demo").innerHTML = "";
document.getElementById("open").innerHTML = "open";
document.getElementById("open").setAttribute("onclick", "myfunction()");}
</script>
</div>
</body>
</html>

Sep 18

Fix this code

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>The name of your Page</title>

<style type="text/css">
<!--
body{
font-size: 20px;
color: #00FFFF;
background-color: magenta;
}
.wrapper{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;

background-color: rgba(204, 0, 0, .6);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.header{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;

background-color: rgb(0, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.left{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;
background-color: rgb(255, 0, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.right{
max-width: 1100px;
width:auto;
display: block;
overflow: hidden;
clear:both;

background-color: rgb(0, 255, 0);
margin-right: auto;
margin-left: auto;
margin-top: 0px;
line-height: 1.5em;
padding: 2em;
font-size:1.3 em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #000000;
}
a:active {
color: #FFFFFF;
}
-->
</style>

</head>

<body>
<div class="wrapper">
<div class="header">HEADER</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
<p><a href="/index.html">Home</a> | <a href="/links.html">Favorites</a></p>

<h1 align="center"><u><i>This is the page title</i></u></h1>
<hr width="50%" align="center" size="25px" color="#000000">

<p>Welcome to my site about my interests.</p>

<p>This is a different <font face="Helvetica" color="#B0F1FF" size="+4">font</font>This is normal.</p>

<a href="http://www.espn.com"><img src="/assets/2.jpg" width="400px" height="auto" alt="Gary Sanchez" title="Gary Sanchez"></a>

<p style="color:rgba(44, 40, 57, .5); text-align:center; font-size: 3em; font-variant: small-caps; font-weight: bold; border: 1px solid black; width: 50%; margin-right: auto; margin-left: auto;">Hello. How are you?</p>

<p>Email me at <a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</a></p>
</div>
</body>
</html>

Sep 17

HTML Quiz 2

Sep 7

HTML Quiz 1

Aug 27

Syllabus

  • Parents must send email to This email address is being protected from spambots. You need JavaScript enabled to view it. for verification of syllabus

codeacademy.com

  • register and complete the lessons on Learning HTML
  • https://www.codecademy.com/catalog/subject/web-development
  • You will complete lessons 1-9
    1. Learn HTML: Get started as a web developer by learning the basics of HTML, the essential language of the web.
    2. Styling a Website: Learn and practice the fundamentals of CSS to add beautiful styling to your webpages.
    3. Getting Started with JavaScript: Learn the fundamentals of JavaScript: syntax, variables, conditionals, and functions.
    4. Building Interactive JavaScript Websites: Learn the Document Object Model, the interface between JavaScript and HTML elements, and combine HTML, CSS, and JavaScript into exciting interactive sites!
    5. Getting More Advanced with Design: Learn CSS techniques for more interesting sites: display & positioning, colors, typography, responsive design, and flexbox.
    6. JavaScript: Arrays, Loops, and Objects: Discover more JavaScript techniques and features including arrays, looping, and objects.
    7. Building Website Templates: Apply your JavaScript skills to Handlebars.js, a powerful tool for creating reusable webpage templates populated with data from JavaScript files.
    8. Introduction to jQuery: Learn the basics of jQuery, a JavaScript library that allows you to add dynamic behavior to static web pages.
    9. Intermediate JavaScript: Learn more techniques to extend your JavaScript knowledge including reusable classes, splitting code into modules, and making HTTP requests.