Git Product home page Git Product logo

frontend-masters-intro-to-web-dev's Introduction

Frontend Masters: Introduction to Web Dev (2014 - yikes)

Progress

  • HTML [2018-05-25]
  • CSS [2018-05-25]
  • JavaScript [2018-05-26]
  • JQuery [2018-05-26]
  • AJAX [2018-05-26]
  • Command Line [2018-05-27]
  • Node.js [2018-05-27]

Codepen Exercise Collection

HTML

  • <html> Encompasses your entire document.
  • <meta> Where meta data lives. Never displayed.
  • <body> Display content goes here.
  • Common HTML tags: <h1> ... <h6>, <p>, <div>, <ul>, <ol>, <li>, <strong>, <em>, <span>
  • HTML tags/elements can be assigned attributes
  • The class attribute is used to identity the tag semantically
  • The id attribute is similar, but should be unique, whereas the class attribute is meant to be on reusable tags.
<tag attribute='value' class='className'>Content</tag>
  • Don't use 'presentational names' for class or id names. Use names that say 'what something is', not where it is on your page or what it looks like.

CSS

  • Because I always forgot:
box-styling: content-box // never use

* {
box-styling: border-box // yass!
}
  • Hahaha. 'FlexBox is kinda hard.' (2014)
  • Checkout normalize.css
  • clear fix Look up later. If maintaining old code.
  • overflow: hidden to consider if tackling the great collapse.
  • Neat hack near the end of the video about vertically-center text above an image. All the hacks seem out of date tho ...

JavaScript

  • Very basic introduction to JS. I didn't learn anything worth noting. It was a bit annoying when that the instructor kept refering to arrays as 'lists'.
  • The instructors butchered the context of this. Here is the code they were trying to accomplish.
const car = {
  type: 'Corolla',
  sayType: function() {
    return this.type
  }
}

const luxCar = {
  type: 'Lexus'
}

let myCar = car.sayType

myCar = myCar.bind(luxCar)

console.log(myCar()) //  Lexus

console.log(car.sayType()) // Corolla

jQuery

  • $('.class or #id').method() jQuery in a nutshell
  • Again, the course is very basic. There wasn't much of note.

AJAX

  • Asynchronous JavaScript and XML
  • Code Sample:
$('.btn').click(function() {
  $('.text').text('Loading...')
  $.ajax({
    type: 'GET',
    url: 'https://www.reddit.com/r/aww/search.json?q=puppy&restrict_sr=true',
    success: function(data) {
      $('.text').text('')
      const dogArr = data.data.children
      for (let i = 0; i < dogArr.length; i++) {
        $('.text').append(`<img src=${dogArr[i].data.thumbnail}>`)
      }
    }
  })
})
  • Basic intro. Not much of note.

Command Line (More Like Basic Git/GitHub)

  • Nothing worth noting. Basic Git/GitHub workflow
  • I regret spending 10 hours on this course. It was far below the level of Lambda School's curriculum.

Node.js

  • Basic tutorial on Node.js and Express framework. Nothing of note.
  • The exercises were easy. I guess Lambda School taught me well.
  • Static Assets. Files that are not changed by the server. Assets served to the client as saved on server. Finally something new. We didn't cover this topic at Lambda School because we focused single-page apps.
app.use(express.static(`${__dirname}/public`))

frontend-masters-intro-to-web-dev's People

Contributors

cesarnml avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.