{"name":"Reverse Engineer the Web 2","description":"Add CSS to HTML","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/uepn6lstvf6vqflsff9u","view_count":7,"fork_count":0,"expires_at":null,"created_at":"2025-04-21T16:54:29.291965Z","updated_at":"2025-04-21T16:54:29.291967Z","user_id":60,"status":"PUBLIC","parent_id":null,"id":1290,"user":{"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active","photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100},"code":{"script.js":"//No JavaScript yet!\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//OK I kinda lied... this is how you get buttons to do stuff.\ndocument.querySelector('.button2').addEventListener('click', function () {\n console.log(`Oh no! Now I'm all itchy...`);\n});","style.css":"/* \n\nCSS (Cascading Style Sheets) is not exactly a programming language because you don't write programs in it. \n\nInstead, it is a *style sheet language*. A style sheet is a set of rules that modify elements on a page. \n\nIn other words, we are going to take the stuff that's on our web page (created in HTML, and later JavaScript), and explain how we want it to look.\n\nThe basic examples are fonts and colors — that's easy, day-one CSS.\n\nBut we can do more than that. \n\nIf HTML is the _bones_ of a webpage, then CSS is the skin, hair, and clothes: the outer layers that make the page look good.\n\nNotice that your HTML file already links to this file.\n\nBelow is a super-simple line of CSS. Even a shrimp could understand this.\n*/\n\nbody {\n background-color: lavender;\n\n}\n\n/*\nAn idea in CSS has two parts: \n\n1. There are the rules themselves, which describe visual elements.\n\n2. But you must also tell CSS where those rules apply. You don't necessarily want *all* of your text to be blue, for instance.\nWe use the id of a div in HTML to refer to it.\n\nGo peek at index.html. You should see some divs with various ids.\nNow look below and notice that we refer to those id names.\nThen we open a { and go to town describing the visuals we want.\n\nThere is a TON of different CSS properties you can wield. Let Jippity help you discover them.\nGoogle and various tutorials will help too.\n\nLet's start simple: fonts.\n*/\n\n/* \nI made you a div to play around with fonts. Can you guess what font-family does? font-size? color?\n(duh...)\nIf you want to get a little fancier, find a font on https://fonts.google.com/ and link it to your HTML, then use it here. \n\nPlay around for a minute. Notice that this code editor comes with a color picker.\nClick the little box to change the color. Or you can use the \"hex code\" — the six-digit number after #.\nBonus question: how do hex codes work? What does \"hex\" mean?\n*/\n#font-div {\n font-family: 'Times New Roman';\n /* A terribly ugly custom font below */\n /* font-family: \"Rubik Bubbles\"; */\n font-size: 16px;\n font-weight: 300;\n color: #0a011d;\n}\n\n\n/*You may want to put a box around some text. That is not hard to do! Use 'border'.*/\n#box-div1 {\n border: 1px solid #000000;\n margin: 20px auto;\n padding: 10px;\n display: inline-block;\n}\n\n/* CSS has a ton of colors built in by name. You can type \"red\" and it will work! */\n#box-div2 {\n border: 2px dotted red;\n margin: 40px;\n padding: 5px;\n display: block;\n width: 40px;\n}\n\n/*You can even type even weirder colors like \"mediumseagreen\". */\n#box-div3 {\n border: 3px dashed mediumseagreen;\n margin: 5px;\n padding: 25px;\n display: block;\n border-radius: 15px;\n}\n\n/* What does 'padding' do? 'margin'? */\n#box-div4 {\n font-family: 'Rubik Bubbles';\n font-size: 32px;\n border: 4px double blue;\n margin: 20px;\n padding: 60px;\n display: inline-block;\n background-color: yellow;\n}\n\n/*Of course you also want to control _where_ divs are placed on screen. */\n#layout-div1 {\n display: flex;\n flex-direction: column;\n /* flex-direction: row; is your other option here. What does that do?*/\n justify-content: space-around;\n align-items: center;\n height: 400px;\n border: 10px solid purple;\n margin: 50px;\n padding: 40px;\n font-size: 22px;\n}\n\n#layout-div2 {\n display: grid;\n grid-template-columns: 1fr 2fr 1fr;\n /*what does 'fr' mean?*/\n grid-template-rows: 100px 50px;\n height: 150px;\n justify-content: center;\n border: 2px solid orange;\n}\n\n/* check this trick out. It gives rules to divs _inside_ layout-div2 */\n#layout-div2>div {\n padding: 20px;\n margin: 5px;\n border: 4px solid yellow;\n border-radius: 10px;\n}\n\n/* Only one div inside layout-div2 has an id. If I want to customize the other two, I have to go back and name them. */\n#first-column {\n font-family: Helvetica, sans-serif;\n font-weight: bold;\n}\n\n/* I can make a simple div to use as a spacer. */\n#spacer400 {\n width: 100%;\n /* of the page */\n height: 400px;\n}\n\n#spacer1000 {\n width: 100%;\n /* of the page */\n height: 1000px;\n}\n\n/* ANIMATION */\n\n#animate-tutorial {\n width: 200px;\n height: 100px;\n line-height: 100px;\n text-align: center;\n color: #24dbcc;\n border: 1px solid black;\n margin: 20px auto;\n background-color: #ff4500;\n transition: background-color 0.5s ease;\n}\n\n#animate-tutorial:hover {\n animation: none;\n background-color: #24dbcc;\n}\n\n/* This tells that div to do two animations. What does '1s' mean, and what do the words after that mean? */\n#animate-tutorial:hover {\n animation: colorChange 1s infinite alternate,\n textColorChange 1s ease;\n}\n\n/* These next two chunks are the animation properties themselves, using keyframes */\n@keyframes colorChange {\n from {\n background-color: #ff4500;\n }\n\n to {\n background-color: #24dbcc;\n }\n}\n\n@keyframes textColorChange {\n from {\n color: #24dbcc;\n }\n\n to {\n color: #ff4500;\n }\n}\n\n/* BUTTONS */\n/* \nNotice the . instead of # to refer to the class.\nIf I want to arrange this button somewhere particular on screen, I would have to put it inside a div and then move that div.\nGive that a shot! Place a button right in the center of the web page.\n */\n.button1 {\n background-color: #4CAF50;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n cursor: pointer;\n}\n\n.button2 {\n background-color: #289c2c;\n border: none;\n color: rgb(241, 141, 216);\n font-weight: 700;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n cursor: pointer;\n}\n\n\n/* SLIDERS (RANGES) */\n.custom-range {\n -webkit-appearance: none;\n width: 100%;\n height: 25px;\n background: #07e9cb;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s;\n}\n\n.custom-range:hover {\n opacity: 1;\n}\n\n/* This is a little annoying. We have to write the rules for the \"thumb\" twice because Mozilla (Firefox) plays by its own rules.\nIf you ignore the second block below, you'll get just default behavior on FireFox (I think). Not the worst thing ever, but it's always better to have the web page elements look good. */\n.custom-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 25px;\n height: 25px;\n background: #2b0cdb;\n cursor: pointer;\n /* What does \"cursor\" do? */\n}\n\n.custom-range::-moz-range-thumb {\n width: 25px;\n height: 25px;\n background: #2b0cdb;\n cursor: pointer;\n}\n\n.slider-container {\n display: flex;\n justify-content: center;\n margin: 20px 0;\n}\n\n.other-range {\n -webkit-appearance: none;\n width: 250px;\n height: 15px;\n background: #ff4500;\n outline: none;\n opacity: 0.9;\n transition: opacity .2s;\n}\n\n.other-range:hover {\n opacity: 1;\n\n}\n\n.other-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background: #e5e907;\n cursor: pointer;\n border-radius: 50%;\n}\n\n.other-range::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background: #e5e907;\n cursor: pointer;\n border-radius: 50%;\n}\n\n/* DROPDOWNS */\n.dropdown {\n position: relative;\n display: inline-block;\n}\n\n.dropbtn {\n background-color: #f8e991;\n color: rgb(131, 7, 233);\n padding: 16px;\n font-size: 16px;\n border: none;\n cursor: pointer;\n}\n\n.dropdown-content {\n display: none;\n position: absolute;\n background-color: #f8e991;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(178, 4, 231, 0.2);\n z-index: 1;\n}\n\n.dropdown-content a {\n color: rgb(225, 145, 241);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n}\n\n.dropdown:hover .dropdown-content {\n display: block;\n}\n\n.dropdown:hover .dropbtn {\n background-color: #f1d220;\n}\n\n#Peanut {\n color: brown;\n font-weight: bold;\n font-size: 24px;\n font-family: 'Courier New', Courier, monospace;\n background-color: rgba(210, 180, 140, 0.3);\n}\n\n#Butter {\n color: yellow;\n font-weight: bold;\n font-size: 24px;\n font-family: 'Sevillana';\n text-shadow: 1px 1px 2px #000;\n background-color: rgba(240, 229, 75, 0.3);\n}\n\n#Jelly {\n color: purple;\n font-weight: bold;\n font-size: 24px;\n font-family: 'Comic Sans MS', 'Comic Sans', cursive;\n background-color: rgba(250, 107, 255, 0.3);\n}","index.html":"\n\n\n\n \n \n REtW 2: CSS\n \n \n \n \n \n \n \n\n\n\n

Reverse Engineer the Web 2:\n CSS\n

\n \n\n

Fonts

You can change the font (typeface), size, color, and weight of text.

\n Give it a shot!\n

\n\n

Boxes

\n A simple box around some text.\n

\n\n

\n We can control the space inside and outside of the box, as well as the\n arrangement of text in the box, and of course what the box itself looks like.\n

\n\n

\n It's legal to give three divs the same id. But then any CSS that applies to one applies to all.\n

\n\n

\n All these boxes are different sizes! They fit to the text. Why and how?\n

\n\n

\n Oy, this is all crunched up. Can you fix it?\n

\n\n

\n I like this \"squircular\" shape. How did I make that? And what makes this box so wide? Can you shrink it?\n

\n\n

\n And of course you can still apply font rules!\n

\n\n

Layout

\n This div uses \"display: flex\" to turn the box into a \"Flexbox,\" short for \"Flexible box.\"

\n Flexboxes are great when you aren't sure how big your window or screen or elements will be, or if they will be\n sized dynamically. There are lots of flavors of 'flex' stuff. Ask Jippity for some options! Notice that if you\n pop the preview window out to a larger size, the text wraps automatically. That is good — it would be a pain in\n the butt if you always had to predict when a line would end, and put a \"br\" tag or something there. The box also\n changes size. Can you describe how the box knows where to end?\n\n

\n\n

Here I'm puttin' three divs inside a bigger div.

Instead of a flexbox, I am doing using \"display: grid\" and some rules about rows and columns in order to\n create this structure.

Can you add more rows or columns? Or take away? Or adjust the sizes? Fix the spillage? Ask Jippity for\n help!

\n\n

Animation

One of the most fun things you can do with CSS is *animate* elements.

\n Check it out.\n

The big idea is \"Key Frames\". Key frames let you specify starting, ending, and indeed middle points of your\n animation. Then you can have the computer *interpolate* between those to get smooth effects. For instance, you\n can say something like \"start green, then become yellow, then finish orange\" and CSS can fade between those\n smoothly if you tell it to.

\n\n

Inputs and Control Structures

As a setup for our next topic (JavaScript on the Web), here are some samples of how HTML and CSS work\n together to produce *control structures* — buttons, sliders, and menus.

A couple notes:

You create these in HTML. You format them in CSS.

But they don't *do* anything without JavaScript. We'll get to that next time.

Buttons

\n \n \n \n \n

\n
\n

Sliders

The word \"range\" refers to sliders. This one is called \"custom-range\".

\n \n
\n

This one is called \"other-range\" and it's inside its own div so that I can move it where I want (the center).\n

\n \n

Dropdown Menus

Dropdown menus can link you to other parts of the page or site, but can do fancier stuff once JavaScript enters\n the\n picture.\n

\n Peanut.\n

\n\n

\n Butter.\n

\n\n

\n Jelly.\n

\n \n\n\n"},"chat_history":[],"assets":[{"project_id":1290,"created_at":"2025-04-21T16:53:53.778336Z","resource_type":"image","id":72525,"cloudinary_id":"uepn6lstvf6vqflsff9u","name":"ss","deleted":false}],"messages_sent":41,"comments":[],"steps":[{"complete":false,"step_number":0,"updated_at":"2024-04-29T19:18:11.478406","id":6837,"instruction":"Create placeholders in the code file to demonstrate the function of each CSS element.","title":"Interactive Code Examples","created_at":"2024-04-29T19:18:11.478405","project_id":1290},{"complete":false,"step_number":1,"updated_at":"2024-04-29T19:18:11.478465","id":6838,"instruction":"Display the results of the CSS code changes in real-time on the page.","title":"Real-time Results","created_at":"2024-04-29T19:18:11.478465","project_id":1290},{"complete":false,"step_number":2,"updated_at":"2024-04-29T19:18:11.478507","id":6839,"instruction":"Include explanations and descriptions for each CSS feature demonstrated in the tutorial.","title":"CSS Feature Explanations","created_at":"2024-04-29T19:18:11.478507","project_id":1290},{"complete":false,"step_number":3,"updated_at":"2024-04-29T19:18:11.478547","id":6840,"instruction":"Allow users to modify the CSS code and see the impact on the displayed elements.","title":"User Interaction","created_at":"2024-04-29T19:18:11.478546","project_id":1290},{"complete":false,"step_number":4,"updated_at":"2024-04-29T19:18:11.478680","id":6841,"instruction":"Implement a user-friendly navigation system to guide users through the different CSS features.","title":"Tutorial Navigation","created_at":"2024-04-29T19:18:11.478677","project_id":1290}]}