This is the second part of the "This is How Your Parents Used to Build Websites". The first blog post is here<\/a>. Ready? Let\u2019s go!<\/p>\n This is how a simple CSS statement would look like: There are three basic concepts of CSS:<\/p>\n There are three ways you can add CSS into HTML:<\/p>\n Color and Fonts<\/strong><\/p>\n Font Size, Weight, and Style<\/strong><\/p>\n Text Alignment and Decoration<\/strong><\/p>\n Margin and Padding<\/strong><\/p>\n Borders<\/strong><\/p>\n Styling Links<\/strong><\/p>\n Hover Effect<\/p>\n Link Visited State<\/p>\n Layout with Flexbox<\/strong><\/p>\n In order to adapt the site to various screen sizes and make sure it looks good on an iPhone as well as on your laptop, we can use the so-called media queries<\/strong>:<\/p>\n This changes the background color on screens smaller than 600px.<\/p>\n Pseudo-classes CSS Transitions CSS Animations<\/p>\n If you’re curious enough, please explore SASS<\/a> (CSS with superpowers) on your own.<\/p>\n JavaScript is the scripting language that lets you create dynamic content.<\/p>\n Variables<\/strong> You may come across the keyword Functions<\/strong><\/p>\n With this we created a function called Events<\/strong> With DOM Manipulation<\/strong><\/p>\n Change text<\/p>\n A button that changes a theme color<\/p>\n Changing styles on hover using JavaScript<\/p>\n Interactive portfolio enhancements<\/p>\n Handling a click event<\/p>\n Using I wrote a three series blog post on doing so-called AJAX calls (fetching data from some API), check them out here:<\/p>\n JavaScript ES6<\/strong> And that’s a wrap! We’ve just scratched the surface of the amazing world of CSS and JavaScript. Remember, practice is key, and the web is your canvas. Go out there and create something awesome!<\/p>\n
\nNow, if you thought our HTML journey was exciting, buckle up! We\u2019re about to dive into the world of CSS and JavaScript. These are the tools that will transform your static HTML pages into vibrant, interactive experiences. <\/p>\nPart 1: CSS – Making Your Website Stylish<\/h3>\n
Basic Concepts of CSS<\/h4>\n
p { color: blue};<\/code>.<\/p>\n\n
\n
p { }<\/code> targets all <p><\/code> elements.<\/li>\n<\/ul>\n<\/li>\n\n
{}<\/code> brackets.<\/li>\ncolor: blue;<\/code> \u2013 this tells the paragraph text to be blue.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nIncorporating CSS into HTML<\/h4>\n
\n
<p style="color: blue;"><\/code>.<\/li>\n<style><\/code> tag in the HTML head.<\/li>\n.css<\/code> file, linked in the HTML head with <link rel="stylesheet" href="style.css"><\/code>.<\/li>\n<\/ul>\nExploring Common CSS Properties<\/h4>\n
body { color: #333; font-family: 'Arial', sans-serif; }<\/code><\/pre>\np {\n font-size: 16px;\n font-weight: bold;\n font-style: italic;\n}<\/code><\/pre>\nh1 {\n text-align: center;\n text-decoration: underline;\n}<\/code><\/pre>\n.content {\n margin: 20px;\n padding: 15px;\n}<\/code><\/pre>\n.box {\n border: 2px solid #000000; \/* Solid black border *\/\n border-radius: 10px; \/* Rounded corners *\/\n}<\/code><\/pre>\n\n
a:hover {\ncolor: #ff0000; \/* Red color on hover *\/\ntext-decoration: none;\n}<\/code><\/pre>\n<\/li>\na:visited {\ncolor: #800080; \/* Purple for visited links *\/\n}<\/code><\/pre>\n<\/li>\n<\/ul>\n\n
display: flex;<\/code> enables a flexible box layout.<\/li>\nResponsive Design Basics<\/h4>\n
@media (max-width: 600px) { body { background-color: lightblue; }}<\/code><\/code><\/p>\nAdvanced Selectors<\/h4>\n
\n
\na:hover { color: red; }<\/code> changes link color on hover<\/p>\n<\/li>\n
\ntransition: background-color 0.5s ease;<\/code><\/p>\n<\/li>\n@keyframes example {\nfrom {background-color: red;}\nto {background-color: yellow;}\n}\ndiv {\nanimation-name: example;\nanimation-duration: 4s;\n}<\/code><\/pre>\n<\/li>\n<\/ul>\nAdvanced CSS<\/h4>\n
Part 2: JavaScript – Bringing Interactivity to Your Website<\/h3>\n
Basic Syntax and Concepts<\/h4>\n
\nlet message = 'Hello, world!';<\/code> – with this we defined the variable called ‘message’ and saved in it the string ‘Hello, world!’.<\/p>\nvar<\/code>, but that was an old keyword that is no longer suggested to be used because of the unintended consequences<\/a>.<\/p>\nfunction greet(name) {\n alert('Hello, ' + name);\n}<\/code><\/pre>\ngreet<\/code> that takes a parameter called name<\/code> and outputs Hello name<\/code> via an alert (OFC, name is replaced with whatever you pass into the function as a parameter).<\/p>\n
\n<button onclick="greet('Alice')">Greet<\/button><\/code><\/p>\nonclick<\/code> we define what function is going to be run when the button is clicked.<\/p>\n\n
document.getElementById('myText').innerHTML = 'New Text';<\/code><\/pre>\n<\/li>\n<button onclick="changeColor()">Change Theme<\/button>\n<script>\nfunction changeColor() {\ndocument.body.style.backgroundColor = 'lightblue';\n}\n<\/script><\/code><\/pre>\n<\/li>\ndocument.getElementById('myElement').onmouseover = function() {\nthis.style.color = 'red';\n};<\/code><\/pre>\n<\/li>\ndocument.getElementById('project1').onmouseover = function() {\nthis.style.transform = 'scale(1.1)';\n};\ndocument.getElementById('project1').onmouseout = function() {\nthis.style.transform = 'scale(1)';\n};<\/code><\/pre>\n<\/li>\ndocument.getElementById('myButton').addEventListener('click', function() {\nalert('Button clicked!');\n});<\/code><\/pre>\n<\/li>\n<\/ul>\nAdvanced topics<\/h4>\n
fetch<\/code> to load data<\/strong><\/p>\nfetch('https:\/\/api.example.com\/data')\n .then(response => response.json())\n .then(data => console.log(data));<\/code><\/pre>\n\n
\nThere are some awesome things that have been added to the ‘new’ flavor of JavaScript, called ES6. I won’t go into the details here, but use Google (or ChatGPT, or Bard, or …) and look into these topics:<\/p>\n\n
const add = (a, b) => a + b;<\/code><\/li>\nconst greeting = `Hello, ${name}!`;<\/code><\/pre>\n<\/li>\n<\/ul>\nConclusion<\/h3>\n