From 3b1974b3fd91b8fe6dc39af9769afe93cf0d2766 Mon Sep 17 00:00:00 2001 From: Brandon Rozek Date: Sun, 16 Feb 2025 11:27:53 -0500 Subject: [PATCH] HTML pre snippets to Markdown code snippets --- ...5-04-16-responsive-layout-and-animation.md | 8 +- content/blog/2015-05-23-animatable-border.md | 8 +- .../blog/2015-09-14-animatable-box-model.md | 142 +++++++----------- .../blog/2015-10-03-animatable-location.md | 100 +++--------- ...10-04-html-css-javascript-link-together.md | 68 +++++---- 5 files changed, 121 insertions(+), 205 deletions(-) diff --git a/content/blog/2015-04-16-responsive-layout-and-animation.md b/content/blog/2015-04-16-responsive-layout-and-animation.md index a3fd177..d29c4d0 100644 --- a/content/blog/2015-04-16-responsive-layout-and-animation.md +++ b/content/blog/2015-04-16-responsive-layout-and-animation.md @@ -26,7 +26,7 @@ Side Note: I changed the form of the equation to something similar to y = mx + b #### Responsive Layout -There are many occasions where I want an element on the page to move between two points. The navigation in the header of my site (at the time of writing) is a great example of this. So knowing the two points I want it to lie between and having the screen width as the variable, I can plug in… [f(x) = (100 * (b - a)/(d - c))X + (ad - bc) / (d - c)](https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif){.broken_link} where a is the start pixel b is the end pixel c is the start media query d is the end media query and X is the screen width out of 100 otherwise known as 1vw \*\*Don’t forget to keep track of your units!! Whether it’s px/rem/em/etc.\*\* Say I want to push a box towards the right a minimum of 5px, a maximum of 20px and for the push to vary between the widths 400-800px. Then I would write… +There are many occasions where I want an element on the page to move between two points. The navigation in the header of my site (at the time of writing) is a great example of this. So knowing the two points I want it to lie between and having the screen width as the variable, I can plug in… [f(x) = (100 * (b - a)/(d - c))X + (ad - bc) / (d - c)](https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif){.broken_link} where a is the start pixel b is the end pixel c is the start media query d is the end media query and X is the screen width out of 100 otherwise known as 1vw \*\*Don't forget to keep track of your units!! Whether it's px/rem/em/etc.\*\* Say I want to push a box towards the right a minimum of 5px, a maximum of 20px and for the push to vary between the widths 400-800px. Then I would write… ```css @media (min-width: 400px) and (max-width: 800px) { @@ -62,12 +62,12 @@ That would only make it vary between 400-800px. Now we need to include what happ } ``` -This is exactly like Mike’s pen, but instead he uses the equation to adjust the font-size between an upper and lower bound. You can apply this method to anything that accepts calc() and viewport units. Here is my [pen](http://codepen.io/brandonrozek/pen/JoQVEb){.broken_link} showing some use cases. To make your life easier, I made a quick little tool where you can input the variables and it will provide you with a simpler form of the equation to put into your calc() function [here](http://codepen.io/brandonrozek/pen/KpPwGL){.broken_link}. +This is exactly like Mike's pen, but instead he uses the equation to adjust the font-size between an upper and lower bound. You can apply this method to anything that accepts calc() and viewport units. Here is my [pen](http://codepen.io/brandonrozek/pen/JoQVEb){.broken_link} showing some use cases. To make your life easier, I made a quick little tool where you can input the variables and it will provide you with a simpler form of the equation to put into your calc() function [here](http://codepen.io/brandonrozek/pen/KpPwGL){.broken_link}. #### Animation -This is where the majority of my research went towards. It’s not as practical as say positioning an element is but I find it interesting. Like, what if I can manipulate the acceleration of the function? [f(x) = ((b - a) / (d^n - c^n))X^n + (ad^n - bc^n) / (d^n - c^n) ](https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif){.broken_link} Where a is the start unit b is the end unit c is the start time d is the end time n is the acceleration modifier and X is time The interesting part of the function here is the n. If I keep n at 1, then the acceleration is constant. If it’s less than one, then it’s fast in the beginning and slows down at the end. If it’s greater than one, then it’s the opposite. I also made a little pen [here](http://codepen.io/brandonrozek/pen/RNzdOV){.broken_link} to demo this for you. +This is where the majority of my research went towards. It's not as practical as say positioning an element is but I find it interesting. Like, what if I can manipulate the acceleration of the function? [f(x) = ((b - a) / (d^n - c^n))X^n + (ad^n - bc^n) / (d^n - c^n) ](https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif){.broken_link} Where a is the start unit b is the end unit c is the start time d is the end time n is the acceleration modifier and X is time The interesting part of the function here is the n. If I keep n at 1, then the acceleration is constant. If it's less than one, then it's fast in the beginning and slows down at the end. If it's greater than one, then it's the opposite. I also made a little pen [here](http://codepen.io/brandonrozek/pen/RNzdOV){.broken_link} to demo this for you. #### Conclusion -Having a function that goes between two points is incredibly handy. Now when it comes to positioning, I don’t have to guess which values match the design. If i cant something to be between here and there fluidly, I can do it. What about animation? Chaining them together should have an interesting affect… P.S For those of you crazy people who like to see the theory behind the math, (like myself) I have my scanned work [here](/blog/2015-04-16-function-two-points-theory/). \ No newline at end of file +Having a function that goes between two points is incredibly handy. Now when it comes to positioning, I don't have to guess which values match the design. If i cant something to be between here and there fluidly, I can do it. What about animation? Chaining them together should have an interesting affect… P.S For those of you crazy people who like to see the theory behind the math, (like myself) I have my scanned work [here](/blog/2015-04-16-function-two-points-theory/). \ No newline at end of file diff --git a/content/blog/2015-05-23-animatable-border.md b/content/blog/2015-05-23-animatable-border.md index f10e44e..54961cf 100644 --- a/content/blog/2015-05-23-animatable-border.md +++ b/content/blog/2015-05-23-animatable-border.md @@ -18,11 +18,11 @@ mf2_cite: - 'a:1:{s:6:"author";a:0:{}}' tags: ["Web", "CSS"] --- -This is part 1 of an animation series I’m doing. It is inspired by Lea Verou’s talk called “[The Humble Border-Radius.](https://www.youtube.com/watch?v=JSaMl2OKjfQ)” I looked at her site and she has a good demo of a bunch of different animations [here](http://lea.verou.me/2011/10/animatable-a-css-transitions-gallery/). My goal here is to create a more comprehensive guide to these different animatable properties–mainly for future reference. Animations play a big part in adding interactivity to the web, so why not explore some possible options? +This is part 1 of an animation series I'm doing. It is inspired by Lea Verou's talk called “[The Humble Border-Radius.](https://www.youtube.com/watch?v=JSaMl2OKjfQ)” I looked at her site and she has a good demo of a bunch of different animations [here](http://lea.verou.me/2011/10/animatable-a-css-transitions-gallery/). My goal here is to create a more comprehensive guide to these different animatable properties–mainly for future reference. Animations play a big part in adding interactivity to the web, so why not explore some possible options? -This post follows well along with my Codepen [demo](http://codepen.io/brandonrozek/full/waWMWR/){.broken_link}, where I’ll state the box number that applies to what I’m talking about. \*\*Initial values must be explicitly stated, implicit initial values are generally ignored in animation\*\* \*\\*\*In English terms, you must have already stated a value for what you are animating before you animate it\*\** +This post follows well along with my Codepen [demo](http://codepen.io/brandonrozek/full/waWMWR/){.broken_link}, where I'll state the box number that applies to what I'm talking about. \*\*Initial values must be explicitly stated, implicit initial values are generally ignored in animation\*\* \*\\*\*In English terms, you must have already stated a value for what you are animating before you animate it\*\** ### Border-color {#border-color} @@ -30,7 +30,7 @@ This post follows well along with my Codepen [demo](http://codepen.io/brandonroz * Each value corresponds to each side of the border (starting from the top and going clockwise) * Initial Value: currentColor -Border-color animates by splitting the colors to their red, green and blue components and raises/lowers them to it’s new value. ([Demo](http://codepen.io/brandonrozek/pen/PqzPMe){.broken_link}) ([Spec](http://www.w3.org/TR/css3-transitions/#animtype-color)) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here. +Border-color animates by splitting the colors to their red, green and blue components and raises/lowers them to its new value. ([Demo](http://codepen.io/brandonrozek/pen/PqzPMe){.broken_link}) ([Spec](http://www.w3.org/TR/css3-transitions/#animtype-color)) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here. ```css @keyframes color { @@ -102,7 +102,7 @@ For animation, this corresponds to #3 in the pen I made at the top. I’ll r ### Conclusion -Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!)  You don’t need to use keyframe animations to achieve this, you can also use the transition property. I used keyframes so you can better visualize what’s going on. There are plenty of other animatable properties to go through, so I’ll get started on those. In the meantime, if you want to look at some of the sites I used for research I’ll include the links below. +Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!)  You don't need to use keyframe animations to achieve this, you can also use the transition property. I used keyframes so you can better visualize what's going on. There are plenty of other animatable properties to go through, so I'll get started on those. In the meantime, if you want to look at some of the sites I used for research I'll include the links below. - - - diff --git a/content/blog/2015-09-14-animatable-box-model.md b/content/blog/2015-09-14-animatable-box-model.md index 3e1a350..53db543 100644 --- a/content/blog/2015-09-14-animatable-box-model.md +++ b/content/blog/2015-09-14-animatable-box-model.md @@ -18,7 +18,7 @@ mf2_cite: - 'a:1:{s:6:"author";a:0:{}}' tags: ["Web", "CSS"] --- -This post is part 2 of an animation series I am doing; you can read part 1 [here](https://brandonrozek.com/2015/05/animatable-border/). In this post, we’ll look at the different parts of the box model (margin, padding, height, and width) and see how they can be animated. +This post is part 2 of an animation series I am doing; you can read part 1 [here](https://brandonrozek.com/2015/05/animatable-border/). In this post, we'll look at the different parts of the box model (margin, padding, height, and width) and see how they can be animated. @@ -30,37 +30,26 @@ The W3C has a great starting reference for the [CSS Box Model](http://www.w3.org * If you use 4 values, the first value is the top margin and the rest follow in a clockwise fashion * Initial value: 0 -Margins can be described as the space around an element. In the Codepen demo (#1), it shows 2 boxes. The first box has a margin-right that is increasing, making it seem as though it’s pushing the second box away. +Margins can be described as the space around an element. In the Codepen demo (#1), it shows 2 boxes. The first box has a margin-right that is increasing, making it seem as though it's pushing the second box away. -

