Audit (OPTIONAL)


Hello. I know what you are going to say. Why are you posting? The Semester is over. I don’t know the answer to that. I have a lot of free time on my hands so I deiced to make a recap post of this semester. I was attempting to create a portfolio using SASS / BEM / 7-1 Architecture, but I noticed that it was taking a while. I am still creating this portfolio based off Trillo and Natours page. My goal is to create a page with all CT courses I have taken such as Web Development 1, Web Design 1 & 2.

In the meantime, I made a simple project that links to the directory and blog post. This is a showcase of all my work I have done this semester. I have done all the blog post response and everything. I am aware that the grades have already gone in and I have seen some of my grades. I don’t want to alter them. I just wanted to finish this because I was halfway through it (and I have a lot of free time since I graduated).

You can check out the website here!

I had fun creating this blog post. There will be a similar one on Web Development 1. Overall, this semester was great. I had a fun time learning all the new CSS tricks and techniques. Take care!


HTML and CSS for Final Project

The code for this project was a lot. It came down to having a lot of content to sift through and I believe that I got lost a couple of times. I have a few mistakes, in the last code I did, I was unable to get the main images aligned in column 8 and column 4. With it being so difficult, I wanted to write my blogposts and troubleshoot in the morning when I get up. While I’m disappointed in myself for not having more time to troubleshoot this problem like I did with the others, I hope I can have an update for this problem once I’m finished with the last tutorial.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title> Version 4</title>
    <link rel= "stylesheet" href="css/gridlex.css"/>
    <link rel="stylesheet" href="css/style4.css" /> 
</head>

    <body>
    <div class="container">
        <div class="grid">
            <div class="col-6">
                <div class="card card-feature">
                <div class="card-media">
                  <img class="card-image" src="img/wise-owl.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">If only you could see what I've seen with your eyes</a>
                  </h2>
                  <p class="card-slug">
                    I've seen things you people wouldn't believe. Attack ships on
                    fire off the shoulder of Orion. I watched C-beams glitter in the
                    dark near the Tannhauser gate. All those moments will be lost in
                    time... like tears in rain...
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Batty Owl</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6 grid"> 
            <div class="col-12">
                <div class="card card-main-primary">
               
                <div class="card-media">
                  <img class="card-image" src="img/couple.jpg" alt="" />
                </div>
                <div class="card-body">

                  <h3 class="card-category">Love</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                  </h2>
                  <p class="card-slug">
                    Come on, what's the problem here? I'm a boy. You're a girl. Is
                    there any thing wrong with me trying to put together some kind
                    of relationship between us?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Geek Zombie</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>

                </div>
              </div>
            </div>
            <div class="col-6">
                <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/thing2.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Jobs</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">When looking for a career, start with the things you don't
                          want to do</a>
                      </h2>
                      <p class="card-slug">
                        I don't want to sell anything, buy anything, or process anything
                        as a career. I don't want to sell anything bought or processed,
                        or buy anything sold or processed, or process anything sold,
                        bought, or processed, or repair anything sold, bought, or
                        processed.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Fuzzy Wuzzy Dobler</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/birds-girl-escape.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Rewind</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">If you had a chance to go back and do it all differently,
                          what would you have changed?</a>
                      </h2>
                      <p class="card-slug">
                        I happen to know that in the future I will not have the
                        slightest use for algebra, trust me I speak from experience. I
                        want to have fun. I want to go to Liverpool and discover the
                        Beatles.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Peggy Sue</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/the-dude.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Advice</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">Yeah, well, you know, that's just like, uh, your opinion,
                          man.</a>
                      </h2>
                      <p class="card-slug">
                        Let me explain something to you. Um, I am not "Mr. Lebowski".
                        You're Mr. Lebowski. I'm the Dude. So that's what you call me.
                        You know, that or, uh, His Dudeness, or uh, Duder, or El
                        Duderino if you're not into the whole brevity thing.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">The Dude</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/stormtrooper-fawkes.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Advice</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">Not a dice roll: ten tips to stand out in a crowd</a>
                      </h2>
                      <p class="card-slug">
                        Valorous visitation of a by-gone vexation, stands vivified and
                        has vowed to vanquish these venal and virulent vermin
                        vanguarding vice and vouchsafing the violently vicious and
                        voracious violation of volition!
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Trooper Fawkes</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
            </div>
            <div class="col-6">
                <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/couple.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Love</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                      </h2>
                      <p class="card-slug">
                        Come on, what's the problem here? I'm a boy. You're a girl. Is
                        there any thing wrong with me trying to put together some kind
                        of relationship between us?
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Geek Zombie</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/banksy.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Tech</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">Was it dormanted or deleted? Inoperative or Excised? Maybe
                          completed.</a>
                      </h2>
                      <p class="card-slug">
                        Information Transit got the wrong man. I got the *right* man.
                        The wrong one was delivered to me as the right man, I accepted
                        him on good faith as the right man. Was I wrong?
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Buttle Tuttle</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/game-over-man.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Animals</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">That's it, man. Game over, man. Game over! What are we gonna
                          do?</a>
                      </h2>
                      <p class="card-slug">
                        Seventeen *days*? Hey man, I don't wanna rain on your parade,
                        but we're not gonna last seventeen hours! Those things are gonna
                        come in here just like they did before. And they're gonna come
                        in here and they're gonna get us!
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Private Hudson</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
                  <div class="card card-main-secondary">
                    <div class="card-media">
                      <img class="card-image" src="img/cowboy.jpg" alt="" />
                    </div>
                    <div class="card-body">
                      <h3 class="card-category">Tech</h3>
                      <h2 class="card-title">
                        <a href="#" class="title-link">The sacred trust that a free society is founded on</a>
                      </h2>
                      <p class="card-slug">
                        Never broke into a car, never hotwired a car. Never broke into a
                        truck. 'I shall not cause harm to any vehicle nor the personal
                        contents thereof, nor through inaction let the personal contents
                        thereof come to harm'.
                      </p>
                      <div class="card-by-line">
                        <h4 class="card-author">
                          by <a href="#" class="author-link">Bud</a>
                        </h4>
                        <h4 class="card-date">March 4, 2020</h4>
                      </div>
                    </div>
                  </div>
            </div>
            </div>
        </div>
    </div>  
       <div class="card card-feature">
            <div class="card-media">
              <img class="card-image" src="img/wise-owl.jpg" alt="" />
            </div>
            <div class="card-body">
              <h3 class="card-category">Advice</h3>
              <h2 class="card-title">
                <a href="#" class="title-link">If only you could see what I've seen with your eyes</a>
              </h2>
              <p class="card-slug">
                I've seen things you people wouldn't believe. Attack ships on
                fire off the shoulder of Orion. I watched C-beams glitter in the
                dark near the Tannhauser gate. All those moments will be lost in
                time... like tears in rain...
              </p>
              <div class="card-by-line">
                <h4 class="card-author">
                  by <a href="#" class="author-link">Batty Owl</a>
                </h4>
                <h4 class="card-date">March 4, 2020</h4>
              </div>
            </div>
          </div>
      
    
