Lecture 1 - WordPress | Lecture 2 - WordPress | Lecture 3 - HTML and CSS re-cap | Lecture 4 - Javascript 1 | Lecture 5 - Javascript 2 - variables, Operators | Lecture 6 - Javascript Control Structures | Lecture 7 - Javascript 4 - functions | Lecture 8 - Javascript 5 - objects and arrays | Lecture 9 - Jquery Mobile

Lecture 1 - WordPress

Exercise 1.1


Exercise 1.2

WP-twenty-thirteen.png
WP-twenty-thirteen.png

  1. Create the following new pages::
    1. Home - has to contain an image of your choice and Beer Ipsum.
    2. News - should only contain the headline.
    3. Portfolio - should contain Beer Ipsum.
    4. CV -should contain Beer Ipsum
    5. Contact - should Beer Ipsum
  2. Create the following pages as sub-pages to Portfolio:
    1. Webdesign
    2. Photo
    3. Video
  3. Oranize your menu in a sensible order.
  4. Take a screenshot and upload to the relevant Fronter hand-in.

wp-pages.png
wp-pages.png




Exercise 1.3


  1. Make 3 new blog posts with Beer Ipsum content. Call them:
    1. Post 1
    2. Post 2
    3. Post 3
  2. Go to Settings->Reading and in Front page displays choose A static page.
  3. Just below you'll choose Home as Front Page and News as Posts Page.
  4. Go to the frontend and click on news. You should new see the News page be like a blog with all your posts.
  5. Take a screenshot and upload to the relevant Fronter hand-in.
wp-blog.png
wp-blog.png




Exercise 1.4


  1. Go to Plugins.
  2. Find, install and activate the following Plugin:
    1. All In One SEO Pack.
      1. Go to All in One SEO Pack settings and write a sensible Home Title and Home Description.
      2. Use view source to check that the title and the meta tag description has been changed.
  3. Take a screenshot of Home Page Settings in All in One SEO Pack. Upload to relevant Fronter hand-in.
seopack.png
seopack.png

Exercise 1.5

  • Change Theme to Twenty Fifteen.
  • Move around your website and notice the differences in style and structure applied to your content.

Lecture 2 - WordPress

Exercise 2.1

  • Use your WP installation from Lecture 1.
  • Create a child theme for theme Twenty Thirteen.
  • To test that it works: change the text color to red in style.css.
  • See in the browser that it works and then go back and delete your change.
  • Upload your child themes style.css to the relevant exercise in Fronter.

Exercise 2.2

wp-child.png
Make your child theme look like the image above!
  • Start by turning of the header image in your backend under Appearance>Customize.
  • Text is the font-stack Trebuchet MS
  • Healines are Georgia.
  • The color scheme is from Adobe color.
To find the right CSS selectors to use you can use the browsers code-inspector.Here is a video example:


Exercise 2.3

  • Copy the footer.php and the page.php from the main theme to your child theme.
  • Cut the sidebar "<?php get_sidebar( 'main' ); ?>" and paste it into page.php just below the <article> tag.
  • The result will not be pretty, but it illustrates how the theme files work.

Exercise 2.4 - Extra

  • Copy the header.php to your child theme.
  • Add this logo to your header, so that it looks like the image below.
  • You will have to change some css. See if you can figure it out.
wp-header.png

Lecture 3 - HTML and CSS re-cap

Exercise 3.1

  • Make the following paragraphs red, green and brown.
  • Use internal stylesheet.
  • Take a screenshot of your page and Upload to the Exercise folder in Fronter.
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
 
 
    <title>Styling with CSS</title>
</head>
 
<body>
 
<h1>Styling with CSS</h1>
 
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
 
</body>
</html>


Exercise 3.2

or as zip
  • Extract the files.
  • The anchor tags now all have the same style.
  • Change the different anchor tags to look like the image below.
  • You can NOT use ID's or classes!
  • Upload a screenshot of your page and your modified CSS to the exercise folder in Fronter.
linkpage.png

Exercise 3.3


  • Create chokoladeshoppen in html and css - without using ID's or Classes!
  • Upload a screenshot of your css to the exercise folder in fronter.
Here is the HTML code to get you started:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="Jan Ingemansen" name="author">
    <link href="css/reset_html5.css" rel="stylesheet" type="text/css">
    <link href="css/default.css" rel="stylesheet" type="text/css">
 
    <title>Chokoladeshoppen</title>
</head>
 
