shway
/
Notepad
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Notepad/enter/Coding Tips (Classical)/Project Vault/Current Projects/Teaching/web design/WD Resources/Review & Putting it all tog...

3.6 KiB
Raw Permalink Blame History

Web Design with Shway !

Welcome back. 😁

gif

WHAT DID WE LEARN:

  • AIDEN - LAST CLASS - GAMES IN SCRATCH
  • LUKE - IN THE BEGINNING - LEARNED GITHUB (tried)
  • GRAHAM - Ended up putting it in GOOGLE DOCS, and then we used html.viewer.net
  • MADDUX - <!DOCTYPE HTML> THE very FIRST line of an html document (thanks luke)

Intro to the Internet:

  • Browser - Luke

  • Games

  • Movie Database - Lists of useful things to watch

  • Apps

  • Art and Webcomics

WHAT DID WE LEARN (part 2):

  • MADDUX - <!DOCTYPE HTML> THE very FIRST line of an html document (thanks luke)
  • LUCAS - THE 2nd line is always
<html> 

<iframe width="560" height="315" src="https://www.youtube.com/embed/I6eYgo1kiPo?si=Z73QhJg9c-5fskn6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</html>
  • JUDE - EVERYTHING goes in between the html "tags"
  • Tomer - What does the title do? It creates the literal title of your webpage (like the tab title)

What did we learn part 3?

Misha - How to we embed vidoes/games into our site: (we go into the iframe code)

How do we input an image?


<html> 

Hi hello

<iframe width="560" height="315" src="https://www.youtube.com/embed/I6eYgo1kiPo?si=Z73QhJg9c-5fskn6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


</html>

What did we learn part 3?

How do we make different size fonts in html ?

<html> 
<h1> TEXT </h1>

<h2> smaller test> </h2>
<html>

TEXT

smaller text

even smaller text

even smaller text

How do we change the background color?


<!DOCTYPE HTML> 

<HTML> 

<body>
<body style=“background-color:red;”> 





</body> 

</HTML>

WHAT WE NEED HELP WITH:

WHAT THE NEXT TRIMESTER IS GOING TO BE:

STEP 1: Open up a google doc, images & background color.

https://html.onlineviewer.net/

<!DOCTYPE html>    

<html> 
<body>
<body style= “background-color:red”> 
<h1> Blah balah </h1> 

</body>  

</html>

STEP 2: Adding tables & embedding games + videos!

We have all heard about Scratch? Played games last week? Let's play geometry dash --> Geometry Dash

But On our website! :D

Add your own games here

<!DOCTYPE html>    

<html> 
<body>
<body style= “background-color:red”> 
<h1> Blah balah </h1> 
<p> Lorem ipsum about random stuff that interests me. </p>  

<h2> Geometry Dash Blah </h2> 
<iframe src="https://scratch.mit.edu/projects/835488610/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>

</body>  

</html>

STEP 3: Publishing the website & additional CSS. 

https://neocities.org/browse**

Step 4: Additional Tips