<div class="container container-lower">
    <div class="grid">
        <div class="col-8">
            <div class="card card-main">
                <div class="card-media">
                    <img src="img/tech-head.jpg" alt="" class="card-image">
                </div>
                <div class="card-body">
                    <h3 class="card-category">Tech</h3>
                    <h2 class="card-title"><a href="#" class="title-link">The Latest and Greatest Thing in Widgets that blink and make our lives better</a></h2>
                    <p class="card-slug">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, corrupti doloremque nam ut aliquid eos at vitae expedita dolor ipsa tempora aperiam eius, voluptatibus ex, quo asperiores ipsam ipsum quibusdam!</p>
                    <div class="card-by-line">
                        <h4 class="card-author">by <a href="#" class="author-link">  Mr.Techy Head</a></h4>
                        <h4 class="card-date">May 2, 2020</h4>
                    </div>
                </div>
            </div>
            <div class="card card-main">
                <div class="card-media">
                    <img src="img/tree.jpg" alt="" class="card-image">
                </div>
                <div class="card-body">
                    <h3 class="card-category">Travel</h3>
                    <h2 class="card-title"><a href="#" class="title-link">The Latest and Greatest picture You can never really Take in nature</a></h2>
                    <p class="card-slug">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, corrupti doloremque nam ut aliquid eos at vitae expedita dolor ipsa tempora aperiam eius, voluptatibus ex, quo asperiores ipsam ipsum quibusdam!</p>
                    <div class="card-by-line">
                        <h4 class="card-author">by <a href="#" class="author-link"> by Mr.Travel Bones</a></h4>
                        <h4 class="card-date">May 2, 2020</h4>
                    </div>
                </div>
            </div>
            <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/couple.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Love</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                  </h2>
                  <p class="card-slug">
                    Come on, what's the problem here? I'm a boy. You're a girl. Is
                    there any thing wrong with me trying to put together some kind
                    of relationship between us?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Geek Zombie</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/stormtrooper-fawkes.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Not a dice roll: ten tips to stand out in a crowd</a>
                  </h2>
                  <p class="card-slug">
                    Valorous visitation of a by-gone vexation, stands vivified and
                    has vowed to vanquish these venal and virulent vermin
                    vanguarding vice and vouchsafing the violently vicious and
                    voracious violation of volition!
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Trooper Fawkes</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-feature-hero">
                <div class="card-media">
                  <img class="card-image" src="img/stormtrooper-fawkes.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Not a dice roll: ten tips to stand out in a crowd</a>
                  </h2>
                  <p class="card-slug">
                    Valorous visitation of a by-gone vexation, stands vivified and
                    has vowed to vanquish these venal and virulent vermin
                    vanguarding vice and vouchsafing the violently vicious and
                    voracious violation of volition!
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Trooper Fawkes</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/couple.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Love</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">By night's end, I predict me and her will interface.</a>
                  </h2>
                  <p class="card-slug">
                    Come on, what's the problem here? I'm a boy. You're a girl. Is
                    there any thing wrong with me trying to put together some kind
                    of relationship between us?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Geek Zombie</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/thing2.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Jobs</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">When looking for a career, start with the things you don't
                      want to do</a>
                  </h2>
                  <p class="card-slug">
                    I don't want to sell anything, buy anything, or process anything
                    as a career. I don't want to sell anything bought or processed,
                    or buy anything sold or processed, or process anything sold,
                    bought, or processed, or repair anything sold, bought, or
                    processed.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Fuzzy Wuzzy Dobler</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/birds-girl-escape.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Rewind</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">If you had a chance to go back and do it all differently,
                      what would you have changed?</a>
                  </h2>
                  <p class="card-slug">
                    I happen to know that in the future I will not have the
                    slightest use for algebra, trust me I speak from experience. I
                    want to have fun. I want to go to Liverpool and discover the
                    Beatles.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Peggy Sue</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/the-dude.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Advice</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Yeah, well, you know, that's just like, uh, your opinion,
                      man.</a>
                  </h2>
                  <p class="card-slug">
                    Let me explain something to you. Um, I am not "Mr. Lebowski".
                    You're Mr. Lebowski. I'm the Dude. So that's what you call me.
                    You know, that or, uh, His Dudeness, or uh, Duder, or El
                    Duderino if you're not into the whole brevity thing.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">The Dude</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-feature-hero">
                <div class="card-media">
                  <img class="card-image" src="img/she.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Trending</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">It's kind of a double edged sword isn't it?</a>
                  </h2>
                  <p class="card-slug">
                    If you say you haven't, you're a prude. If you say you have
                    you're a slut. It's a trap. You want to but you can't, and when
                    you do you wish you didn't, right?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">A Basket Case</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/banksy.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Tech</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">Was it dormanted or deleted? Inoperative or Excised? Maybe
                      completed.</a>
                  </h2>
                  <p class="card-slug">
                    Information Transit got the wrong man. I got the *right* man.
                    The wrong one was delivered to me as the right man, I accepted
                    him on good faith as the right man. Was I wrong?
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Buttle Tuttle</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/game-over-man.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Animals</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">That's it, man. Game over, man. Game over! What are we gonna
                      do?</a>
                  </h2>
                  <p class="card-slug">
                    Seventeen *days*? Hey man, I don't wanna rain on your parade,
                    but we're not gonna last seventeen hours! Those things are gonna
                    come in here just like they did before. And they're gonna come
                    in here and they're gonna get us!
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Private Hudson</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
              </div>
              <div class="card card-main">
                <div class="card-media">
                  <img class="card-image" src="img/cowboy.jpg" alt="" />
                </div>
                <div class="card-body">
                  <h3 class="card-category">Tech</h3>
                  <h2 class="card-title">
                    <a href="#" class="title-link">The sacred trust that a free society is founded on</a>
                  </h2>
                  <p class="card-slug">
                    Never broke into a car, never hotwired a car. Never broke into a
                    truck. 'I shall not cause harm to any vehicle nor the personal
                    contents thereof, nor through inaction let the personal contents
                    thereof come to harm'.
                  </p>
                  <div class="card-by-line">
                    <h4 class="card-author">
                      by <a href="#" class="author-link">Bud</a>
                    </h4>
                    <h4 class="card-date">March 4, 2020</h4>
                  </div>
                </div>
                
                  <div class="card card-feature-hero">
            
            </div>

            </div>
        </div>
        <div class= "col-4">

            <div class="card card-feature">
                <div class="card-media">
                    <img class= " card-image" src="img/tech-head.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class=" card-image" src="img/tech-head.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class= "class-image"src="img/stormtrooper-fawkes.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class= "card-image" src="img/containers.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class= "class-image" src="img/fashion.jpg" alt=""/>
                </div>
            </div>
            <div class="card card-feature">
                <div class="card-media">
                    <img class="class-image" src="img/plane.jpg" alt=""/>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>


