How do you code the mobile app HTML The Halloween Store The

How do you code the mobile app?

HTML

<!DOCTYPE html>

<html lang=\"en\">
   <head>
       <title>The Halloween Store</title>
       <meta charset=\"utf-8\">
       <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

       <link rel=\"shortcut icon\" href=\"images/favicon.ico\">
   <link rel=\"stylesheet\" href=\"main_rwd.css\">

   </head>

   <body>
       <header>
           <img src=\"images/pumpkin.gif\" alt=\"Town Hall Logo\">
           <h2>The Halloween Store</h2>
           <h3>For the little Goblin in all of us!</h3>
       </header>
   <nav id=\"#mobile_menu\"></nav>
   <nav id=\"nav_menu\">
       <ul>
       <li><a href=\"index.html\">Home</a></li>
       <li><a href=\"products/productlist.html\">Product List</a></li>
       <li><a href=\"products/decoratingideas.html\">Decorating Ideas</a>

                   <ul>
           <li><a href=\"products/outdoor.html\">Outdoor</a></li>
          <li><a href=\"products/indoor.html\">Indoor</a></li>
           <li><a href=\"products/table.html\">Table</a></li>
           <li><a href=\"products/treats.html\">Treats</a></li>
       </ul>
              </li>

               <li><a href=\"products/masks.html\">Join E-mail</a></li>
       </ul>
       </nav>

<main>

       <aside>
          <nav id=\"nav_2_menu\">
       <ul>
       <li><a href=\"products/props.html\">Props</a></li>
       <li><a href=\"products/costumes.html\">Costumes</a></li>
       <li><a href=\"products/specialeffect.html\">Special FX</a></li>
       <li><a href=\"products/masks.html\">Masks</a></li>
       </ul>
           </nav>
       </aside>
   <section>
       <h1>Welcome to my site. <br> Please come in and stay awhile. </h1>

       <p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they\'ve become quite a hit.</p>
       <p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>

       <h4>Product of the week</h4>

       <a href=\"products/cat.html\"><img src=\"images/cat1.jpg\" alt=\"The Cat\"></a>
       <br>
       <p><a href=\"products/cat.html\">20\" Deranged cat</a></p>

       <h5>My guarantee</h5>

       <p>If you aren\'t completely satisfied with everything you buy from my site, you can return it for a full refund. <strong>No questions asked!</strong></p>

   </section>


</main>

       <footer>
       <p>© 2016 Ben Murach</p>
               

<a style=\"background-color:white\" href=\"http://validator.w3.org/check?uri=referer\">
<img style=\"border:0;width:88px;height:31px\"
src=\"http://www.w3.org/Icons/valid-xhtml10\"
alt=\"Valid XHTML 1.0 Transitional\" height=\"31\" width=\"88\" />
</a>

<script type=\"text/javascript\" src=\"/jquery.slicknav.js\" type=\"text/javascript\"></script>

</body>
</html>

CSS

/* the styles for the elements */
html{
       background-image:url(\'images/bats.gif\');
       background-repeat:repeat;
       margin-top:1em
}

body {
       font-family: sans-serif, Arial, Helvetica;
       border: 2px solid black;
       width: 90%px;
       max-width: 1024px;
       margin: 0 auto;
       background-color: white;
       box-shadow: 5px 5px 5px 10px black;
       border-top: none;

}

/*Navigation**********************************/

#nav_menu ul{
   list-style-type:none;
   position:relative;
   margin:0;
   padding:0;
}

#nav_menu ul li{
float:left;
}

#nav_menu ul ul{
   display: none;
   position:absolute;
   top:100%;
}

#nav_menu ul ul li{
float:none;
position:relative;
}

#nav_menu ul ul li ul {
   position:absolute;
   left:100%;
   top:0;
}

#nav_menu ul li a {
   text-align:center;
   display:block;
   width:256px;
   padding:1em 0;
   text-decoration:none;
   background-color:black;
   color:white;
   font-weight:bold;
}

#nav_menu ul li:hover > ul {
display:block;
}

/***********************************/
/*** Vertical Nav**/

#nav_2_menu ul{
   list-style-type:none;
   margin-left:1em;
}
#nav_2_menu ul li{
   width:130px;
   margin-bottom: .7em;
   border: 3px solid black;
   text-align:left;
}

#nav_2_menu ul li a {
       font-weight:bold;
       color:Black;
       display: block;
       text-decoration:none;
       background-color:orange;
       padding: .5em 0 .5em 1.5em;
}

#nav_2_menua:link, a:visited {
color:Orange;
}

a:hover, a:focus {
color:green
}

a {
    font-weight:bold;
   color:Orange;

   text-decoration:none;
}

