wilhelser

JAVASCRIPT
https://javascript.info/
https://skillcrush.com/blog/learn-javascript-for-free/
https://roadmap.sh/javascript
https://www.youtube.com/watch?v=FtaQSdrl7YA
https://learnjavascript.online/
https://www.gracehopper.com/blog/best-ways-to-learn-javascript-for-beginners
https://www.udemy.com/course/the-complete-javascript-course

wilhelser

<script> 
var $buoop = {vs:{i:9,f:-4,o:-4,s:8,c:-4},api:4}; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>

wilhelser

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
 
@media all and (min-width: 768px) and (max-width: 1024px) { }

wilhelser

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}

wilhelser

Product Photography & Editing

http://www.pixelz.com/blog/marketplace-image-guidelines/ http://www.shopify.co.uk/blog/12206313-the-ultimate-diy-guide-to-beautiful-product-photography

https://www.virgowebdesign.com/blog/entry/tutorial-how-to-photoshop-e-commerce-product-photos-in-3-isolating-on-white-background

http://upgradedape.com/how-we-did-all-our-professional-ecommerce-product-photography-for-under-200-and-our-how-experiments-increased-conversions-21/

http://www.practicalecommerce.com/articles/3889-How-to-Take-Gorgeous-Product-Photos

wilhelser

<?php
/* Template Name: Gallery */
get_header(); ?>

<main role="main">

  <section class="hero gallery-hero">
          <div class="menus-headline">
              <h1>Gallery</h1>
          </div>

wilhelser

- if @template.blank?
  %section.content.interior
    .row
      .medium-10.columns.medium-offset-1
        - @benefits.each do |benefit|
          .benefits-heading.medium-12
            .inner
              .outer
                .inner.benefit-inner
                  = benefit.title

wilhelser

.online-course-icon {
  display: block;
  float: right;
  height: 20px;
  width: 20px;
  background: url("/wp-content/themes/InfiniteFoundation/assets/img/online.png") no-repeat;
}

wilhelser

<div class="medium-3 columns">
	<h4 id="accordion">Accordion</h4>
	<dl class="accordion" data-accordion>
		<dd>
			<a href="#panel1">Section 1</a>
			<div id="panel1" class="content active">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt placeat recusandae, quos quis dicta quod.</p>
			</div>
		</dd>
		<dd>

wilhelser

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;