Exercise 6-2 Add the Speaker of the Month
In this exercise, you'll add the Speaker of the Month to the home page. Whenever appropriate. test the changes in Chrome.
Enhance the HTML page
1. Copy the content for the speaker of the month from the file named cb_content.txt in the text folder into the HTML file right before the heading for "Our Ticket Packages".
2. Enclose the Speaker of the Month heading in hl tags, and enclose the rest of the content in an article element.
3. Within the article, enclose the first heading in h2 tags; enclose the second heading (the date and speaker's name) in h3 tags with a <br> tag to provide the line break; and enclose the rest of the text in <p> tags.
4. Add an <a> element within the last paragraph that goes to the sampson.html page in the speakers folder when the user clicks on "Read more." Also. add a non-brealcing space and <b> tags so the rest of the line looks right.
5. Add an image element between the h2 and h3 elements in the article, and display the image named sampson_dinosaur.jpg from the images folder.
Enhance the CSS for the home page
6. Add a rule set for the hl element that sets the font size to 150%, sets the top padding 10 .5 ems and the bottom padding to .25 ems, and sets the margins to 0. (You need to explicitly set the top and bottom margins of this element to 0 because they're set to .67 ems in the normalize.css style sheet.)
7.. Add .5 ems of padding above and below the article. Then, add 2 pixel top and bottom borders to the article with #800000 as the color.
8. Float the image in the article to the right, and set its top, bottom, and left margins so there's adequate space around it. Then, add a 1 pixel, black border to the image so the white in the image doesn't fade into the background.
9. Set the top padding of the h2 element in the article to 0.
10. Set the font size of the h3 element in the article to 105% and set the bottom padding 10 .25 ems.
11. Make any final adjustments to the margins or padding, use the developer tools if necessary, validate the HTML page, and test in both Chrome and IE.
"Awesome CSS Learning" is a GitHub repository that contains links to amazing CSS learning resources. This resource is mainly about the language and its modules.
You can find links to learn concepts such as:
If you are looking for resources to learn the CSS fundamentals, this repository is excellent!
2. CSS Waves Generator
This CSS generator allows you to create SVG waves like:
direction,color,opacity.
Using of bootstrap enhances our webpage or website to very large extent.
In bootstrap we can use different already built classes which includes margins,padding, floaitng of the obejcts.