Skip to content

Na primeru jednostavnog HTML dokumenta:

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Modern JavaScript</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
  </head>
  <body>
    <main role="main" class="container">
      <br>
      <div class="jumbotron">
        <h1 id="heading">Sample text</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia libero, laudantium at laboriosam neque repudiandae! Vel quae corporis debitis, asperiores, autem provident quaerat beatae totam possimus quia, esse necessitatibus porro.</p>
        <p>Necessitatibus sint vel animi magni, omnis ducimus libero, expedita nemo eveniet voluptatum in rerum temporibus quam provident perspiciatis delectus ex asperiores doloribus voluptatem tempora non soluta id. Deserunt, nihil, ad recusandae quisquam dicta deleniti dolorum ipsam magni, voluptatibus esse temporibus. Architecto, quaerat!</p>
        <p id="toRemove">To be removed</p>
      </div>

      <a href="#" id="link" class="btn btn-danger btn-lg">Don't push me</a>
    </main>
  </body>
</html>

imamo:

CSS stilizovanje

<script>
document.querySelector('.jumbotron').style.color('red');
document.querySelector('.jumbotron').style.color = 'cornflowerblue';
document.querySelectorAll('main p').forEach(p => p.style['font-family'] = 'arial');
</script>

CSS klase

<script>
document.querySelector('.jumbotron').classList.remove('jumbotron');
document.querySelector('.container').classList.add('active');
document.querySelectorAll('p').forEach(p => p.classList.add('active'));
</script>

Loading Events

<script>
document.addEventListener('DOMContentLoaded', init);
window.addEventListener('load', load);
</script>

forEach()

<script>
let p = document.querySelectorAll(".jumbotron p");
p.forEach((item, index) => {
console.log(index, item.textContent);
});
</script>

DOM manipulacije

<script>
  let heading = document.querySelector('#heading')
  console.log(heading.innerText)

  alert("Last paragraph will be removed")

  let el = document.querySelector('#toRemove')
  el.remove()

  let paragraphs = document.querySelectorAll(".jumbotron p")
  //console.log(jumbotron[0].innerText)
  Array.from(paragraphs).forEach(p => {
    console.log(p.innerText)
  })

  alert("Adding text")

  let jumbotron = document.querySelector('.jumbotron')
  jumbotron.prepend('And now something completely different...')
  jumbotron.before('Here goes Jumbotron:')

  let parent = jumbotron.parentNode
  console.log(parent)

let main = document.querySelector('main');
let par = document.createElement('p');
par.textContent = 'New paragraph';
main.insertAdjacentElement('beforeend', par);
//beforebegin, afterbegin, beforeend, afterend </script>

Događaji

<script>
  let link = document.querySelector('#link')
  link.addEventListener('click', e => {
    e.preventDefault()
    alert("Don't push me!")
  })

document.querySelector('.jumbotron').addEventListener('click', function(ev){
//this.style.color = 'purple';
ev.currentTarget.style.color = 'gold';
});

document.querySelectorAll('p').forEach(function(p, index){
p.addEventListener('mouseover', function(ev){
ev.currentTarget.style.backgroundColor = 'skyblue';
});
p.addEventListener('mouseout', function(ev){
ev.currentTarget.style.backgroundColor = 'transparent';
});
}); </script>

Ajax & vanilla JavaScript

<script>
const URL = 'http://jsonplaceholder.typicode.com/albums'; document.addEventListener('DOMContentLoaded', () => {
let req = new Request(URL, {
method: 'GET'
});
});
fetch(req)
.then(response => response.json())
.then(data => {
console.log(data);
console.log(JSON.stringify(data, null, 2));
})
.catch(err => {
console.log('error')
}); </script>

Ajax & Axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.get('https://swapi.co/api/starships')
  .then(res => console.log(res.data))
  .catch(error => console.log(error))
</script>

Izvor: Traversy Media, Steve Griffith

VIDEO KOJI SE FIZIČKI NALAZI NA ISTOM SERVERU NA KOJEM I SAJT