+```css
 @keyframes margin {
-
-to { margin-right: 7rem; }
-
+  to { margin-right: 7rem; }
 }
 
 .margin {
-
-display: inline-block;
-
-height: 5rem;
-
-width: 5rem;
-
-background-color: lightblue;
-
-vertical-align: top;
-
+  display: inline-block;
+  height: 5rem;
+  width: 5rem;
+  background-color: lightblue;
+  vertical-align: top;
 }
 
 .margin:first-of-type {
-
-margin-right: 0;
-
-animation: margin 4s ease 0s infinite;
-
+  margin-right: 0;
+  animation: margin 4s ease 0s infinite;
 }
-
+``` ### Padding @@ -70,7 +59,7 @@ animation: margin 4s ease 0s infinite; Padding is the space between the content and the border of an element. In the demo (#2),  it shows a box in which its padding is increasing. -

+```css
 @keyframes padding {
 
 to { padding: 2rem; }
@@ -78,113 +67,90 @@ to { padding: 2rem; }
 }
 
 .padding {
-
-display: inline-block;
-
-padding: 0;
-
-background-color: lightgreen;
-
-animation: padding 2.5s ease 0s infinite;
-
+  display: inline-block;
+  padding: 0;
+  background-color: lightgreen;
+  animation: padding 2.5s ease 0s infinite;
 }
-
+``` + ### Height * Accepts a non-negative number, this number is overridden however by (min/max)-height * Initial value: auto -“Height” is the height of an element without its padding, border, or margin. In the demo (#3) you can see the boxes’ height shrink, and each box begins it’s animation at a different time. +“Height” is the height of an element without its padding, border, or margin. In the demo (#3) you can see the boxes' height shrink, and each box begins its animation at a different time. -

