Front-end developer

Guide för att bli en front-end web developer. Infon kommer bland annat härifrån.

1. Html

  • –X–Generella strukturen av en hemsida (html, head, body).
  • –X–The Document Object Model (DOM) – Vad det är.
  • –X–Taggar – hur man gör
  • Hur man strukturerar innehållet på en hemsida med divs (div-based-markup)
  • –X–Semantisk markup – Hur det ska användas korrekt.
  • –X–Hur man bäddar in en .css-fil i en hemsida.
    • Att bädda in en .css-fil är inte svårt.
      i .html-filen bör refensen skrivas ut såhär:

      <link rel="stylesheet" href="css/style.css">
      

      href-länkadressen skall riktas till den mapp där .css-filen finns. Ibland kan man även se attributet type=”text/css”, men det är inte nödvändigt längre. Den fyller ingen funktion.

  • Hur man gör att sidan stödjer accessibility compliance, för de som behöver screen readers, t.ex.
  • Hantera stora bakgrundsbilder

2. CSS

  • –X–Grundläggande terminologi:

    • Selector – en selector kan vara en tag eller en klass.
    • Attribut – attributet är den del av selectorn som förändras. Alltså color, border, font etc. Dokumentationen av alla css-attribut som finns här.
    • Value – alltså värdet som attributet får. Om attributet är color så är värdet grön.
      Exempel:

      p {
      color: red;
      }
      
  • Hur man når ett specifikt element på en sida, på olika djup (t.ex a span inom div).
  • –X–Displaying elements – block, inline-block och inline.
  • Style attribut som kan avgör colors, fontar, borders.
  • –X–Positionering (relative, absolute, fixed) och floating elements.
  • –X–The box model, margin/padding, och vad box-sizing: border-box gör.
  • Ids (#id) vs classes (.class) och CSS selectors.
  • CSS specificity, när vissa styles överride andra styles.
  • Responsive design – Vad är det? Vad är media queries och hur använder man dom?
  • CSS3: border-radius, box-shadow, text-shadow.

SASS, LESS – CSS compilers

CSS Framework / Bootstrap/Foundation

3. jQuery

jQuery är ett JavaScript-bibliotek som har skapats av John Resig.

Saker att lära sig

  • $(document).ready(function() { });
  • Vad $(this) representerar (wrapping a DOM element as a jQuery object, which can then be manipulated using jQuery commands)
  • Hur man väljer classes and ids.
  • God kännedom om api.jquery.com och hur man hitta olika funktioner.
  • Hur man använder olika effekter (fade, slide, hide, show, etc.)
  • Traversing the DOM tree (children(), parents(), find(), etc.)
  • Chaining commands
  • How to respond to and trigger events
  • Vad betyder det för någonting att vara asynchronous?
  • Hur debuggar man jQuery-buggar? Vad är console.log() och `debugger` kommandot? Hur kan man sätta
  • breakpoints i JavaScript-filer och step in/over them?
  • Vad är JSON och hur ser ett JSON response ut.
  • Vad är AJAX?
  • Hur man tar emot data från API via AJAX och parsar datan till DOM?

4. JavaScript

Ett måste att lära sig. När ett javascript eller jQuery inte funkar så måste man kunna JS för att lösa problemet. Det är oundvikligt.

Saker att veta

  • Vad man menar med “everything is an object?”
  • I JavaScript finns det fem olika primitiva data. Dessa är: string, number, boolean, undefined, null. All annan data är object data. Arrays och Object är object-data.
    En skillnad mellan primitiv data och Object-data är hur datan sparas. I primitiv data så sparas datan direkt i en variabel.

    var namn = "Philip";
    

    I exemplet ovan så sparas alltså stringen “Philip” i variabeln namn. Notera följande exempel:

    var namn = "Philip";
    var namn2 = namn;
    namn = "Tor";
    console.log(namn) //"Tor";
    console.log(namn2); //"Philip"
    

    Här ändrar vi alltså innehållet i den ursprungliga variabeln. Men det spelar ingen roll för kopian, för den behåller det gamla värdet.

    var namnLista = ["Philip", "Tor", "Lars"];
    var namnLista2 = namnLista;
    namnLista2[0] = "Johan";
    console.log(namnLista);//["Johan", "Tor", "Lars"]
    console.log(namnLista2);//["Johan", "Tor", "Lars"]
    

    Eftersom en array är ett object så hanteras datan på ett annat sätt. Object-data hänvisas till en viss plats i minnet. En variabel innehåller alltså inte någon data, utan endast en referens till en plats i minnet. Och eftersom denna plats är densamma så ändras alltså båda Arraysen i exemplet ovan genom att endast ändra en array.

    Men, det finns en annan viktig poäng här. Det är att även om primtiv data såsom number, string och boolean endast är primitiv data så kan man ändå använda Objects methods på dem. .length till exempel är en property av ett object. Och length kan ju användas på strings, så hur är det då möjligt? Hur är det möjligt att använda en method på en primitiv data? Jo, det är så att JavaScript ovandlar en string till ett object, och använder metoden .length på den. Och sedan ovandlar tillbaka stringen till en primitiv data igen. På så sätt kan man använda sig av methods på primitiv data.

    Så, men andra ord. Allting är inte ett objekt. Primitiv data är primitiv data. Object-data är Object.

  • Vad är en callback och varför är det viktigt?
  • Global scope, function scopes, vad är the global namespace och varför kan det vara dåligt?
  • Namespacing din kod och varför
  • Closures
  • Object-oriented JavaScript
  • (OO JS) Prototypal inheritance

Generella saker

Optimering

Säkerhet

  • Hur fungerar SQL-injections och hur undviker man dom
  • Hur man sätter upp SSL/HTTPS för att kryptera information

5. Generella saker att kunna

Verktyg: –X–Hur man inspekterar en hemsida med hjälp av firebug (firefox)

Local utvecklingsmiljö

  • –X–Sätta upp en lokal utvecklingsmiljö. XAMP.
  • Hur man sätter upp en E-commerce plattform

Versionhantering/GitHub

FTP

Basic terminal usage

SSH

Learn how client and server talk to each other

RESTful web services

POST GET PUT DELET requests

Resurser
Bootstrap hos edX.
Front-end web developer Udacity

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s