Tehnički gledano, video fajlovi su izmešteni iz document root-a (nije im moguć direktan pristup iz brauzera kucanjem adrese tipa http://sajt.com/video.mp4) a mi imamo PHP skript za striming (baziran na http://www.tuxxin.com/php-mp4-streaming/) koji vodi računa o tome da li je korisnik pre svega ulogovan, i ako jeste, koji video mu treba strimovati. Video se pušta kao Content-Type: video/mp4 "u čankovima" i to bi trebalo da radi u svim modernim brauzerima.

Pošto se video klipovi nalaze na istom serveru na kojem i sajt (HTML + PHP kôd), postoji problem ograničenog kapaciteta za protok podataka. Kada veći broj korisnika pristupa sajtu i gleda video u isto vreme, taj kapacitet se deli između korisnika. Ako je server povezan na mrežu linkom od 100 megabita, to garantuje protok od oko 12 megabajta po sekundi. MP4 video formata 640x360 piksela u trajanju od jednog minuta zauzima oko 8 megabajta podataka što znači da je potreban protok od 0.13 megabajta u sekundi da bi se on reprodukovao bez zastajkivanja. 12 podeljeno sa 0.13 je jednako 92 što predstavlja teoretski maksimum korisnika koji bi mogli istovremeno da gledaju 640x360 MP4 video bez da neko oseti bitnije seckanje u reprodukciji.

Ako uzmemo kvalitetan HD video (1920x1080) u trajanju od sedam minuta i 17 sekundi, on zauzima 218 megabajta. Da bi se ovaj video reprodukovao bez zastajkivanja treba nam protok od pola megabajta u sekundi što nam ostavlja teoretski maksimum od 24 korisnika koji bi mogli istovremeno da gledaju full HD MP4 video bez da neko oseti bitnije seckanje u reprodukciji.

Treba imati u vidu da naš server iz primera koji se nalazi na 100 megabitnoj mreži, deli taj protok sa ostalim serverima iz mreže što umanjuje gorepomenute teoretske maksimume.

VIDEO KOJI SE NALAZI NA CDN SERVERU

CDN je skraćenica od Content Delivery Network i predstavlja mrežu servera raspoređenih na različitim lokacijama (različitim mrežama), često u različitim delovima sveta. Ideja je da se isti sadržaji (naši video klipovi iz gornjeg primera) nalaze na više geografski raštrkanih servera i da se poslužuju korisnicima u zavisnosti od njihove lokacije i raspoloživosti resursa (protoka mreže) čime se minimizira uticaj kapaciteta za protok podataka na kvalitet reprodukcije.

Video fajlovi se nalaze na odvojenim serverima u odnosu na sam sajt tako da brzina mreže kojom je server na kojem se nalazi sajt povezan sa Internetom ne utiče na kvalitet reprodukcije videa. Korisnik video zahteva sa CDN-a, ne sa našeg sajta. Na sajtu imamo PHP kod koji pre svega proverava da li je korisnik ulogovan, i ako jeste, za koji video mu prikazati plejer. Plejer može biti urađen u Flešu (JW Player, Flowplayer) ili može biti HTML5 video plejer (Viblast Player).

I kod CDN-a sprečavamo direktan pristup fajlovima (i hotlinkovanje) tako što navodimo domene sa kojih je moguće "povući" kontent. Ovo je posebno bitno zato što CDN usluge najčešće plaćamo prema utrošenim megabajtima protoka. Video sadržaj je na CDN-u definisan kao video push servis.

Bootstrap themes

https://bootswatch.com/
https://fezvrasta.github.io/bootstrap-material-design/

Material Design for Bootstrap

http://mdbootstrap.com/

UI Frameworks

https://www.polymer-project.org
http://materializecss.com/
http://www.material-ui.com/
https://github.com/kkortes/leaf
https://www.muicss.com/

Branding

  • Get a professional logo. It’s rare to find a website or a blog with a great logo. So it’s a good way to build instant credibility.
  • Upload a retina-ready favicon. Most sites have 16×16 pixel favicons. On retina screens, they’re blurry. Use X-Icon Editor to generate a 64×64 pixel favicon.
  • Always use retina-ready images. Simply make sure the image is twice as large as it’s container, then scale it down.
  • Use 2-3 colors max. You should have a background color, a call-to-action color, and an accent color.
  • When choosing a color palette, start with complementary or triad colors. Adjust from there. Good color combos give you a design that tells a story.
  • Never use true black (#000000). Pure black doesn’t exist so it looks out-of-place online. Black, in reality, is always a dark shade of another color.
  • Never use a neutral grey (e.g. #cccccc) if you want your design to have a personality. Add a tint of yellow to provide warmth, red to give energy, or blue to create trust.

Typography

  • Pick a premium font. Use a service like Typekit. It’s been said that 95% of the web is typography. Going with a premium font is the easiest and most inexpensive way to make a good impression.
  • Use 2-3 fonts max. More is messy and slows load time. Choose a heading font and a paragraph font. One more if you want a font for special cases.
  • Set a body font size at 16px minimum. Anything smaller is difficult to read on large displays. Scale down to 12px on mobile devices.
  • Choose a typographical scale like the augmented fourth, perfect fifth, or golden ratio. Use the scale to set font sizes for your paragraph text, H4, H3, H2, and H1. Base your line-heights and text margins on this scale.
  • Design other typographical elements like blockquotes, bulleted lists, numbered lists, captions, help text, alerts, highlighted text, code samples, abbreviations, and even addresses.
  • Install a custom icon font like Font Awesome instead of using images for common elements like social media logos, navigation buttons, and interactive graphics. An icon font loads faster, scales endlessly, and gives you the freedom to change it’s color as you wish.

Layout

  • Use the rule of thirds for a base layout. Divide your layout into thirds horizontally and vertically, then align key focus points where the lines intersect.
  • Maintain a vertical grid with a grid system. Break your interface into 8-, 12-, 16-column layouts with generous gutters between columns.
  • Keep a consistent vertical rhythm with a baseline grid. The space between lines of text is just as important as the space between content blocks. Every line of text should have a margin bottom that sits on the baseline.
  • White space is luxurious. It’s there to create breathing room and balance. Draw your readers’ eye to what’s most important.
  • Balance the visual elements of your site like the buttons, inputs, forms, headlines, etc. You should be able to blur your eyes and track the path that you want your users to take.

User Interface

  • Use big, bold call-to-action buttons. Every page should have one goal. It’s almost always to click a button. Make sure that button can’t be missed.
  • Add hover and active states to your links, buttons, inputs, and textareas. If you choose to lighten your buttons on hover, you should also lighten the links and the borders on your inputs.
  • Be consistent with form styling. All textareas and input fields should be styled the same. Same border colors, background colors, on hover, on active, placeholder text, active text, etc. And make sure the tabindex's are set up correctly so you can tab through them in the right order.
  • Change the color of visited links, to let the user know that they’ve been to that page before.
  • Once you have your logo, colors, typography, layout, and image sizes, establish a style guide. Good user interfaces are built with consistent components that are always styled the same.

User Experience

  • Add microinteractions to buttons and other fields. For instance, an “Upload” button should change to “Uploading” or “Processing” after it’s clicked.
  • No scroll jacking! Never mess with the default behavior of the browser. You might think it’s nice to scroll twice as fast as normal, but it’s not.
  • Get rid of your homepage slider. They decrease conversions and there are better ways to display more information in a small space.
  • Never use a welcome gate. When visiting your homepage for the first time, the user expects to see your homepage.
  • Use headlines, subheadlines, lead paragraphs, lists and captions to make your content easily scannable. Most people who visit a webpage will scan it before they decide to read it.
  • Add descriptive placeholder text to all of your forms, inputs and dropdowns. If you want someone to fill out a field in a certain way, tell them. For dropdown or select fields, make the first option descriptive. “Select Year” is better than “2016”.
  • Add HTML5 validation on your forms to make it clear when there’s an error in the form after a user tries to submit it.
  • Make your websites accessible for the visually impaired by avoiding vague link names, reducing clutter, using punctuation, keeping a simple layout, adding alt text to images, using larger text and maintaining high contrast between text and background colors.
  • Check your site for broken links with BrokenLinkCheck.com. Fix broken links so people don’t get mad when they click them.

Development

  • Make sure your site is mobile-optimized to display responsively on any device. Properly mobile-optimized sites load faster, rank higher, and give your users a better experience.
  • Generate and display the optimal image size. If you upload a large image, like a blog post feature image, and you want to display it in other places across the site, like the sidebar, make sure you display the thumbnail version of the image instead of the full-size image.
  • Add alt and title tags to all images and links. If for some reason an image isn’t loading, your site will display the alt text in its place. Also, when you hover over links, the browser displays the title tag for that link.
  • Use <strong> and <em> instead of <b> and <i> to bold and italicize text. They have the same effect, but they have a fundamental difference. <b> is a style. <strong> is an indication of how something should be understood.
  • Fix sloppy HTML. When you copy paste content into a WYSIWYG editor (like the visual view in WordPress), it adds lots of unnecessary spans and inline styles. Overtime, your site will become un-readable.
  • Speaking of which, remove inline styles from your HTML. 99% of the time, your styling rules should go into a CSS file so you can update all instances of a component at the same time instead of page-by-page, line-by-line.
  • Use Sass variables, instead of CSS, to keep colors and other components consistent across your site. Want to change a color and every shade of that color? Update one line instead of hundreds.
  • Link to permalinks not URLs in case you switch domains. For example, when linking to a certain page, your HTML should read, <a href=“/slug-goes-here”> instead of <a href=“http://domain.com/slug-goes-here”>. Same for image sources and CSS backgrounds. If you don’t do this and put the site on a new domain, all of your sources will link to pages and files that no longer exist.
  • Develop a custom plugin or tool to provide unique functionality to your site. Custom software is difficult to maintain but will give you a competitive advantage over similar sites.
  • Test for cross-browser compatibility by making sure your site displays properly in Chrome, Firefox, Safari, Internet Explorer, and other browsers. Older versions of IE are notoriously bad at displaying websites. Use BrowserStack and check manually.
  • Use W3C’s Markup Validation Service to find glaring errors in your HTML. Keep in mind, most sites don’t have perfectly valid HTML. It’s not the top priority but will give you a good sense if there are any errors.
  • Set up a staging environment to make changes to your current website. Ideally you should have a production site, which everyone sees, and a staging site, where your developer makes changes. Once the changes are ready to go live, push the staging site to production.
  • Show current year in copyright footer. When you see a site with an old copyright, you assume that it’s no longer active. Use a PHP or similar script to display the current year instead of static text (e.g. © <established year> - <current year>).

Search Engine Optimization

  • Choose one keyword phrase per page that you want that page to rank for. Focus on optimizing every aspect of that page for that keyword.
  • Set keyword-rich title tags on every page. The title displays as the blue link in Google search results. Limit to 55-characters.
  • Include one and only one H1 tag per page. In most cases, this will be the same as your title tag.
  • Include plenty of H2’s, H3’s, and H4’s within the content of your page to create subheadlines and visual hierarchy.
  • Optimize your page for a specific keyword by including it in the title, H1, subheadlines and in the first 1/3 of the content.
  • Your meta description displays in search results as the description under the link. Make sure you include it on every page and include the keyword phrase.
  • Your permalink, which is the URL after the domain (i.e. domain.com/permalink-here/), should include the keyword phrase separated by dashes.
  • Google considers domain age in it’s algorithm because a domain that’s registered for many years is likely to be a high-quality resource. Register your domain for several years in advance.
  • On average, the first result on the SERP (search engine results page) for any given keyword leads to a page with more than 2000 words per page. When writing a blog post or creating a page that you want to rank well, try to hit at least 2000 words.
  • Always create a sitemap as a sitemap.xml file and put it in your root directory so it displays on domain.com/sitemap.xml. It tells Google where all of your pages sit and should automatically update when you add new content. Submit it to Google through Webmaster Tools.
  • Add your website Google Webmaster Tools so you can see how Google indexes your site and stay updated if there are any critical issues.
  • To help your images rank, always rename your images and other files before uploading to your website (e.g. rank_for_this_keyword_phrase.png).
  • Include a robots.txt file on your site to tell web crawlers which pages they should and should not index.
  • Add a canonical redirect to point the non-www to the www version of your website, or vice versa.
  • Research and integrate LSI keywords (latent semantic indexing) on every page to help the page rank for the main keyword phrase. Find the LSI keywords by Googling your keyword phrase and searching for the “Searches related to…” links.
  • Make sure to actively interlink your content. Every page on your site should be accessible through three or fewer clicks from the homepage.
  • Add structured data on relevant pages to help Google properly index your content. Page types that need custom structured data include people, products, events, organizations, movies, books, and reviews. Use Schema Creator to generate structured data.
  • Check Google’s PageSpeed Insights to make sure you’ve fixed all of the common problems that slow down your page speed. The faster your site loads, the higher it’ll rank.

Page Speed

  • Keep page weight under 2MB. Use tools.pingdom.com to check the page weight for your primary landing pages. Anything more than 2MB is too heavy.
  • Keep page requests under 50. Every file and image on any given page is a HTTP request. The fewer the number of requests, the faster it’ll load. The average webpage has 70 requests. Use GTmetrix to see your requests.
  • Design page elements with CSS instead of background images. Never use an image to show a button, form, or other common component on your site. CSS loads faster and is more flexible in responsive layouts.
  • Optimize images before uploading them to your site. Tools like TinyPNG can reduce your image file sizes by 80-95% without losing resolution or image quality.
  • Set up a Content Delivery Network to host your images and other larger files in several locations around the world. CDNs store and deliver your files from strategically located servers to maximize loading speed depending on your visitor’s physical location.
  • Minify JavaScript, HTML and CSS by using compiling and compression tools prior to uploading files to your website. For JavaScript, use Closure Compiler. For HTML, use HTML Minifier. For CSS, use YUI Compressor.
  • Move render-blocking JavaScript to the footer. The only scripts that should be placed in the header are the scripts that immediately affect the design of the page (e.g. custom fonts).
  • Avoid landing page redirects. Redirects trigger an additional HTTP request which delays page rendering.
  • Leverage browser caching by setting expiry dates for pages and page types that aren’t updated often. Browser caching instructs the browser to load previously downloaded pages from the local disk rather than through the network.
  • Enable gzip compression in your server configuration. Compression can reduce the transferred response time by 90% which improves the time to first render for your pages.
  • Enable Keep-Alive on your server settings to allow the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.
  • Upgrade to a dedicated server or premium hosting service to improve server response time. When you use a shared hosting environment, your site is typically one of hundreds on the same server. If any one of those hundred sites is experiencing a lot of traffic, it’ll slow down your page speed.

Graphic Design

  • Get a custom ebook cover for your opt-in bonus. They’re not difficult to create and can make a huge difference in your conversion rate.
  • Design a custom graphic or illustration for your homepage or sales pages. A nice illustration that’s done specifically for your site is an easy way to make your site more memorable.
  • Create a custom or series of custom blog post feature image designs. That’s the image that spreads on Facebook, Twitter, Pinterest, etc. When a user sees a certain type of image associated with a blog post, they should know that it was written by you.
  • Display custom avatar illustrations or caricatures for yourself and each member of your team. Custom caricatures can be less expensive than hiring a professional photographer each time you add someone to your team. Plus, it’s a nice gift to a new team member.
  • Custom infographics that display data and other content in a visual way tend to get more traffic than the blog post equivalent. People like to share infographics on sites like Pinterest or re-post them on their own sites with a backlink back to your site.
  • If you produce a video or series of videos, you should have a custom video intro and/or outro to give it a professional touch. Not to mention other video graphics or animations that’ll help your brand stick out.

Web Security

  • Install an SSL Certificate to allow a secure connection from a web server to a browser. Most checkout software requires an SSL Certificate if you’re accepting credit cards and Google has said that an SSL Certificate will improve your search rankings.
  • Keep your software and plugins updated. When WordPress and other CMS software releases a update, it’s typically to patch up a vulnerability. If you don’t, it’s only a matter of time before your site will be hacked.
  • Set up a double authentication login gate for your admin pages. Most hacks start with the login page.
  • Check for and remove malware. If your site has been hacked before, they likely added corrupt files that aren’t easy to find. If you don’t remove it promptly, your site might be blacklisted by Google which tanks your rankings and warns users to leave when they visit.
  • Never leave your admin username as “admin”. Delete the default admin account and create a new one with a different username.
  • Regularly back up your database and website files. Most backup software and plugins only back up your database, which includes the data and content. But if you lose your site, you’ll need to have a backup of the files to restore it.

Content

  • Create a custom error 404 page that’ll display anytime a user tries to visit a page that doesn’t exist. Use the 404 page to direct them back to the homepage or help them find what they’re looking for.
  • Other than your homepage, your about page is likely the most visited page on your site. Make sure it represents you and your company well.
  • A contact page will help people contact you, but it’ll also build trust between you, your visitors, and even Google. When determining how to rank your site, the bots will find your contact page and look for an email, phone number, and address. Contact info tells Google that the site is slightly more trustworthy.
  • It’s good to have opt-in forms strategically sprinkled throughout your site, but it’s also smart to have a squeeze page with nothing but a high-converting opt-in. When you want someone to subscribe, link to that page.
  • When someone subscribes to your list, make sure you send them to a confirmation page asking them to confirm their email. If they don’t confirm their email right away, they might forget about it and never come back.
  • After they click the confirmation link in the email, send them to a thank you page where they can see what’s next. It’s a page every subscriber will see and they’ll only see once, so it’s a perfect opportunity to give them a deal or encourage them to make a purchase.
  • Your website or theme should have a landing page template that you can use when you need your users to take a specific action.
  • If you sell something, make sure you have a nice-looking sales page. Start with a headline. Make room for your pitch. Maybe add a sales video. And direct people to purchase at the bottom of the page.

Social Media

  • Limit the number of social media buttons on your posts and pages because each button runs a script that adds extra load time to the page. Only include the 1-5 buttons, e.g. Facebook, Twitter, LinkedIn, Pinterest, Google+, etc. where your content most often gets shared.
  • Create social media graphics for your Facebook page, Twitter account, YouTube channel, etc. Custom graphics make an immediately positive impression that’ll encourage first-time visitors to like, follow, and subscribe to your page, profile, or channel.
  • Set up Facebook Open Graph META tags to make sure your content is shared correctly on Facebook. Use the Facebook Debugger to check your homepage, posts, and other pages to see how they display when someone shares that URL.
  • Set up Twitter Cards to automatically attach rich photos and videos to your tweets when a URL on your site is shared. Get started with Twitter Cards here.
  • Set up Google+ Snippets to customize what people see when your site is shared on Google+. Use the Snippet guide to generate the code. Even if your site doesn’t get a lot of Google+ love, Google will know if you add the meta data correctly and that should carry some weight.
  • Tuck away the social media icons that link back to your profiles by making them small or only showing them in the footer. The purpose of social media marketing is to get people back to your site, not the other way around.

AwesomeWeb

echo '<ul class="nav nav-tabs">';
foreach($invoiceTypes as $invoiceTypeId => $invoiceTypeData){
   echo '<li';
   if($invoiceTypeId == $invoiceType) echo ' class="active"';
   echo '><a href="#' . $invoiceTypeId . '" data-toggle="tab">' .
   $invoiceTypeData['description'] . '</a></li>';
}
echo '</ul>';

echo '<div class="tab-content">';
foreach($invoiceTypes as $invoiceTypeId => $invoiceTypeData){
   echo '<div class="tab-pane';
   if($invoiceTypeId == $invoiceType) echo ' active';
   echo '" id="' . $invoiceTypeId . '">';
   ...
   echo '</div>'; //tab-pane
}
echo '</div>'; //tab-content

<a href="details.php" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">Show modal</a>

<div class="modal fade" 
     id="myModal" 
     tabindex="-1" 
     role="dialog" 
     aria-labelledby="myModalLabel" 
     aria-hidden="true">
     <div class="modal-dialog">
          <div class="modal-content">
               <div class="modal-header">
                    <button type="button" 
                            class="close" 
                            data-dismiss="modal" 
                            aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
               </div>
               <div class="modal-body">
               </div>
               <div class="modal-footer">
                   <button type="button" 
                           class="btn btn-default" 
                           data-dismiss="modal">Close</button>
               </div>
          </div>
     </div>
</div>

<script>
     $("#myModal").on("show.bs.modal", function(e) {
          var link = $(e.relatedTarget);
          $(this).find(".modal-body").load(link.attr("href"));
     });
</script>

FONTS

Recommendation #1: Use one font per project

Recommendation #2: Have a small number of "go-to" fonts

Fonts can make a big difference in what your project conveys, but you can get most of the effect you're looking for by choosing your ONE font from just a few different fonts. Restrict your choices to just a few different fonts. You can consult the "all of the fonts you'll ever need" cheat sheet I sent you when you enrolled in the course, or here's a few other recommendations:

  • Georgia for a sophisticated serif
  • Helvetica for a clean and neutral design
  • Lato for a friendly and "natural" look
  • Raleway for a more modern geometric look

Recommendation #3: Start worrying about other things

Getting good at anything is all about breaking down the overwhelm, and reducing the factors. Once you only have a few factors you're working with, you reduce your anxiety, and can start to make sense of the choices you're making. Once you've decided that you're only using one font, and you start using that font, you'll start to notice things you didn't notice before. You'll have to start getting creative with how you use your typography. You'll experiment with sizes (next lesson's topic), you might try a little all-caps here and there (for very short pieces of text), and you'll experiment with bolds and italics.

3:4 TYPOGRAPHIC SCALE

Font sizes based upon 3:4 scale: 5 7 9 12 16 21 28 37 50 67 89 111 148

COLORS

One color and couple of shades of gray.

12-COLUMN DESIGN

Reduce it to 3, 4 or 6 columns

NERD-EYE BLINDNESS

"You've got to start with the customer experience and work back toward technology, not the other way around." - Steve Jobs

DON'T DIVIDE MY ATTENTION, FOCUS IT