HTML - CSS - JS
@benhoad
MVC
MVC
View
H - T - M - L
Hypertext Markup Language
HTML
HTML is the structure of a web page
Example of some HTML
Do not click that button
Seriously!... don't do it...
What you'll see
It's lacking style but that's ok! because i do too >_>
Tags
A DIVision tag - most common
Biggest Heading
Next Biggest Heading
Paragraph
-
These tags are used for lists
Attributes!
All tags have the ability to assign a class and id.
Ok so how does this apply to Rails?
In your Rails application folder:
/app/views/
For example
/app/views/application.erb
Example with attributes!
Do not click that button
Seriously!... don't do it...
C - S - S
Cascading Style Sheet
CSS
CSS is the STYLE of a web page
Example of some CSS code
body {
font-family: 'Helvetica', sans-serif;
}
#main-text{
color: red;
}
.large-button {
border: 1px solid black;
background: white;
padding:10px;
}
This is what it looks like now some basic css
In your Rails application folder:
/app/assets/stylesheets/
For example
/app/assets/stylesheets/application.css
One last thing...
QUIRKS!
* {
box-sizing: border-box;
}
The above snippet placed at the top of the css may fix a lot of frustration.
J - S
JavaScript
JS
Javascript gives your webpage life! (or at the very least interactivity)
Example of some JS code
$(".large-button").click(function(){
alert("this is why we can't have nice things");
});
* This code uses a JS library called JQuery
A maybe less confusing example
//declaring the result
function result () {
alert("this is why we can't have nice things");
}
//attaching the action to the button
$(".large-button").click(result());
* This code uses a JS library called JQuery
In your Rails application folder:
/app/assets/javascripts/
For example
/app/assets/javascripts/application.js