+```css
 @keyframes height {
-
-to { height: .01rem; }
-
+  to { height: .01rem; }
 }
 
 .height {
-
-display: inline-block;
-
-height: 4rem;
-
-width: 3rem;
-
-background-color: violet;
-
-animation: height 1.25s ease 0s infinite;
-
-vertical-align: top;
-
+  display: inline-block;
+  height: 4rem;
+  width: 3rem;
+  background-color: violet;
+  animation: height 1.25s ease 0s infinite;
+  vertical-align: top;
 }
 
 .height:nth-of-type(n) {
-
-animation: height 1.25s ease .2s infinite alternate;
-
+  animation: height 1.25s ease .2s infinite alternate;
 }
 
 .height:nth-of-type(2n) {
-
-animation: height 1.25s ease .4s infinite alternate;
-
+  animation: height 1.25s ease .4s infinite alternate;
 }
 
 .height:nth-of-type(3n) {
-
-animation: height 1.25s ease .6s infinite alternate;
-
+  animation: height 1.25s ease .6s infinite alternate;
 }
-
+``` ### Width * Accepts a non-negative number, this number is overridden however by (min/max)-width * Initial value: auto -“Width” is the width of an element without its padding, border, or margin. In the demo (#4), it is similar to #3, however, it’s the width being affected as opposed to the height. +“Width” is the width of an element without its padding, border, or margin. In the demo (#4), it is similar to #3, however, its the width being affected as opposed to the height. -