Html Code for the Tasty Recipe

<!DOCTYPE html>
<html>
<head>
<title> How to Make Macaroons</title>
<h1> The Most Fool-Proof Macaroons You'll Ever Make </h1>
<link rel ="stylesheet"type="text/css" href="tastyrecipe.css">
</head>
<h3>Serving 30</h3>
<body> 
    <a href = "https://www.youtube.com/watch?v=MjVgIXccYXA">
    <img src =" https://img.buzzfeed.com/thumbnailer-prod-us-east-1/video-api/assets/169986.jpg?fill=1920:1080" alt = "image" height = "500" width= "700">
</a>

<p>  This is a quick and easy recipe for the 'oh so hard to make' Macaroons!  
    This is a quick HTML project for my class. <br> 
    The video was created by <a href="https://www.buzzfeed.com/bfmp/videos/46521"> BFMP </a> and presented on their <a href = "https://www.youtube.com/watch?v=MjVgIXccYXA"> Youtube Channel</a>
</p>
<hr> 
<h2> Ingredients </h2>
<h3>Macaroons </h3>
<ul>
    <li> 1 3/4 cups powdered sugar</li>
    <li>1 cup almond flour, finely ground</li>
    <li>1 teaspoon salt, divided</li>
    <li>3 egg whites, at room temperature </li>
    <li>1/4 cup granulated suagar</li>
    <li>1/2 teaspoon vanilla extract</li>
    <li>2 drops pink gel food coloring</li>
