25/07/2019
Working on the web page! Thanks to the Internet you can learn anything today. :)
As you can see I also shared a little bit of my code (that I used on my web page). It is a bit like math, follow the rules of the language and it will work.
Here are the 6 steps to guide you into beginner design of your web page:
1. Use the text editor (not the Word)
2. Copy-paste this code (HTML) in your text editor and save it as index.html
Ivas Snaps
Ivas Snaps
Love your fate and embrace the journey...
We tend to forget that even the smallest steps move us forward. The expert in anything was once a beginner. Every skill can be learned, every moment can be captured,
there just needs to be enough drive for it.
PHOTOSHOP UMBRELLA
3. open another text editor file and copy-paste CSS code, and at the end save it as style.css
/*defined body with a black background,
the pink color of the text, monospace font and all centered*/
body{background: black;
color: pink;
font-family: monospace;
text-align: center;}
/*all links are defined in deep pink color,
in a monospace font, 13pt size with no text decoration underline*/
a{color: deeppink;
font-family: monospace;
text-decoration: none;
font-size: 13pt;}
/*when the cursor goes over the link they will change color to black text
and deep pink background*/
a:hover{color: black;
background: deeppink;}
/*h1 title is deep pink color and special text font chalkduster*/
h1{color: deeppink;
font-family: chalkduster;}
/*when going with the cursor over the h4 title they will change
their background deep pink color and text black color*/
h4:hover{color: black;
background: deeppink;}
/*Use this to make BIG SPECIAL Title with top bottom wider margines*/
.home_title_ivas_snaps{
margin-bottom: 50px;
margin-top: 50px;
font-size: 70pt;}
/*Use this to make links darkviolet color on black background*/
.darkvioletlink:hover{
color:darkviolet;
background: black;
4. Download the Umbrella photo and name it meumbrela.jpg and keep in the same folder as the other 2 text editor files
5. In your folder you should have 3 files:
index.html
style.css
meumbrela.jpg
- open index.html with your browser (preferably GoogleChrome) and check out the code reading in your browser. You should see a simplified version of my page.
6. Now you can try to edit the code in your text editor. Change the colors, titles, text, and put your own pics and make it into your own page. Try to research what other colors and fonts you can choose in your CSS code.
Share it with me or ask me if you get stuck! ;)