<body>
    <div>
        <header>
            <img alt="Chokoladeshoppen" >
        </header>
 
        <nav>
            <ul>
                <li>
                    <a>Forside</a>
                </li>
 
                <li>
                    <a>Sortiment</a>
                </li>
 
                <li>
                    <a>Råvarer</a>
                </li>
 
                <li>
                    <a>Opskrifter</a>
                </li>
 
                <li>
                    <a>Om os</a>
                </li>
 
                <li>
                    <a>Kontakt</a>
                </li>
            </ul>
        </nav>
 
        <div>
            <section>
                <img alt="Chokolade Påskeæg" height="460" src="" width="440">
 
                    <h1>Påsketilbud</h1>
 
                    <p>Har været udset til at læse, der skal dannes par af ligheder. Udset til at læse, der skal dannes par af ligheder.</p><a href="#somelink" title="Altid aktuelle tilbud"><img alt="Se flere tilbud" height="30" src="" width="206"></a>
            </section>
 
            <section>
                <img alt="Chokolade æg" height="208" src="billeder/mockUpChokolade_12_2.jpg" width="220">
 
                <h2>Kom ind og smag vores nyheder</h2>
 
                <p>Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Dermed kan der.</p>
 
                <p><a href="#">Se alle vores nyheder &raquo;</a></p>
            </section>
 
            <section>
                <img alt="Chokolade konfekt" height="208" src="billeder/mockUpChokolade_12_3.jpg" width="220">
 
                <h2>Gaveæsker i mange størrelser</h2>
 
                <p>Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Dermed kan der.</p>
 
                <p><a href="#">Se alle vores nyheder &raquo;</a></p>
            </section>
 
            <section>
                <img alt="Chokolade fyld" height="208" src="billeder/mockUpChokolade_12_4.jpg" width="220">
 
                <h2>Lær at lave fyldt chokolade</h2>
 
                <p>Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Dermed kan der.</p>
 
                <p><a href="#">Se alle vores nyheder &raquo;</a></p>
            </section>
 
            <section>
                <img alt="Chokolade stykker" height="208" src="billeder/mockUpChokolade_12_5.jpg" width="220">
 
                <h2>Hvor komme råvarerne fra?</h2>
 
                <p>Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Dermed kan der.</p>
 
                <p><a href="#">Se alle vores nyheder &raquo;</a></p>
            </section>
        </div>
 
        <footer>
            <p>Find os på Chokoladevej 33, 9900 Chokokøbing         Åbningstider: Mandag-fredag: 10-18 &#38; lørdag: 10-15</p>
        </footer>
    </div><!-- end wrapper -->
</body>
</html>


Lecture 4 - Javascript 1

Exercise 4.1

  • Go to this Jsfiddle: http://jsfiddle.net/nomanson/pbswcupa/
  • Follow the instructions in the Jsfiddle comments.
  • Update the fiddle.
  • Hand in the fiddle link to the relevant Fronter hand-in folder in Exercises.

Exercise 4.2

  • Go to this Jsfiddle: https://jsfiddle.net/nomanson/qbbsLvs9/
  • Follow the instructions in the Jsfiddle comments.
  • Update the fiddle.
  • Hand in the fiddle link to the relevant Fronter hand-in folder in Exercises.

Exercise 4.3

  • Go to this Jsfiddle: https://jsfiddle.net/nomanson/z9ggnxua/
  • Follow the instructions in the Jsfiddle comments.
  • Update the fiddle.
  • Hand in the fiddle link to the relevant Fronter hand-in folder in Exercises.

Lecture 5 - Javascript 2 - variables, Operators

Exercise 5.1

  1. Go to this JSFiddle: http://jsfiddle.net/nomanson/shh9hfn7/
  2. make additional fieldsets to cover subtraction ( - ), multiplication ( * ) and division ( / ).
  3. update the fiddle or fork it to your own account.
  4. upload url to Fronter.

Exercise 5.2

  1. Go to this JSFiddle: http://jsfiddle.net/nomanson/195qv4oo/
  2. Make separate lines for:

    • substr()
    • replace()
    • split()
    Find information at: http://www.w3schools.com/jsref/jsref_obj_string.asp
  3. update the fiddle or fork it to your own account.
  4. upload url to Fronter.

Exercise 5.3 (Homework)

Codecademy.com
  • INTRODUCTION TO JAVASCRIPT
  • Upload screenshot of badge to the relevant Fronter folder (interaction>Codecademy>javascript).

Lecture 6 - Javascript Control Structures

Exercise 6.1

  1. Go to this JSFiddle: http://jsfiddle.net/nomanson/pm0LouoL/
  2. Use if...else to evaluate if the number input by the user is Odd or Even.
  3. Update the fiddle or fork it to your own account.
  4. Hand in the fiddle link to the relevant Fronter hand-in folder in Exercises.

Exercise 6.2

  1. Go to this JSFiddle: http://jsfiddle.net/nomanson/m2gor9fw/
  2. Use Gliffy.com to create a flow-chart of the Javascript program. Find more information about flow-charts here: http://www.programiz.com/article/flowchart-programming
  3. Upload the flow-chart as png image to the relevant Fronter hand-in folder in Exercises.

Exercise 6.3 (Homework)

Codecademy.com
  • 'FOR' LOOPS IN JAVASCRIPT
  • 'WHILE' LOOPS IN JAVASCRIPT
  • CONTROL FLOW

Lecture 7 - Javascript 4 - functions

Exercise 7.1 (Homework)

Codecademy.com
  • FUNCTIONS

  • Upload screenshot of badge to the relevant Fronter folder (interaction>Codecademy>javascript).

Lecture 8 - Javascript 5 - objects and arrays

Exercise 8.1

Exercise 8.2

Codecademy.com
  • Javascript track: DATA STRUCTURES

    • Arrays and Objects in JS
    • Contact List
  • Upload screenshot of badges to the relevant Fronter folder (interaction>Exercises>Codecademy>javascript).

Lecture 9 - Jquery Mobile

Exercise 9.1

Make your first Jquery mobile page by copy and pasting the code from this page: https://learn.jquery.com/jquery-mobile/getting-started/

Exercise 9.2

  1. Work in groups
  2. Create a mobile mockup with three pages.
  3. Link to the libraries on the jquery server.
  4. Make everything in 1 html file.
  5. Add some content on each page. Get inspiration from: http://demos.jquerymobile.com/1.4.5/
  6. Make slide transition from page 1 to page 2.
  7. Make flip transition from page 2 to page 3.
  8. Zip your html file and upload to the exercise in Fronter.

Exercise 9.3

Work on this tutorial:
Use this converter to decode the code with special charachter endcoding.: http://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder