Scarlett's Assignment 1 submission #4

hs4man21 · 2020-10-18T18:09:33Z

No description provided.

hs4man21 · 2020-10-18T18:10:02Z

step1.html

@@ -25,7 +25,7 @@
  What are <h1> and </h1>? What if we replace them with something different? What happens if we remove one or both? Try it out!
 -->

-<h1>So you wanna set up a Stanford Daily email newsletter?</h1>
+<p>yo wassup!</p>


Hahaha good stuff — love the paragraph tags!

hs4man21 · 2020-10-18T18:10:41Z

step2.html

+  What happens? (color changes to black from) Then, change "the_title" to "not_the_title" up on the id of the h1 tag. Then what happens? (it goes back to red from black)
+  Write comment about your findings! - THe color changes when I put not the title below to black from red, but when I put not the title above, it turns back to red from black.


hs4man21 · 2020-10-18T18:11:26Z

step2.html

+  outline-color: cornflowerblue;
+  font-family: cursive;
+  font-size: 100px;
+  color:#ffe5b4;
+  text-align: center;


Nice styling — if you ever forget what a CSS property does, remember that w3schools is a great resource!

hs4man21 · 2020-10-18T18:14:10Z

step2.html

Oh no, just let us know if you want this program to be less of a work load!

hs4man21 · 2020-10-18T18:15:17Z

step3.html

@@ -15,7 +15,7 @@
  Step 3.1

  You might notice that the website's title is gold. Why is that?
-  You won't find any CSS in this file--so how is it possible for the text to be styled?
+  You won't find any CSS in this file--so how is it possible for the text to be styled? (using ids can help, and keeping the css in another file can clean the html up - scarlett)


Great points!

hs4man21 · 2020-10-18T18:16:21Z

step5.css

    padding: 10px;
-    margin: 10px;
+    margin: auto;


The "auto" value was confusing to me for awhile haha

hs4man21 · 2020-10-18T18:18:25Z

step6.html

-    <div id="featured_fields3">
-      <span>Featured content headline</span>
+    <h1 id="the_title">Email Newsletter</h1>
+    <center><img style="width: 300px;height: 400px;margin-right: 15px;padding-top: 10px;"" src=https://i2.wp.com/www.vfxexpress.com/wp-content/uploads/2020/08/EnolaHolmes_KeyArt.jpg?fit=716%2C1060&ssl=1" alt="Enola Holmes Movie Poster"></center>


Looks like you have extra quotation marks after the style attribute, and remember to make alt text descriptive, so ideally describe what is on the poster instead of just saying movie poster

hs4man21 · 2020-10-18T18:20:08Z

step6.html

+
+      <p1>Featured Content Excerpt:<textarea id="featured_content_excerpts"></textarea></p1></div>
+
+    <button onclick="alert('Turn in now?')">Turn in!</button>


The alert is shown after the button is clicked, so if this "Turn in!" button shows an alert then there needs to be another button to confirm submission in a real-world scenario, right?

hs4man21 · 2020-10-18T18:21:23Z

step7.html

@@ -30,7 +45,7 @@ <h1 id="the_title">So you wanna set up a Stanford Daily email newsletter?</h1>
      id "featured_fields3" and that corresponding styling in step7.css. As you might guess, this means
      that we want you to also add "featured_fields2" and "featured_fields1" id selectors to the css file.
      correspondingly, you'll want the first article's div in each group of 3 to have the id "featured_fields1",
-      the second article's div to have "featured_fields2", etc. You should also use CSS to make the color of 
+      the second article's div to have "featured_fields2", etc. (i renamed them article1, article2, cuz i felt the name was too long to type heh - scarlett) You should also use CSS to make the color of 


No worries! Can you think of a way we might be able to automate the incremented id assignment in JSX?

hs4man21 · 2020-10-18T18:22:17Z

step7.css

+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-align: center;
+    margin: auto;
+    color: plum;
+    border-style: dotted;
+    border-color: blueviolet;
+    width: 30%;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+}
+
+#article1 {
+    display: inline-block;
+    padding: 10px;
+    margin-left: 120px;
+    border-style: solid;
+    border-color:  rgb(240, 198, 170);
+    border-radius: 25px;
+    background-color:lightyellow;
+    width: 100px
+}
+#article2 {
+    display: inline-block;
+    padding: 10px;
+    margin-left: 10px;
+    border-style: solid;
+    border-color: #dbd19a;
+    border-radius: 25px;
+    background-color: lightyellow;
+    width: 100px
+}
+
+#article3 {
+    display: inline-block;
+    padding: 10px;
+    margin-left: 10px;
+    border-style: solid;
+    border-color: #8fd8a1;
+    border-radius: 25px;
+    background-color: lightyellow;
+    width: 100px
+}
+
+#article4 {
+    display: inline-block;
+    padding: 10px;
+    margin-left: 10px;
+    text-align: center;
+    border-style: solid;
+    border-color: #95d4ec;
+    border-radius: 25px;
+    background-color: lightyellow;
+    width: 100px
+}
+
+#article5 {
+    display: inline-block;
+    padding: 10px;
+    margin-left: 10px;
+    border-style: solid;
+    border-color: #babbe9;
+    border-radius: 25px;
+    background-color: lightyellow;
+    width: 100px
+}
+
+#article6 {
+    display: inline-block;
+    padding: 10px;
+    margin-left: 10px;
+    border-style: solid;
+    border-color: #cf95dd;
+    border-radius: 25px;
+    background-color: lightyellow;
+    width: 100px
+}
+
+#featured_fields1 {
+    display: inline-block;
+    padding: 10px;
+    margin: auto;
+    border-style: solid;
+    border-color:  rgb(208, 228, 245);
+    border-radius: 25px;
+    font-family: cursive;
+    background-color:rgba(236, 219, 240, 0.952);
+    width: 1398px


Since there are lots of styles shared between these different elements, you could consolidate the shared styles into a class and write them just once, and then assign the other styles by id!

scarlettsaldana added 5 commits October 7, 2020 17:04

Submitting step 1

9804954

submitting step 2

45b02eb

submitting step 3

b8189b1

sub step4

f5af6a4

submitted 5-7

40618fa

hs4man21 assigned scarlettsaldana Oct 18, 2020

hs4man21 commented Oct 25, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scarlett's Assignment 1 submission #4

Scarlett's Assignment 1 submission #4

hs4man21 commented Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

hs4man21 Oct 18, 2020

		What happens? (color changes to black from) Then, change "the_title" to "not_the_title" up on the id of the h1 tag. Then what happens? (it goes back to red from black)
		Write comment about your findings! - THe color changes when I put not the title below to black from red, but when I put not the title above, it turns back to red from black.


		<p1>Featured Content Excerpt:<textarea id="featured_content_excerpts"></textarea></p1></div>

		<button onclick="alert('Turn in now?')">Turn in!</button>

Scarlett's Assignment 1 submission #4

Are you sure you want to change the base?

Scarlett's Assignment 1 submission #4

Conversation

hs4man21 commented Oct 18, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment