Entry #7
Adding a search bar to your website
Before styling your search bar in css, the code you want to put in your HTML is as follows.
Then, save your document and when you preview it, your page should look like this...
https://blog.udemy.com/search-box-css/
Entry #6
Using Z-index to stack elements on a website.
Step 1 - Create the two divs you want to stack on top of each other.
Step 2- In the CSS add z-index to the two divs.
The way you add z-index is by going into the css and adding "z-index: (insert the value you want here);"
The div you want sitting on top of the other one should have a higher z-index than the one on the bottom. So for example, you want div 1 sitting on top of div 2 then you would give div 1 a z-index of 100 and div 2 a z-index of 5.
See the image below for an example of how z-index works. Note the the numbers of each box and where it sits compared to the others.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Entry #5
Putting a login and password on your pages.
Step 1 - Once you paste the code into your html, you should change the "form.id.value" and "form.pass.value" to what you want your username and password to be.
Step 2 - Add the following script to your code in order to style it.
When you are done, your page should look like this...
http://www.htmlfreecodes.com/Put_password_on_your_website_to_protect_your_pages--view--.htm
Entry #4
Making an image the background of your site.
Step 1 - Using the HTML element, set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.
When you are done, your page should look similar to this...
https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Entry #3
Creating a stitched effect on shapes.
Step 1 - Add the code below to one of your div's or shapes.
The border is what makes the stitching dashed and the box shadow makes it look more realistic than just a box with a dashed border
Your final work should look similar to this...
Entry # 2
Imbedding a YouTube video into your site.
Step 1 - Get the link for the video by clicking the share button and copying the link that pops up
Step 2 - Clicking the "Embed" button will give you the code to put in your HTML. Copy and paste the code in your into the body section or wherever you want your video to go and you now have a YouTube video imbedded in your site!
Entry # 1
Having a favicon on your website.
Step 1 - Make sure that you have an image that is either 16x16 pixels or 32x32 pixels and has either 8-bit or 24-bit colors.
Step 2 - The Html code that you want to use is as follows...
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>
Step 3 - Make sure that you link your personal image so that it will show up on your site.
Comments (6)
Lori said
at 12:13 pm on Feb 24, 2015
Entry #1, 0/4. Missing
Lori said
at 12:27 pm on Mar 2, 2015
Entry #1, 4/4. Appropriate and useful post for #1. Make sure to add an image which provides a visual explanation of the outcome of your code.
Lori said
at 8:22 am on Mar 17, 2015
Entry #2: 3/4. Please try to post on more advance topics (we learned that in Intro.) Please watch your spelling and include a resource link. Thank you for posting.
Lori said
at 8:31 am on Mar 31, 2015
Entry #3: 3/4. This is a useful post and I am glad you showed this skill using CSS3 rather than Photoshop. You needed to include a resource link and to add a little more to the post I recommend sharing the other border options.
Lori said
at 8:55 am on Apr 9, 2015
Entry #4: 4/4. All required elements are posted. This is a very useful post and a code I need to start re-teaching again in class.
Lori said
at 8:07 am on May 20, 2015
Entry #5: 4/4
Entry #6: 4/4
Both of these are very useful and Adv. 1 level entries. Z-Index comes in handy when working with fixed divs!
You don't have permission to comment on this page.