</ul>
<h3>Vanilla Buttercream</h3>
<ul>
    <li>1 cup unsalted butter, 2 sticks, at room temperature </li>
    <li>3 cups powdered sugar</li>
    <li>1 teaspoon vanilla extract</li>
    <li>3 tablespoons heavy cream</li>
</ul>
<hr> 
<h2>Preparation</h2>
<ol> 
    <li>Make the macarons: In the bowl of a food processor, combine the powdered sugar, almond flour, and ½ teaspoon of salt, and process on low speed, until extra fine. Sift the almond flour mixture through a fine-mesh sieve into a large bowl.</li>
    <li>In a separate large bowl, beat the egg whites and the remaining ½ teaspoon of salt with an electric hand mixer until soft peaks form. Gradually add the granulated sugar until fully incorporated. Continue to beat until stiff peaks form (you should be able to turn the bowl upside down without anything falling out).</li>
    <li>Add the vanilla and beat until incorporated. Add the food coloring and beat until just combined.</li>
    <li>Add about ⅓ of the sifted almond flour mixture at a time to the beaten egg whites and use a spatula to gently fold until combined. After the last addition of almond flour, continue to fold slowly until the batter falls into ribbons and you can make a figure 8 while holding the spatula up.</li>
    <li>Transfer the macaron batter into a piping bag fitted with a round tip.</li>
    <li>Place 4 dots of the batter in each corner of a rimmed baking sheet, and place a piece of parchment paper over it, using the batter to help adhere the parchment to the baking sheet.</li>
    <li>Pipe the macarons onto the parchment paper in 1½-inch (3-cm) circles, spacing at least 1-inch (2-cm) apart.</li>
    <li>Tap the baking sheet on a flat surface 5 times to release any air bubbles.</li>
    <li>Let the macarons sit at room temperature for 30 minutes to 1 hour, until dry to the touch.</li>
    <li>Preheat the oven to 300˚F (150˚C).</li>
    <li>Bake the macarons for 17 minutes, until the feet are well-risen and the macarons don’t stick to the parchment paper.</li>
    <li>Transfer the macarons to a wire rack to cool completely before filling.</li>
    <li>Make the buttercream: In a large bowl, add the butter and beat with a mixer for 1 minute until light and fluffy. Sift in the powdered sugar and beat until fully incorporated. Add the vanilla and beat to combine. Add the cream, 1 tablespoon at a time, and beat to combine, until desired consistency is reached.</li>
    <li>Transfer the buttercream to a piping bag fitted with a round tip.</li>
    <li>Add a dollop of buttercream to one macaron shell. Top it with another macaron shell to create a sandwich. Repeat with remaining macaron shells and buttercream.</li>
    <li>Place in an airtight container for 24 hours to “bloom”.</li>
    <li>Enjoy!</li>
</ol>
<hr>
<h2> Follow The Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MjVgIXccYXA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr> 
<h3>Nutritonal Chart</h3>
<table> 
<thead>
    <th> Source </th>
    
    <th>Amount</th>