+```css
 @keyframes width {
-
-to { width: .01rem; }
-
+  to { width: .01rem; }
 }
 
 .width {
-
-margin-bottom: .2rem;
-
-height: 3rem;
-
-width: 6.5rem;
-
-background-color: bisque;
-
+  margin-bottom: .2rem;
+  height: 3rem;
+  width: 6.5rem;
+  background-color: bisque;
 }
 
 .width:nth-of-type(n) {
-
-animation: width 1.25s ease .2s infinite alternate;
-
+  animation: width 1.25s ease .2s infinite alternate;
 }
 
 .width:nth-of-type(2n) {
-
-animation: width 1.25s ease .4s infinite alternate;
-
+  animation: width 1.25s ease .4s infinite alternate;
 }
 
 .width:nth-of-type(3n) {
-
-animation: width 1.25s ease .6s infinite alternate;
-
+  animation: width 1.25s ease .6s infinite alternate;
 }
-
-
+``` ### Conclusion -And so with this we can add another collection of animations to our toolbelt! If you’re wondering why I left border out of this box-model post, it’s because I have already written a post dedicated to just the [border animation](https://brandonrozek.com/2015/05/animatable-border/). Here are some of the resources I looked at for this post. Hopefully I’ll come back with another animatable post soon! {.broken_link} {.broken_link} \ No newline at end of file +And so with this we can add another collection of animations to our toolbelt! If you're wondering why I left border out of this box-model post, its because I have already written a post dedicated to just the [border animation](https://brandonrozek.com/2015/05/animatable-border/). Here are some of the resources I looked at for this post. Hopefully I'll come back with another animatable post soon! + + +- https://developer.mozilla.org/en-US/docs/Web/CSS/margin +- https://web.archive.org/web/20151112043907/https://docs.webplatform.org/wiki/css/properties/margin +- https://developer.mozilla.org/en-US/docs/Web/CSS/padding +- https://docs.webplatform.org/wiki/css/properties/padding +- https://developer.mozilla.org/en-US/docs/Web/CSS/height +- https://docs.webplatform.org/wiki/css/properties/height +- https://developer.mozilla.org/en-US/docs/Web/CSS/width +- https://web.archive.org/web/20150919163210/https://docs.webplatform.org/wiki/css/properties/width diff --git a/content/blog/2015-10-03-animatable-location.md b/content/blog/2015-10-03-animatable-location.md index 6c8bf1c..567e3a0 100644 --- a/content/blog/2015-10-03-animatable-location.md +++ b/content/blog/2015-10-03-animatable-location.md @@ -19,7 +19,7 @@ mf2_cite: - 'a:1:{s:6:"author";a:0:{}}' tags: ["Web", "CSS"] --- -Animating the location of objects is one of the most common types of animation. It’s interesting to animate this way because you need to keep in mind how each of the element’s interact with each other to constitute a page. +Animating the location of objects is one of the most common types of animation. It's interesting to animate this way because you need to keep in mind how each of the elements interact with each other to constitute a page. @@ -29,7 +29,7 @@ This is part 4 of my series on animation. Check out the other parts of this seri * Part 2 — [Animatable: Box Model](https://brandonrozek.com/2015/09/animatable-box-model/) * Part 3 — [Animatable: Text](https://brandonrozek.com/2015/10/animatable-text/) -This post goes along well with this [Codepen demo](http://codepen.io/brandonrozek/full/NGbWzo/){.broken_link}, I’ll reference it multiple times in this post. Now onto animations! +This post goes along well with this [Codepen demo](http://codepen.io/brandonrozek/full/NGbWzo/){.broken_link}, I'll reference it multiple times in this post. Now onto animations! ### background-position @@ -37,87 +37,60 @@ This post goes along well with this [Codepen demo](http://codepen.io/brandonroze * Offset-x | Offset-Y * Initial Value: 0% 0% -Background-position sets where the background is relative to it’s background-origin. In the Codepen demo (#1), you can see the background image scrolling horizontally. +Background-position sets where the background is relative to its background-origin. In the Codepen demo (#1), you can see the background image scrolling horizontally. -
 
