Agnes' assignment 1 submission #2
Conversation
| @@ -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>So you wanna set up a Stanford Daily email newsletter?</p> | |||
There was a problem hiding this comment.
Paragraph tags, yes!
| @@ -26,6 +26,8 @@ <h1 id="the_title">So you wanna set up a Stanford Daily email newsletter?</h1> | |||
| What happens? Then, change "the_title" to "not_the_title" up on the id of the h1 tag. Then what happens? | |||
| Write comment about your findings! | |||
|
|
|||
| When I changed "the_title" to "not_the_title" down below, nothing happened because the id of the h1 tag was still "the_title". After I changed it to "not_the_title" the style changed --> | |||
| #the_agnes_title { | ||
| text-align:center; | ||
| color:pink; | ||
| text-shadow: 2px 2px gold; | ||
|
|
||
| } |
There was a problem hiding this comment.
Nice style choices!
| <br> | ||
| <div id="featured_fields3"> | ||
| <span>Featured content author name(s)</span> | ||
| <textarea></textarea> | ||
| </div> | ||
| <br> | ||
| <div id="featured_fields3"> | ||
| <span>Featured content link</span> | ||
| <textarea></textarea> | ||
| </div> | ||
| <br> | ||
| <div id="featured_fields3"> | ||
| <span>Featured content image link</span> | ||
| <textarea></textarea> | ||
| </div> | ||
| <br> | ||
| <div id="featured_fields3"> | ||
| <span>Featured content image alt text (should describe photo in case it cannot be seen)</span> | ||
| <textarea></textarea> | ||
| </div> | ||
| <br> | ||
| <div id="featured_fields3"> | ||
| <span>Featured content excerpt</span> | ||
| <textarea></textarea> | ||
| </div> |
There was a problem hiding this comment.
Awesome work! Could be a great exercise to think about ways we can make this more concise, especially using JSX
|
|
||
|
|
||
|
|
||
| <button id="submit_button"onclick="alert('This is an Alert!')">Submit all changes</button> |
There was a problem hiding this comment.
This is a lot of code! Now that we've talked about JSX in lecture and section, do you have ideas as to how this could be made more concise in a React component perhaps?
| #featured_fields2 { | ||
| padding: 10px; | ||
| margin: 10px; | ||
| border-style: solid; | ||
| border-color:plum; | ||
| border-radius: 25px; | ||
| background-color: lightyellow; | ||
| } | ||
|
|
||
| #featured_fields1 { | ||
| padding: 10px; | ||
| margin: 10px; | ||
| border-style: solid; | ||
| border-color:powderblue; | ||
| border-radius: 25px; | ||
| background-color: lightyellow; | ||
| } |
There was a problem hiding this comment.
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!
| #featured_fields3 { | ||
| padding: 10px; | ||
| margin: 10px; | ||
| margin: auto; | ||
| border-style: solid; | ||
| border-color: #8c1514; | ||
| border-radius: 25px; | ||
| background-color: lightyellow; | ||
| text-align:center; | ||
| width:400px; | ||
| } |
There was a problem hiding this comment.
Make sure to check w3schools if you're unsure ab what exactly any of these styles are doing; it's a great resource!
No description provided.