brozek/website
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website.git synced 2025-08-02 07:02:01 +00:00
Code Issues Projects Releases Packages Activity

HTML pre snippets to Markdown code snippets

Browse source
This commit is contained in:
Brandon Rozek 2025-02-16 11:27:53 -05:00
parent fd5c0865b5
commit 3b1974b3fd
5 changed files with 121 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
content/blog/2015-04-16-responsive-layout-and-animation.md
View file

@ -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&#8230; [<img class="aligncenter size-full wp-image-58" src="https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif" alt="f(x) = (100 * (b - a)/(d - c))X + (ad - bc) / (d - c)" width="219" height="36" />](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&#8217;t forget to keep track of your units!! Whether it&#8217;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&#8230;
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&#8230; [<img class="aligncenter size-full wp-image-58" src="https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif" alt="f(x) = (100 * (b - a)/(d - c))X + (ad - bc) / (d - c)" width="219" height="36" />](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&#8230;
```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&#8217;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&#8217;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? [<img class="aligncenter size-full wp-image-62" src="https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif" alt="f(x) = ((b - a) / (d^n - c^n))X^n + (ad^n - bc^n) / (d^n - c^n) " width="202" height="36" />](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&#8217;s less than one, then it&#8217;s fast in the beginning and slows down at the end. If it&#8217;s greater than one, then it&#8217;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? [<img class="aligncenter size-full wp-image-62" src="https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif" alt="f(x) = ((b - a) / (d^n - c^n))X^n + (ad^n - bc^n) / (d^n - c^n) " width="202" height="36" />](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&#8217;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&#8230; 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/).
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&#8230; 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/).

8
content/blog/2015-05-23-animatable-border.md
View file

@ -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&#8217;m doing. It is inspired by Lea Verou&#8217;s talk called &#8220;[The Humble Border-Radius.](https://www.youtube.com/watch?v=JSaMl2OKjfQ)&#8221; 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&#8211;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 &#8220;[The Humble Border-Radius.](https://www.youtube.com/watch?v=JSaMl2OKjfQ)&#8221; 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&#8211;mainly for future reference. Animations play a big part in adding interactivity to the web, so why not explore some possible options?
<!--more-->
This post follows well along with my Codepen [demo](http://codepen.io/brandonrozek/full/waWMWR/){.broken_link}, where I&#8217;ll state the box number that applies to what I&#8217;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&#8217;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&#8217;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&#8217;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&#8217;s going on. There are plenty of other animatable properties to go through, so I&#8217;ll get started on those. In the meantime, if you want to look at some of the sites I used for research I&#8217;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.
- <https://developer.mozilla.org/en-US/docs/Web/CSS/animation>
- <http://www.w3.org/TR/css3-transitions/#animatable-css>
- <https://developer.mozilla.org/en-US/docs/Web/CSS/border-color>

142
content/blog/2015-09-14-animatable-box-model.md
View file

@ -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&#8217;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.
<!--more-->
@ -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&#8217;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.
<pre><code class="language-css">
```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;
}
</code></pre>
```
### 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.
<pre><code class="language-css">
```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;
}
</code></pre>
```
### Height
* Accepts a non-negative number, this number is overridden however by (min/max)-height
* Initial value: auto
&#8220;Height&#8221; is the height of an element without its <span><span> padding, border, or margin. In the demo (#3) you can see the boxes&#8217; height shrink, and each box begins it&#8217;s animation at a different time. </span></span>
&#8220;Height&#8221; 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.
<pre><code class="language-css">
```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;
}
</code></pre>
```
### Width
* Accepts a non-negative number, this number is overridden however by (min/max)-width
* Initial value: auto
&#8220;Width&#8221; is the width of an element without its <span><span> padding, border, or margin. In the demo (#4), it is similar to #3, however, it&#8217;s the width being affected as opposed to the height. </span></span>
&#8220;Width&#8221; 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.
<pre><code class="language-css">
```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;
}
</code></pre>
```
### Conclusion
And so with this we can add another collection of animations to our toolbelt! If you&#8217;re wondering why I left border out of this box-model post, it&#8217;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&#8217;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>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/height> <https://docs.webplatform.org/wiki/css/properties/height>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/width> <https://web.archive.org/web/20150919163210/https://docs.webplatform.org/wiki/css/properties/width>
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

100
content/blog/2015-10-03-animatable-location.md
View file

@ -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&#8217;s interesting to animate this way because you need to keep in mind how each of the element&#8217;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.
<!--more-->
@ -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&#8217;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&#8217;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.
<pre><code class="language-css">
```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;
}
</code></pre>
```
### 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 &#8220;left: 2rem&#8221; 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.
<pre><code class="language-css">
```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;
}
</code></pre>
 
```
### 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 &#8220;Maybe&#8221; to bounce up and down.
<pre><code class="language-css">
```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;
}
</code></pre>
```
### 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.
<pre><code class="language-css">
```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;
}
</code></pre>
```
### 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&#8217;ve otherwise been boring to life. Use these animations to work, and I&#8217;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
<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>{.broken_link} <https://docs.webplatform.org/wiki/css/properties/left>{.broken_link} <https://docs.webplatform.org/wiki/css/properties/vertical-align>{.broken_link} <https://docs.webplatform.org/wiki/css/properties/z-index>{.broken_link}
- 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

68
content/blog/2015-10-04-html-css-javascript-link-together.md
View file

@ -18,7 +18,7 @@ mf2_cite:
- 'a:1:{s:6:"author";a:0:{}}'
tags: ["Web"]
---
I&#8217;ve been teaching a small class on web development recently, and after my first lecture, I&#8217;ve gained a newfound respect for teachers. Teaching didn&#8217;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&#8217;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!
<!--more-->
@ -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&#8217;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&#8217;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&#8217;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
<pre><code class="language-markup">
&lt;link rel='stylesheet' href='style.css' /&gt;
</code></pre>
```html
<link rel='stylesheet' href='style.css'>
```
Link the Javascript file
<pre><code class="language-markup">
&lt;script src='script.js'&gt;&lt;/script&gt;
</code></pre>
```html
<script src='script.js'></script>
```
Give the <p> tag a class of hello and id of world to use in CSS and Javascript
Give the `<p>` tag a class of hello and id of world to use in CSS and Javascript
<pre><code class="language-markup">
&lt;p class='hello' id='world'&gt;&lt;/p&gt;
</code></pre>
```html
<p class='hello' id='world'></p>
```
### In CSS
Refer to any element with class=&#8217;hello&#8217; and change it&#8217;s text color to red.
Refer to any element with `class='hello'` and change it's text color to red.
<pre><code class="language-css">
```css
.hello { color: red; }
</code></pre>
```
Any element with an id=&#8217;world&#8217; will have it&#8217;s font-size changed to 2rem
Any element with an `id='world'` will have it's font-size changed to 2rem
<pre><code class="language-css">
```css
#world { font-size: 2rem; }
</code></pre>
```
You don&#8217;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=&#8217;sales&#8217; and changes it&#8217;s border to be 5px thick, dashed, and the color blue.
<pre><code class="language-css">
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; }
</code></pre>
```
### In Javascript
Javascript has many properties and methods you can use to reference different HTML elements To grab (an) element(s)
<pre><code class="language-javascript">
```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)
</code></pre>
```
To add a class to an element
<pre><code class="language-javascript">
```js
element.className += “ random-class” //Note the space
</code></pre>
```
To check whether a certain condition is true in the browser
<pre><code class="language-javascript">
```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
</code></pre>
```
_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 &#8220;separation of concerns&#8221;. It would be a mess if you&#8217;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 &#8220;separation of concerns&#8221;. 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&#8217;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&#8217;t understand. When Javascript encounters something it doesn&#8217;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&#8217;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&#8217;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&#8217;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&#8217;m excited to share this outline with you, and hopefully I&#8217;ll have many more to come. Until next time. 🙂
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. 🙂