Thursday, December 19th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Movies tomorrow – we leave right away, don’t be late. Movies on Cronin and me – but if you want snacks bring some money. Concessions will be open – they take cards and cash but no Roblox cash, V-bucks, Glimmer or Golden Eagles.

Braden: Meeting at 12:30pm today – grab lunch after

Take five minutes and discover the wonders of some great CSS Generators

10:10 CSS Gallery with Grid – Overlay and….Changing Stylesheets with JS

Yesterday we played with absolute positioning to create a overlay on the image when we hover. The overlay contains text information about the image. Today:

Let’s finish the gallery of images
Add some buttons
Add some alternative css
Make a version for mobile screens
Add some JS to change the stylesheet

We are going to add some buttons and then use an event in JS. There are lots of events in JavaScript. We’ll choose onclick. When we click, we’ll execute a function (which will change CSS stylesheets).

To get started, it’s important to create a JS folder and put a script in there. Then link to it just like we would for a css file.

We’ll need a few things to get going.

A js folder
A js file
A js file linked from html page
A button with an event handler
An id for the link element
A stylesheet with new styles we’ll click to

function swapStyles(newstyle){
    document.getElementById('pagestyle').setAttribute('href', newstyle);
}

Above is a function set on a button. When user click the button, it will execute the code inside the curly brackets.

The code to execute says:
Look through the document and find the element with an id of “pagestyle”. Then add an href attribute to an element or in this case – to a set of parameters(arguments).

We’ll add the ID “pagestyle” to the <link> element in the head tag!

10:40 CAWD WEBSITE – Senior Portfolio

A web portfolio is a curated selection of work that provides an overview of your creative experience. It basically tells someone how you want to be understood. Your web portfolio can also serve as your main communication hub where the rest of your online presence branches out from. For probably all of you, this will be your first professional presence on the web. Maybe you might want to purchase a custom domain name and web hosting.

Last week we spoke about a mood board to gather ideas and inspiration which you are sharing with us today. As you begin to collect and review ideas, I want you to consider the final project you are building for.

Requirements and Fine Print – Read

Sample of a nice Student Portfolio and this one and this one and this one and this one

Wireframing

Mobile Markup Wireframe on left | desktop markup on the right

Wireframing is a pre-production process that creates a prototype simple enough to be understood by everyone but with enough detail to show all the functionalities.

A wireframe is the first step to communicating your website ideas to other people!

Additionally, wireframing can help teams by finding problem areas and user experience issues within a new app before it’s launched and wireframing can help explain and share with key stakeholders within an organization how a webpage or webapp is going to work.

Wireframing is a quick sketch or illustration (it is not a detailed drawing) of a website’s hierarchy. Headings, Divs, Menus, Buttons, logos, images ,text all can be included in a wireframe. Common symbols used in wireframing.

Wireframing can be done on paper or digitally with a host of tools.
Personally, I prefer to work on paper first and skip the tools. However, there are some tools…

Assignment – Due Friday, January 3rd

On Paper – or digitally – Create a wireframe for your About Me page for both mobile and desktop. I have wireframe paper you can use (or just use scrap paper). Take your time to use your mood board to assist you with the layout that you are after. Use a ruler and make this a document that someone else could read and code.

10:50 Breaks

11:00 Mood Board Share Out

We’ll take turns sharing out our mood boards. Sharing with each other will be helpful generating ideas and help us to commit to our designs.

Load up your slideshow or board in Google Classroom.

What moves/inspires you? What would you like to see in your own site?

12:00 Client Meeting – Purinton Tree Farm

12:25 – 12:55 Lunch

12:55 Independent Reading

1:20 Break

1:30 Design Challenge

1:55 Production Time and Guided Support

Use this last window of time for some production of your Web Portfolio which will be due in January (January 24th to be exact). Let’s jam…

Take advantage of this production window and get a jump start before break:

Create a folder called WebPortolio on your desktop / Google Drive / SD Card
Create your CSS folder, Images Folder, Fonts Folder, JS folder
Create your style sheet
created your index.html page (this will be your about me page)
Add your image and your about me text
Link your stylesheet to your page
Add your resume.html page to your website

Current Assignments:

Past Due Assignments
About Me page on website
Resume on website

2:38Dailies

Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive

2:40 Dismissal

Code Snippets
The code is from the image gallery we started

CSS

/* specifications

body to have whitespace on left and right
images in a gallery format using CSS grid 
text that overlays the image on hover with some kind of animation */

body{
    width:70%;
    margin: 0 auto;
}

main{
    display:grid;
    grid-template-columns: repeat(3, minmax(100px, 100%));

    gap: 10px;

}

figure{
    position:relative;
    width:100%;
    margin:0;
}

img{
    max-width: 100%;
    height:auto;
    border-radius: 10px;
   
}

img:hover{
 
}

.overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(239, 216, 10, 0.2);
  width:100%;
  height:100%;
  overflow:hidden;
  transform:scale(0);
  transition: .5s transform ease-in-out;
  /* to center the text div */
  display:flex;
  justify-content: center;
  align-items: center;
}

figure:hover > .overlay{

    transform:scale(1);
}

button{
    margin:0px 5px 10px 0px;
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS PhotoGrid with Overlay</title>
    <link rel="stylesheet" href="css/styles.css">
    
</head>

<body>
    <h1>CSS Image Grid with Overlay</h1>
    
    <main>
        <figure>
            <img src="images/bokeh.jpg" alt="Alaska"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Alaskan Adventures</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/bevinsScarecrow.jpg" alt="ScareCrow"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Scary Scarecrow</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/blowBestPhoto_1.jpg" alt="Garden Statue"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Peaceful Garden</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/campstove.jpg" alt="Alaska"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Alaskan Adventures</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/watson3.jpg" alt="ScareCrow"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Scary Scarecrow</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/tracks.jpg" alt="Garden Statue"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Peaceful Garden</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/carMeet06.jpg" alt="Alaska"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Alaskan Adventures</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/Flower05.jpg" alt="ScareCrow"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Scary Scarecrow</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        <figure>
            <img src="images/IMG_1312.jpg" alt="Garden Statue"> <!-- image -->
            <div class="overlay">  <!-- box that overlays the image -->
                <div class="overlaytxt">  <!-- a box inside the overlay with text -->
                    <h2>Peaceful Garden</h2>
                    <p>Aperture 5.6 | Shutter 1/400</p>
                </div>
            </div>
        </figure>

        

    </main>

</body>

</html>