Git Product home page Git Product logo

task-website-exploration's Introduction

First things first

  • Fork this repo by clicking the Fork button on the top right in Github
  • Clone the repo you just forked to your device using ssh link
  • πŸ”΄ Make sure you forked this repo by validating that the name of the repo (on the top left side of the github repo page) should look like this {YOUR_USERNAME}/TASK-Wesbite-Exploration. Make sure it's not JoinCODED/TASK-Website-Exploration

What is a website??

In this exploration, you'll learn and discover the main languages for website development.

  • HTML is used to define the structure of a page - it tells your browser what is on the page.
  • CSS is used to style the contents of a page - it tells your browser how things on the page should look.
  • JavaScript is used to make pages interactive - it tells your browser what to do when users interact with things on the page.

The Easy Peasy Lemon Squeezy Part πŸ‹

  • Double click on index.html file, now you should see the website in your browser! Yay!
  • Open the folder in VSCode. You can do this by dragging the folder to the VSCode icon on your machine, or you can go to VSCode and go to File > Open, and choose the folder from your computer directories.

index.html

  • Open index.html in VSCode
  • Every time you change something in this file, you'll need to save the file and then refresh the browser.
    Make the following changes:
    • Change the title Welcome to the Full-Stack Bootcamp by CODED! to something more exciting! Change it to whatever you like. Add some emojis to it to make it fun πŸ₯°
    • Change the name Fulan Al-Fulani to your actual name
    • Change the bio from I love CODED, and I'm willing to learn lots of cool stuff! to a quick bio about yourself
    • Change the goals in the list to your own goals for this bootcamp

style.css

  • Open style.css in VSCode
  • Select everything in the file (ctrl + A or cmd + A) then cut (ctrl + x or cmd + x) πŸ˜™
  • Now save and refresh the page. What do you see?! 😱
  • Now undo (ctrl + z or cmd + z)! 😏
  • Save and refresh the page. Ψ§Ω„Ψ­Ω…Ψ― Ω„Ω„Ω‡ everything looks better again!
  • Change the background color using the color picker.
    You can access the color picker by hovering over the color square for a second.
  • Change the text color from white to any other nice color that matches your new background color.

The Challenging Part πŸ€Όβ€β™€οΈ

There are several buttons in index.html that look like this:

<button onclick="doSomething()">Do Something</button>
  • What do you think onclick in the button tag does? Being a good developer means being good at research. Look this up on Google.
  • The SHOUT! button is supposed to convert all text in the page to UPPERCASE.
    But it's not working because it's trying to call the wrong function.
    Can you find the correct function name by reading index.js?

The Superhero Part πŸ¦ΈπŸ»β€β™‚οΈ

So you think that was easy? Try something a little spicier! 🌢

  • Go to index.js and edit the toggleColor function so that it changes the text color to something that suits the new styling you have in style.css

task-website-exploration's People

Contributors

octowl avatar omsi96 avatar zainabbaq avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.