+```css
 @keyframes background-position {
-
  to { background-position: 100% 0%; }
-
 }
 
 .background-position {
   background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d3/Tajik_mountains_edit.jpg);
-
   height: 6rem;
-
   width: 8rem;
-
   background-size: 200% 100%;
-
   background-position: 0% 0%;
-
   animation: background-position 5s linear .1s infinite alternate;
-
 }
-
+``` + + ### position with left, right, top, bottom * Accepts length, percentage, or some keywords * Initial value: auto -The left, right, top, and bottom properties require the position to be set to something other than static. When you add a value to any of these properties just imagine that value pushing the element on that side. For example: for “left: 2rem” imagine that the element is being pushed on the left side by 2rem, making it move to the right 2rem. In the demo (#2), the box is being pushed in a square path. +The left, right, top, and bottom properties require the position to be set to something other than static. When you add a value to any of these properties just imagine that value pushing the element on that side. For example: for `left: 2rem` imagine that the element is being pushed on the left side by 2rem, making it move to the right 2rem. In the demo (#2), the box is being pushed in a square path. -

+```css
 @keyframes position {
-
   25% {
-
     top: 0;
-    
     left: 3rem;
-
   }
 
   50% {
-
     top: 3rem;
-    
     left: 3rem;
-
   }
 
   75% {
-
     top: 3rem;
-    
     left: 0;
-
   }
-
 }
 
 .position {
-
   position: relative;
-
   top: 0;
-
   left: 0;
-
   height: 3rem;
-
   width: 3rem;
-
   background-color: lightblue;
-
   animation: position 1.5s ease .1s infinite;
-
 }
-
- -  +``` ### vertical-align @@ -126,23 +99,18 @@ The left, right, top, and bottom properties require the position to be set to so Vertical-align sets how vertically the inline element or text is compared to the baseline. In the Codepen demo (#3), the question has its vertical align being manipulated which causes the “Maybe” to bounce up and down. -

+```css
 @keyframes vertical-align {
-
   to { vertical-align: 1rem; }
-
 }
 
 .vertical-align {
-
   font-size: 1.5rem;
-
   vertical-align: 0;
-
   animation: vertical-align 1s ease-out .1s infinite alternate;
-
 }
-
+``` + ### z-index @@ -151,78 +119,58 @@ Vertical-align sets how vertically the inline element or text is compared to the If elements overlap, z-index determines which element appears on top. If the z-index is the same, then it is controlled by source order. In the demo (#4), The z-index of the biggest box changes, revealing what is under it. -

