Learning to code
Today I took my first class on Learning to code. How exciting! We used a platform called Mozilla Thimble worked with both HTML and CSS programming codes. I took this course with my son, and while he learned a few things, he spent most of his time teaching me. It amazes me how advanced he is at all of this technology. What a whole new world I am embarking upon!!!
I learned how to add a title, header, link, and image. We also learned how to change fonts, create ordered lists, and more.
head = code for header
title = code for the title on your tab (located at the top of your page)
href = code for adding in a link to your website
center = code for centering an image or words
img = code for adding an image
ul = code for an unordered list (a list without numbers)
ol = code for an ordered list (a list with numbers), followed by an "li" command
br = inserting a 'break' (similar to pressing 'enter' between paragraphs in MS Word)
CSS stands for Cascading Style Sheets (colors, fonts, styles, borders, backgrounds). This makes your website look interesting and fancy. You cant do this with HTML. This doesnt use angle brackets, it uses {these} brackets.
For example:
p{color:red;} will turn your paragraphs red. Use semi colon like a period in a sentence. CSS is made up of rules. CSS targets parts of the wbesite and tells them what to look like. Can be general or specific.
cool website > www.css.cool
To change fonts, we went to fonts.google.com
We then highlighted the font:
And then copied the font:
And then added that font into the CSS file on our site under line item 4.
And then added the font to our 'span' (the text that is within this box).
In order to change the color of the word 'blog' (which is a link) when we hover over that word, we used the following commands:
<style> h1 { background-color: darkslateblue; color: azure; }
a:hover, a:focus { color: AQUA; transition: 0.2s ease-in-out; } a { color: purple; transition: 0.2s ease-in-out; }
To publish:
https://thimbleprojects.org/kidslearningcode/283197