</thead>
<tbody> 
<tr> 
    <td>Calories</td> 
    <td>118</td>
</tr> 
<tr>
    <td>Fat</td>
    <td>9g</td>
</tr>
<tr>
    <td>Carbs</td>
    <td>7g</td>
</tr>
<tr>
    <td>Fiber</td>
    <td>0g</td>
</tr>
<tr> 
    <td>Sugar</td>
    <td> 6g</td>
</tr>
<tr>
    <td>Protein </td>
    <td>1g </td>
</tr>
</tbody>
</table>
<p> That's about the calculation per person for this recipe.</p>
<hr> 
<h3> Whant to find more Tasty Video's ? </h3>
<a href= "https://www.youtube.com/channel/UCJFp8uSYCjXOMnkUyb3CQ3Q">
<button> Click Here </button>
</a>
</body>
</html>

Blog 1

This project was my favorite! Even though I can’t eat popcorn chicken, I enjoyed the process of having the independence to create something from coding HTML and CSS.

http://www.thepoetrybookclub.net/webdesign/problemsets/recipecss/

Swatches for the tasty recipe part one
This swatch excited me the most. I was able to curate this palette based on the light/dark/primary/secondary and contrast color needed for a good website!
HTML for the Tasty Recipe
CSS File for the Tasty Recipe

http://www.thepoetrybookclub.net/webdesign/, is the link I was able to curate all of my files from. And I was able to upload files unto my server! A big achievement from where I was a few months ago.

Blog 2

With the countdown of having only 72 hours to complete this assignment, I felt like I couldn’t do it. With the workload of tutorials being over 2 hours long, it felt neverending. Of course, because of other assignments, I had about 24 hours to complete the code and the blogging aspect of the assignment. At this point in the semester, I already understood the basics of Visual Studio Code. I became more comfortable by practicing typing the boilerplate and other codes that I knew would assist me in understanding the code like the back of my hand. With this in mind, I knew that I would be able to complete the site page on my own. While in VS Code, I found myself using a lot of shortcuts to get to VS Code back and forth from my browser. this helped me shave down some of the time I used to complete the assignment. Having a Macbook made that easy. It became natural to do tutorials without having the pause and double check with my language because I familiarized myself with all that I needed to know.  Since I already learned the basis of the boilerplate before this assignment, I wanted to learn how to wrap tools a bit more efficiently. I’d also like to grasp the understanding of shortcutting a duplicate in VS Code. 

The different CSS that has to be written based on the different card choices is because of the layout which it needs in the supported browser.  

The .card-main and the .card-feature-hero pinpoint two separate aspects of the webpage. It is important because while some of the design might change via the css, the .html stays the same. being able to group and differentiate the similarities between the different layouts are important for uniformity and consistency on the webpage.

Nesting a grid was one of the most difficult things that I did, based on the amount of collapsing that had to be done based on the sub categories in col-8 and col-4 of the flexbox assignment. Once the Gridlex.css file was added, it was easy to add the <div class= “grid”>, as long as there was something to put inbetween it; 

aA screenshot showing the visual representation of having a class grid along with the various columns.

In this case, the <div class= “col-8”> was made in between the “grid” div class, and the “grid” was placed in a container. The <div class= “card card-main”> was added in the “col-8” div as well as the “col-4”, to ensure they stayed inside of the grid, as well as having the option to keep the code intact with the previous adjustments made to the style, as well as paragraph arrangements and adjustments to the page layout.

Cart title links and CSS comments blog

All in all working with VS code has been really fun. I don’t find it difficult what so ever. The auto-complete feature was truly a lifesaver since for the longest time I have been writing every individual digit of code one by one, even the brackets. One feature which the professor brought to my attention was wrapping with emmet shortcuts. This made my code more accessible and most definitely readable.

Emmet in Visual Studio Code

Design 1 Final

This has been a really fun project to do. I had many challenges that held me back quite a bit but the final product has come out pretty good. Little by little more polish was added. Keeping the code clean was quite difficult since prior to cleaning it was all convoluted. Compared to previous projects this was one of the toughest ones to date. Here is a link to the project as well as a directory to my previous assignments.

http://jeremiahsaintine.com/CT360/

WEEK 15!!! I FINISHED!!!

I had a lot of fun doing this and thank you for being very patient and giving me time. I hope you like this and please give me feedback on this! I fixed the gap on the top with the pictures but I had an issue turning the text on the first big picture white. I reviewed my html and css on the inspector but I couldn’t find anything. Thank you professor!

Blog Link:

http://mubyjess.com/webdesign1/week15/

css.php