+```css
 @keyframes z-index {
-
   to { z-index: 0; }
-
 }
 
 .z-index {
-
   position: absolute;
-
   left: 1rem;
-
   display: inline-block;
-
 }
 
 .z-index:nth-child(1) {
-
   height: 1rem;
-
   width: 1rem;
-
   background-color: lightgreen;
-
   z-index: 4;
-
 }
 
 .z-index:nth-child(2) {
-
   height: 2rem;
-
   width: 2rem;
-
   background-color: #F4FFA4;
-
   z-index: 3;
-
 }
 
 .z-index:nth-child(3) {
-
   height: 3rem;
-
   width: 3rem;
-
   background-color: #DEB0ED;
-
   z-index: 2;
-
 }
 
 .z-index:nth-child(4) {
-
   height: 4rem;
-
   width: 4rem;
-
   background-color: #D8EADF;
-
   z-index: 5;
-
   animation: z-index 1s ease .1s infinite alternate;
-
 }
-
+``` ### Conclusion -By animating the location of an element, it opens up a whole bunch of different opportunities. Using motion, you can signify that the user has indeed pressed the button, instead of what would otherwise leave them there clicking on the button multiple times thinking that nothing has happened. Using motion, you can bring a webpage that would’ve otherwise been boring to life. Use these animations to work, and I’ll be back with another animatable post soon! +By animating the location of an element, it opens up a whole bunch of different opportunities. Using motion, you can signify that the user has indeed pressed the button, instead of what would otherwise leave them there clicking on the button multiple times thinking that nothing has happened. Using motion, you can bring a webpage that would've otherwise been boring to life. Use these animations to work, and I'll be back with another animatable post soon! #### The links - {.broken_link} {.broken_link} {.broken_link} {.broken_link} \ No newline at end of file +- https://developer.mozilla.org/en-US/docs/Web/CSS/background-position +- https://developer.mozilla.org/en-US/docs/Web/CSS/left +- https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align +- https://developer.mozilla.org/en-US/docs/Web/CSS/z-index +- https://docs.webplatform.org/wiki/css/properties/background-position +- https://docs.webplatform.org/wiki/css/properties/left +- https://docs.webplatform.org/wiki/css/properties/vertical-align +- https://docs.webplatform.org/wiki/css/properties/z-index diff --git a/content/blog/2015-10-04-html-css-javascript-link-together.md b/content/blog/2015-10-04-html-css-javascript-link-together.md index 7510976..de3993b 100644 --- a/content/blog/2015-10-04-html-css-javascript-link-together.md +++ b/content/blog/2015-10-04-html-css-javascript-link-together.md @@ -18,7 +18,7 @@ mf2_cite: - 'a:1:{s:6:"author";a:0:{}}' tags: ["Web"] --- -I’ve been teaching a small class on web development recently, and after my first lecture, I’ve gained a newfound respect for teachers. Teaching didn’t come as naturally to me as I would have imagined. I tried going in prepared: with a few outlines and a few code demos. Instead of letting my preparation go to waste, I decided to share them here with you on my site. It’s a nice break from the Animatable posts, so I hope you enjoy! +I've been teaching a small class on web development recently, and after my first lecture, I've gained a newfound respect for teachers. Teaching didn't come as naturally to me as I would have imagined. I tried going in prepared: with a few outlines and a few code demos. Instead of letting my preparation go to waste, I decided to share them here with you on my site. It's a nice break from the Animatable posts, so I hope you enjoy! @@ -27,15 +27,15 @@ I suggest a couple short readings to check out before the lecture: * [What is CSS](http://www.sitepoint.com/web-foundations/css/) by Adam Roberts * [Box Model](http://www.w3.org/TR/CSS2/box.html) by the W3C -Take a quick look if you wish. These are mostly to give an idea of what is going to happen over the next few lectures. What is HTML, CSS, and Javascript? We’ll look into the different parts that form a webpage and how they all interact with each other. +Take a quick look if you wish. These are mostly to give an idea of what is going to happen over the next few lectures. What is HTML, CSS, and Javascript? We'll look into the different parts that form a webpage and how they all interact with each other. ## HTML -HTML is where the content of your site lives. It’s also the file the server returns to no matter what, the bare-bones of a webpage. This file may contain text, pictures, and/or other media. +HTML is where the content of your site lives. It's also the file the server returns to no matter what, the bare-bones of a webpage. This file may contain text, pictures, and/or other media. ## CSS -This is where you style your content. Whether it’s through colors, layout, or typography, there are plenty of different ways for you to visually manipulate your content. +This is where you style your content. Whether it's through colors, layout, or typography, there are plenty of different ways for you to visually manipulate your content. ## Javascript @@ -49,77 +49,79 @@ HTML, CSS, and Javascript each do what they do the best. So how can you have the Link the CSS file -

