IBT-learning · daud2-coder · Dec 7, 2024 · Dec 14, 2024 · Dec 14, 2024 · Dec 15, 2024
diff --git a/1-html-css/basics/assignment-1.md b/1-html-css/basics/assignment-1.md
@@ -0,0 +1,49 @@
+# HTML Assignment #1
+
+Make a web page about something you think is cool or interesting. It could be a historic site, cultural event, person, place, a book or movie, or even something from your own life. It can be as personal or impersonal as you like, but I would enjoy learning something about your home region.
+
+This is not a research project, feel free to copy and paste content from other websites such as wikipedia (but make sure to remove footnotes, etc.)
+
+So far we have learned limited styling options, so keep the design clean and simple with complementary colors. Remember that margins and padding, text size, and border placement are all important considerations for a visually pleasing design.
+
+Remember to check the appearance of your page at different widths to see the impact of element wrapping.
+
+### This is your webpage, it can look however you want it to. It **should not** have the same layout, content, or colors as the example page. Get creative!
+
+<div>
+    <a href="https://www.loom.com/share/63ec53c1328444c288e9cded2a3f86c2">
+      <p>Assignment #1 Example Page - Watch Video</p>
+    </a>
+    <a href="https://www.loom.com/share/63ec53c1328444c288e9cded2a3f86c2">
+      <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/63ec53c1328444c288e9cded2a3f86c2-with-play.gif">
+    </a>
+  </div>
+
+#### Content Requirements:
+
+-   include a title and sub-header for the page
+-   include three or more images
+-   include one or more ordered or unordered lists
+-   include one or more links
+
+#### Style requirements:
+
+-   set a background color for the page
+-   set a different background color for at least one area of the page
+-   change the color of some or all links
+-   make the images all the same height or same width (not both, as this may distort the aspect ratio)
+-   set some spacing between images
+-   give at least one element on the page a border
+-   use at least one class selector
+-   use at least one id selector
+
+#### Extra challenge (optional):
+
+-   change the color on links when a user hovers over them
+-   remove the underline from links
+-   set a maximum width for one or more elements
+-   use a color palette generator such as coolors.co to find or generate a nice looking color palette (look up how to use hex codes as css color values)
+
+## To submit:
+
+Follow the instructions in the [Git Steps](../../git-steps.md) document.
diff --git a/1-html-css/basics/css-basics.css b/1-html-css/basics/css-basics.css
@@ -0,0 +1,53 @@
+/* this is a CSS comment */
+
+/* 
+
+selector {
+    property: value;
+    property: value;
+}
+
+*/
+
+/* The element selector applies to every instance of that element */
+body {
+    background-color: beige;
+    color: brown;
+}
+
+h1 {
+    color: green;
+}
+
+span {
+    color: teal;
+    font-weight: 700;
+    margin: 30px;
+}
+
+img {
+    padding: 20px;
+    /* padding-left: 20px;
+    padding-top: 10px; */
+    margin: 10px;
+    border: 10px dashed darkcyan;
+    width: 400px !important;
+}
+
+/* class selector, applies to any element with this class */
+
+.orange-text {
+    color: orange;
+}
+
+.gray-background {
+    background-color: gray;
+}
+
+/* id selector, applies only to the single element with this id */
+
+#block-wrapper {
+    background-color: bisque;
+    margin: 15px;
+    padding: 15px;
+}
diff --git a/1-html-css/basics/html-basic-tags.html b/1-html-css/basics/html-basic-tags.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" href="style.css" />
+        <meta charset="UTF-8" />
+        <title>HTML basic elements</title>
+        <!-- Three ways of including CSS -->
+        <!-- least useful: inline CSS -->
+        <!-- middle useful: a style tag in the header -->
+        <!-- most useful: a linked external style sheet -->
+        <link rel="stylesheet" href="css-basics.css" />
+    </head>
+    <body>
+        <!-- this is a comment, the browser will read it  -->
+        <!-- but not attempt to interpret it -->
+
+        <!-- html element, or html tag. delineated with angle brackets -->
+        <h1>heading one</h1>
+        <h2>heading two</h2>
+        <h6 class="orange-text">heading six</h6>
+
+        <p class="gray-background">paragraph</p>
+
+        <div>division</div>
+        <span>span</span><span>another span</span><span>a third span</span>
+        <pre class="orange-text gray-background">pre-formatted</pre>
+
+        <!-- an attribute changes what the element does -->
+        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">
+            MDN Web Docs HTML Element Reference
+        </a>
+
+        <!-- img is an example of an empty tag, or void tag. Also called "self-closing" -->
+        <img
+            src="https://media.giphy.com/media/goKgmdgnBfbYhsZFy9/giphy.gif?cid=790b7611znsnve3hcpek0f0sg9iqv0kzov4kky46s12hqts9&ep=v1_gifs_search&rid=giphy.gif&ct=g"
+            alt="this is going to be us!"
+        />
+
+        <img
+            style="width: 500px; border: 5px solid red"
+            src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Latarnia_morska_w_Kolobrzegu.jpg"
+            alt="Kołobrzeg Lighthouse on the Polish Baltic coast"
+        />
+
+        <!-- horizontal rule -->
+        <hr />
+
+        <!-- these element types require nesting -->
+        <ol>
+            <li>thing 3</li>
+            <li class="orange-text">thing 1</li>
+            <li>thing 2</li>
+        </ol>
+
+        <ul>
+            <li>thing 1</li>
+            <li>thing 2</li>
+            <li class="orange-text">thing 3</li>
+        </ul>
+
+        <!-- we can also any amount of nesting! -->
+        <div id="block-wrapper">
+            <h3 class="orange-text">This header is inside a div!</h3>
+            <p>
+                A paragraph usually won't have block elements inside it but
+                might have inline elements such as <span>span</span> or
+                <a href="">anchor tags</a>
+            </p>
+        </div>
+    </body>
+</html>
diff --git a/1-html-css/blog-project.md b/1-html-css/blog-project.md
@@ -0,0 +1,50 @@
+# HTML & CSS Final Project
+
+Over the course of this program you will develop your own blogging web app. Eventually a user will be able to log into the app, create a profile, make posts, and see other people's profiles and posts. It is up to you whether this app will have a theme (such as a recipe sharing site, etc) or focus on particular kinds of content. However, do not plan for special features outside of the ability to create and edit a profile, and create and edit a blog post with or without photos.
+
+The first phase of this will be to build the HTML prototype. You will not be beholden to this prototype, you may decide to make changes to it over time. This is just a starting place to build from.
+
+Please keep your first draft of this very simple! This is not the time to play with animations or fancy visual tricks, because it is hard to predict how those things will work with the interactivity we will build in the future. Stick to a clean design with a simple layout and visually pleasing colors.
+
+Also, don't spend too much time coming up with content for the blog posts. Feel free to use lorem ipsum, copy wikipedia articles, song lyrics, knock knock jokes, or anything else you want to use as content. It doesn't have to be in English!
+
+### Project setup
+
+Create a new directory inside your code folder. Place all the files related to this project, including any images you may use, inside it.
+
+You will make two web pages, so each page will be a separate html file. I suggest styling them both with the same CSS file. If you like, you may additionally add separate CSS files for each page, so you may need up to three total CSS files.
+
+### Requirements
+
+#### Both pages
+
+Both pages must have
+
+- mobile-first responsive designs with at least mobile and desktop versions
+- layouts using grid and/or flexbox
+- a matching color scheme (I recommend taking the time to use a color palette generator to come up with something nice)
+- use at least one custom font (from Google Fonts or any other source)
+
+#### Home page
+
+This will be the landing page for the site. Assume the user is logged in.
+
+The page should include at least navigation to the user profile, and several recent blog posts from different users. Each blog post should have:
+
+- a timestamp
+- a username
+- text (either the full post or the first line, etc)
+
+#### User Profile page
+
+This page will have some kind of bio. You decide what information is stored in the bio, it may be just one line, or responses to several questions/prompts, or a long bio, or anything else. It must also include a profile photo!
+
+In addition to the bio, include several of the user's most recent posts. (I won't notice or care whether these match the ones from the home page, the content is just a placeholder!)
+
+### Extra challenges (optional)
+
+- make some of the posts have images in them
+- give each post a small user icon (such as a photo thumbnail) that is different for each user
+- give the current user's posts an edit icon
+  - not all of the posts should be from the same user, so decide who the currently logged in user is
+- include a tablet version as well as the mobile and desktop versions
diff --git a/1-html-css/colors-and-sizes/index.html b/1-html-css/colors-and-sizes/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="style.css" />
+        <title>Colors and Sizes</title>
+    </head>
+    <body>
+        <div class="wrapper">
+            <!-- see CSS for notes on sizes -->
+            <div class="box" id="one">1</div>
+            <div class="box" id="two">2</div>
+            <div class="box" id="three">3</div>
+            <div class="box" id="four">4</div>
+            <div class="box" id="five">5</div>
+            <div class="box" id="six">6</div>
+            <div class="box" id="seven">7</div>
+            <div class="box" id="eight">8</div>
+        </div>
+        <div class="box" id="five">5</div>
+        <div class="box" id="six">6</div>
+    </body>
+</html>
diff --git a/1-html-css/colors-and-sizes/style.css b/1-html-css/colors-and-sizes/style.css
@@ -0,0 +1,60 @@
+/* em is a measurement based on the size of an em dash 
+    - en dash – em dash */
+
+/* em is relative to the font size of the given container 
+    rem, for "root em" is relative to the page's default font size 
+    (or the "root font size")
+    therefore em is more flexible, but also easier to screw up! */
+
+/* 
+vh - 1% of the viewport height
+vw - 1% of the viewport width
+% - a percentage of the parent's value
+px - one pixel, use sparingly! 
+*/
+
+body {
+    /* the page's default margin makes our 100vw and 100vh spill over the page */
+    margin: 0;
+    background-color: #dfdfdf;
+}
+
+.wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 2em;
+    color: #e87f3e;
+    background-color: rgb(98, 114, 100);
+    height: 50vh;
+    width: 70vw;
+    background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b0/Rottenburg_a.N._-_Wurmlingen_-_Kapellenberg_-_Ansicht_von_OSO_im_April_mit_Gegenlicht.jpg);
+    background-size: 70vw;
+}
+
+.box {
+    /* flex properties */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* style properties */
+    border: 1rem solid #1d263b8a;
+    /* The two extra digits are for the "alpha channel"
+    which controls opacity */
+    height: 4rem;
+    width: 6rem;
+}
+
+#one {
+    font-size: 3rem;
+    width: 50%;
+}
+
+#six {
+    height: 3em;
+}
+
+#eight {
+    /* don't do this! it works but it's weird! */
+    height: 30vw;
+}