#nav_menu > ul::after{
   content:\"\";
   display:block;
   clear:both;
}

#nav_menu ul li.lastitem a{
   width:200px;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
   background-color:gray;
}
#nav_menu ul li a.current {
   color:orange;
}

a {
font-weight:bold;
color:orange
}

a:link, a:visited {
color:orange
}

a:hover, a:focus {
color:green
}

/***********************************/
/* the styles for the header */
header{
        border-bottom: 2px solid black;
       background-color:orange;
       background: -webkit-linear-gradient(45deg, white 5%, orange 80%, black);
       background:linear-gradient(45deg, white 5%, orange 80%, black);
       background:-moz-linear-gradient(45deg, white 5%, orange 80%, black);
       background:-o-linear-gradient(45deg, white 5%, orange 80%, black);


}

header img {
   float: left;
   min-width: 40px;
   minimum-scale:1;
}

header h2 {
   font-size:250%;
   text-indent: 30px;
   text-shadow: 4px 4px 4px 4px black;
}

header h3 {
font-size:130%;
text-indent: 35px;
}

/* the styles for the main */
main {
clear: left;
}

main h1{
font-size:150%;
}

main h1::first-letter {
font-size: 4em;

}

main h2 {
font-size:120%;
}

main h3 {
font-size:100%
}

/* the styles for the footer */
footer p {
font-size: 80%;
text-align: center;
}

footer {
       border-top: solid black;
       padding:1em;
       background: -webkit-linear-gradient( 45deg, black, orange 30%, white );
      background:linear-gradient( 45deg, black, orange 30%, white );
       background:-moz-linear-gradient( 45deg, black, orange 30%, white );
       background:-o-linear-gradient( 45deg, black, orange 30%, white );
       text-align:center;
       clear:both;
}

aside {
   width:22%;
   float:left;
   height:580px;
}

section {
width:800px;
}
section img{
min-width: 40px;
minimum-scale:1;

}

/**************************************/
/********@Media query***********/
@media only screen and (max-width: 800px)

@media only screen and (max-width: 767px) {
#nav_menu {
display: none;
}
body {
width: 100%; /* full width of screen */
margin: 0; /* no margins */
border: none; /* no border */
}
header, footer p {
text-align: center;
}
footer p { margin-right: 0; }

header h2 {
font-size: 1.625em; /* 26 / 16 */
margin: .4em 0 .25em 0;
}
header h3 {
font-size: 1em; /* base font size */
margin-left: 1;
}
header img {
float: none;
}
section {
width: 95.9596%; /* 100 - (2 * 2.0202) for padding */
float: none;
margin-right: 1%; /* 20 / 990 */
padding-right:0;
}
aside {
width: 5%; /* 100 - (4 * 2.0202) for padding and*/
hight: 5%;

/*margins */
float: none;
margin: 0 2.0202% 2.0202% 2.0202%; /* 20 / 990 */
}
}

@media only screen and (max-width: 479px) {
#nav_menu {
display: none;
}

header h2 {
font-size: 1.375em; /* 22 / 16 */
}
header h3 {
font-size: .8125em; /* 13 / 16 */
}
p {
font-size: .875em; /* 14 / 16 */
}
section h1, section h2, aside h2 {
font-size: 1em; /* base font size */
}
section li, aside li {
font-size: .875em; /* 14 / 16 */
}
aside h3 {
font-size: .9375em; /* 15 / 16 */
}
footer p {
font-size: .6875em; /* 11 / 16 */
}

}

But now, anyone with a decent knowledge of HTML, CSS, and JavaScript can build a mobile application. One key advantage of using web technology to build your app is Portability. Using a packager/compiler, like PhoneGap, you will be able to port and install your app on many different platforms.

Step 1: Define Your Goal

Step 2: Start Sketching

Step 3: Research

This research has four main purposes:

Step 4: Create a Wireframe and Storyboard

In this phase your ideas and features fuse into a clearer picture. Wireframing is the process of creating a mockup or prototype of your app. You can find a number of prototyping tools online. The most popular ones are Balsamiq, Moqups, and HotGloo

Step 5: Define the Back End of Your App

Your wireframes and storyboard now become the foundation of your back-end structure. Draw a sketch of your servers, APIs, and data diagrams.

Step 6: Test Your Prototype

Revert to your wireframes and ask friends, family, colleagues, and experts to help you review your prototype. Grant them access to the wireframe and have them give your app a test run.

$How do you code the mobile app? HTML <!DOCTYPE html> <html lang=\$

How do you code the mobile app HTML The Halloween Store The

Solution

Get Help Now

Submit a Take Down Notice