{"id":22880169,"url":"https://github.com/codedwells/learn-html-css-js","last_synced_at":"2025-03-31T15:33:30.880Z","repository":{"id":109210104,"uuid":"597322399","full_name":"Codedwells/Learn-HTML-CSS-JS","owner":"Codedwells","description":"This repo contains materials for our community's web-track. We set-up a project based learning system which has proven highly effective. ","archived":false,"fork":false,"pushed_at":"2023-02-21T14:38:42.000Z","size":403,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T21:14:45.828Z","etag":null,"topics":["community-driven","html-css-javascript","learning-by-doing","web"],"latest_commit_sha":null,"homepage":"https://codedwells.github.io/Learn-HTML-CSS-JS/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Codedwells.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-04T07:07:18.000Z","updated_at":"2023-02-10T13:26:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc568a2d-25a8-4537-8926-3fa141561473","html_url":"https://github.com/Codedwells/Learn-HTML-CSS-JS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codedwells%2FLearn-HTML-CSS-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codedwells%2FLearn-HTML-CSS-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codedwells%2FLearn-HTML-CSS-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codedwells%2FLearn-HTML-CSS-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codedwells","download_url":"https://codeload.github.com/Codedwells/Learn-HTML-CSS-JS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246489763,"owners_count":20785910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["community-driven","html-css-javascript","learning-by-doing","web"],"created_at":"2024-12-13T17:16:40.214Z","updated_at":"2025-03-31T15:33:30.857Z","avatar_url":"https://github.com/Codedwells.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# This repo contains source code for our local communitiy's Web-track\n## Meet-Up 1 Nav-Bar\n**Friday Feb 3rd 2023** \\\nDuring this session we introduced some basic HTML and CSS concepts to out newer members.  \nWe built a simple **nav-bar** as a of demonstrating the basic use of HTML and CSS.  \n\n\u003chr\u003e\n\n### The source code is [here](./1_NavBar/)\n![NavBar](1_NavBar/images/navbar.png)\n\n\n## Meet-Up 2 Cards\n**Tuesday Feb 8rd 2023** \\\nDuring this session we were able to  make cards to futher cement the concepts of flexbox.\\\nWe also made the cards responsive using some media queries.\n\n### The source code is [here](./2_modal_cards/)\n![NavBar](2_modal_cards/images/cards.png)\n\n\u003chr\u003e\n\n## Meet-UP 3 Intro to JavaScript\n**Friday Feb 10th 2023**\\\nDuring this session we introduced the basics of JavaScript. Some base concepts were\\\ncovered. Some concepts covered include;\n* Naming convension i.e camelCase\n* Variables declaration using diffrent key words.\n    ```js\n    // Varibles\n    var myName = 'John';\n    let location = 'Nairobi';\n    const career = 'Web development';\n    ```\n* Functions\n  ```js\n    function sayHello() {\n\t    console.log('Hello world!!!');\n    }\n\n    sayHello(); // Hello world!!!\n\n    // ES6 Arrow functions\n    const sayHi = () =\u003e {\n\t    console.log('Hi World!!!');\n    };\n\n    sayHi(); // Hi World!!!\n  ```\n\n* Conditional statements\n  ```js\n    // If statement\n    if (1 \u003c 2) {\n\t    console.log('Less than two!!');\n    }\n\n    // if else statement\n    if (6 \u003e 2) {\n\t    console.log('Greater than two!!!');\n    } else {\n\t    console.log('Less than two!!!');\n    }\n\n    // else if statements\n    if (4 \u003e 9) {\n\t    console.log('less than nine');\n    } else if (4 \u003c 9) {\n\t    console.log('Less than nine');\n    } else {\n\t    console.log('Does not meet the  condition');\n    }\n  ```\n\n* Looooops\n  ```js\n    // for loop\n    for (let i = 0; i \u003c 10; i++) {\n\t    console.log(i);\n    }\n\n    // While loop\n    let j = 1;\n    while (j \u003c 10) {\n\t    console.log(j);\n\t    j++;\n    }\n  ```\n\nWe wrapped the day up by creating a  function to find the sum of\\\nall even numbers between 1 and 10;\n\n```js\nfunction addEvenNumbersBetween1and10() {\n\tlet number = 1;\n\tlet sum = 0;\n\n\twhile (number \u003c 11) {\n\t\tif (number % 2 == 0) {\n\t\t\tsum += number;\n\t\t}\n\t\tnumber++;\n\t}\n\tconsole.log(sum); // 30\n}\n\naddEvenNumbersBetween1and10();\n```\n\n### The source code is [here](./3_Intro_js/)\n\n\n\u003chr\u003e\n\n\n\n## Meet-UP 3 Intro to JavaScript\n**Friday Feb 17th 2023**\\\nDuring this session we were introduced to the DOM.** Document Object Model**.\\\nWe explored basic **DOM manipulation**  and DOM events.\n\n### The source code is [here](./4_DOM/)\n\n\u003chr\u003e\n\n## Meet-UP 4 JavaScript\n**Friday Feb 17th 2023**\\\nDuring this session we had a recap of the what some basic JavaScript concepts.** Document Object Model**.\\\nWe also explored more **DOM manipulation**  and DOM events.\n\n### FizzBuzz\nWe started the recap by making the common fizzBuzz algorithm.\n\n```js\n  const fizzBuzz = () =\u003e {\n\tfor (let i = 1; i \u003c= 20; i++) {\n\t\tif (i % 2 === 0) {\n\t\t\tconsole.log(i, 'Fizz');\n\t\t} else {\n\t\t\tconsole.log(i, 'Buzz');\n\t\t}\n\t}\n};\nfizzBuzz();\n```\n\n\u003chr\u003e\n\n## Meet-UP 5 JavaScript DOM events\n**Friday Feb 17th 2023**\\\nDuring this session we had learnt Click events.We created a counter app\\\nand a number guessing game.\n\n### The source code is [here](./5_DOM_Events/)\n![Events](./5_DOM_Events/screenshots/m5.png)\n\n\n\n\u003chr\u003e\n\n\u0026nbsp;\n\u0026nbsp;\n\n\u003chr\u003e\n\n\u003cdiv style=\"display:flex;flex-direction:column;align-items:center;\"\u003e\n    \u003ch3\u003eOur leads\u003c/h3\u003e\n    \u003cp\u003eAbel Misiocha \u003ca href=\"https://github.com/Codedwells\"\u003eGitHub\u003c/a\u003e\u003c/p\u003e\n    \u003cp\u003eCliff Omollo \u003ca href=\"https://github.com/OsegoTech\"\u003eGitHub\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodedwells%2Flearn-html-css-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodedwells%2Flearn-html-css-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodedwells%2Flearn-html-css-js/lists"}