diff --git a/computer-science-blog/css/main.css b/computer-science-blog/css/main.css index 29c4b32..5a04122 100644 --- a/computer-science-blog/css/main.css +++ b/computer-science-blog/css/main.css @@ -6,6 +6,12 @@ margin-bottom: 15px; background: rgba(10,10,10,0.2); } +.presentation-image { + width: 70%; + box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5); + margin: 10px; + border-radius: 6px; +} /* place carousel indicators between the two buttons (next & previous) */ .presentation-flexbox { @@ -55,6 +61,9 @@ p { position: initial; width: auto; } +.carousel h1, .carousel h2, .carousel h3, .carousel .h1, .carousel .h2, .carousel .h3 { + margin-top: 0; +} /* add side margins depending on screen size */ #main-content { diff --git a/computer-science-blog/images/with_css.JPG b/computer-science-blog/images/with_css.JPG new file mode 100644 index 0000000..c1058a1 Binary files /dev/null and b/computer-science-blog/images/with_css.JPG differ diff --git a/computer-science-blog/images/without_css.JPG b/computer-science-blog/images/without_css.JPG new file mode 100644 index 0000000..d0a2851 Binary files /dev/null and b/computer-science-blog/images/without_css.JPG differ diff --git a/computer-science-blog/index.html b/computer-science-blog/index.html index e90d1be..819f5a6 100644 --- a/computer-science-blog/index.html +++ b/computer-science-blog/index.html @@ -113,12 +113,12 @@ - - diff --git a/computer-science-blog/pages/css.html b/computer-science-blog/pages/css.html new file mode 100644 index 0000000..bd18268 --- /dev/null +++ b/computer-science-blog/pages/css.html @@ -0,0 +1,32 @@ + +

CSS

+

+ Cascading Stylesheets (CSS) are used to style websites - i.e. to make them look pretty. + Whereas a page without CSS is just displayed as plain content: +
+ +
+ One with CSS looks a lot more presentable: +
+ +
+ CSS declarations use the tag names (e.g. p), classes and IDs of + the elements on the page in order to style them. IDs are written with a preceding hashtag, + classes are written with a preceding full stop and tag names are written without any preceding characters. + The styles themselves (like height) should all end in semicolons. + Here are some example declarations: +
+ + p {
+     font-size: 3rem;
+ }
+ .class_name {
+     height: 200px;
+ }
+ #id_name {
+     font-family: 'Roboto'
+ }
+ +
+ A comment in CSS is started with /* and ended with */. +

diff --git a/computer-science-blog/pages/html.html b/computer-science-blog/pages/html.html new file mode 100644 index 0000000..fc969af --- /dev/null +++ b/computer-science-blog/pages/html.html @@ -0,0 +1,15 @@ + +

HTML

+

+ Hypertext Markup Language is the standard language used by browsers to display webpages. + HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define + an element (something like a heading or paragraph), you use a tag - such as <p>, + which displays a simple paragraph. Most tags must be closed with closing tags - like </p>, + however some elements, like those for images (<img>) and linking external resources + (<link>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows: +
+ <img src="image_source_url"> +
+ HTML is closely linked with CSS and JavaScript; a comment in HTML is started with + <!-- and ended with -->. +

diff --git a/computer-science-blog/pages/js.html b/computer-science-blog/pages/js.html new file mode 100644 index 0000000..04f3ef9 --- /dev/null +++ b/computer-science-blog/pages/js.html @@ -0,0 +1,16 @@ + +

JavaScript

+

+ JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language + (rather than, for example, binary) and runs on the end user's computer. It is used for many purposes, + including editing content on a webpage, performing mathematical operations and storing variables. + Each line of JavaScript should end in a semicolon, for example: +
+ + // this code sets the content of the element with the ID "id_name" to "Hello World!"
+ document.getElementById("id_name").innerHTML = "Hello World!"; + +
+ A single line comment in JS is denoted by a double forward slash (//); a multi line comment + is started with /* and ended with */. +