-  <link rel='stylesheet' href='style.css' />
-
+```html + +``` Link the Javascript file -

-  <script src='script.js'></script>
-
+```html + +``` -Give the

tag a class of hello and id of world to use in CSS and Javascript +Give the `

` tag a class of hello and id of world to use in CSS and Javascript -


-  <p class='hello' id='world'></p>
-
+```html +

+``` ### In CSS -Refer to any element with class=’hello’ and change it’s text color to red. +Refer to any element with `class='hello'` and change it's text color to red. -

+```css
 .hello { color: red; }
-
+``` -Any element with an id=’world’ will have it’s font-size changed to 2rem +Any element with an `id='world'` will have it's font-size changed to 2rem -

+```css
 #world { font-size: 2rem; }
-
+``` -You don’t have to only use the class and id attributes in html, you can refer to any attribute. This code snippet grabs any canvas element with data=’sales’ and changes it’s border to be 5px thick, dashed, and the color blue. -

+You don't have to only use the class and id attributes in html, you can refer to any attribute. This code snippet grabs any canvas element with `data='sales'` and changes it's border to be 5px thick, dashed, and the color blue.
+
+```css
 canvas[data=sales] { border: 5px dashed blue; }
-
+``` ### In Javascript Javascript has many properties and methods you can use to reference different HTML elements To grab (an) element(s) -

+```js
 document.getElementById();
 document.getElementsByClassName(); //Returns an array of element(s)
 document.querySelector(); //Returns the first matching selector
 document.querySelectorAll(); //Returns an array of element(s)
-
+``` To add a class to an element -

+```js
 element.className += “ random-class” //Note the space
-
+ +``` To check whether a certain condition is true in the browser -

+```js
 window.matchMedia('aspect-ratio: 12/8'); //Returns true if the aspect ratio is 12/8
 window.innerHeight; //Is the height of the window
 window.innerWidth; //Is the width of the window
-
+``` _And a lot more_ ## What should handle what? -HTML, CSS, and Javascript should all handle what each of them does best. HTML should handle the content, CSS should handle the styles/presentation, and Javascript should handle the behavior of the webpage. Why, you ask? One reason is that it demonstrates a “separation of concerns”. It would be a mess if you’re writing an article in the HTML and you put style attributes all over the place. That would make the markup confusing and hard to read/edit. +HTML, CSS, and Javascript should all handle what each of them does best. HTML should handle the content, CSS should handle the styles/presentation, and Javascript should handle the behavior of the webpage. Why, you ask? One reason is that it demonstrates a “separation of concerns”. It would be a mess if you're writing an article in the HTML and you put style attributes all over the place. That would make the markup confusing and hard to read/edit. -## Can’t I just put everything in a Javascript file? +## Can't I just put everything in a Javascript file? -Yes you can, but then you lose some of the great features of HTML and CSS. HTML and CSS ignore everything that it doesn’t understand. When Javascript encounters something it doesn’t understand, it stops running the code completely, regardless of what comes after. Please note that I am only speaking about what gets served to the user. When it comes to what’s actually on your server, then store your content however you wish. +Yes you can, but then you lose some of the great features of HTML and CSS. HTML and CSS ignore everything that it doesn't understand. When Javascript encounters something it doesn't understand, it stops running the code completely, regardless of what comes after. Please note that I am only speaking about what gets served to the user. When it comes to what's actually on your server, then store your content however you wish. ## Conclusion -To me personally, my first lecture was a mess. Some of my examples didn’t work properly in the first type-through and I was everywhere. Though, to be sharing the little knowledge I do have, comes with it’s own joy. It must not have gone as terrible as I imagined it in my head because they seemed enthusiastic for the next lecture. So I’m excited to share this outline with you, and hopefully I’ll have many more to come. Until next time. 🙂 \ No newline at end of file +To me personally, my first lecture was a mess. Some of my examples didn't work properly in the first type-through and I was everywhere. Though, to be sharing the little knowledge I do have, comes with its own joy. It must not have gone as terrible as I imagined it in my head because they seemed enthusiastic for the next lecture. So I'm excited to share this outline with you, and hopefully I'll have many more to come. Until next time. 🙂 \ No newline at end of file