How To Create a Simple Website Using Bootstrap and HTML

I have been researching and creating a website using bootstrap and HTML inside PHPStorm. In this tutorial, I will be explaining to you how to implement Bootstrap and HTML to create a main page and side pages and be able to navigate back and forth. Here are the steps….

  1. Find a basic bootstrap template, which you can find at this link here: http://getbootstrap.com/getting-started/
  2. Use a combination of <div>, <nav>, <body>, <head>, and <html> to create the main layout of the page to where you can input information to your liking.
  3. Using this code, input your header (picture of code and page will be shown at end) and subheaders.
  4. Once you’ve done this, name your header and subheaders in the <li>/href= portion of the code.
  5. To be able to navigate from page to page, you need to be sure that your href for that header/subheader is the same on every HTML file you are working on.

Once you get this done, you can enter in your information

 

 

 

 

 

How to block collisions between certain objects

Stopping collisions between certain objects can be useful when projectiles are hitting you and making you go flying. Or when you don’t want people on the same team shooting each other.

First you need to click on “edit” In the top right hand corner of the screen. Then you click on “project setting” which will open a drop down bar, then you click “physics” then there will be a big confusing triangle with names on top and names on the bottom. Where the two things in which you don’t want to collide meet, un-click that box.

This was one of my many challenges in the game I was making during this semester. It took me many more days then

Firebase How-to Article

For more in-depth go here: https://codelabs.developers.google.com/codelabs/firebase-web/#0

  1. Create a folder with your name in “User Data” in the C drive
  2. Download Friendly Chat off of Github: https://github.com/firebase/friendlychat
  3. Create a notepad and name it “run-this-first.bat” then put in set PATH = %PATH%;”C:\User Data\Your Name\node-v6.10.2-win-x64″set NPM_CONFIG_PREFIX=C:\.npm-global. Save it to your folder with the friendly chat master in it.
  4. Everything you need for the app to work should be in the folder web-start
  5. Use brackets to edit the main.js for all the main parts of the app (should be in the folder scripts)
  6. Use command prompt to test the code the default line your should have is C:\User Data\Your Folder\friendlychat-master\web-start\node_modules\.bin>
  7. Use dir to look into a folder and use cd to change the place your going to
  8. start off test Firebase version, if that doesn’t work you did something wrong then do Firebase use –add, and after that Firebase login.
  9. After you do all that and your successful with it then type Firebase serve. In your browser search localhost:5000
  10. Set up all your sign-in options and sending images like it says in the firebase document.
  11. After all that is completed final step is Firebase deploy. This deploys the app on the internet and everyone is able to use it. It should give you the link of where you need to go to find it.
  12. After all that you are finally done with your chatroom app.

 

How to start up a Local host Server using EasyPHP

Things you need

  • A database made in EasyPHPDevServer
  • A baked version of the server stored somewhere
  • addgettopath.bat file
  • Windows 10

Steps

  1. Navigate to the file where the addgettopath.bat file is located
  2. Copy the file path
  3. Do windows+r
  4. Type cmd and hit enter
  5. Type cd and paste the file path
  6. Hit tab and open the addgettopath.bat file
  7. Navigate to the file where you baked the DB
  8. Type bin\cake server
  9. Celebrate that you start a local hosted server

how to add a map

First you need something you want on your map. Then you need a location (longitude-latitude  [‘Blairs ferry road’, 41.977595, -91.714813, 4]
, [‘Johnson ave Nw’, 42.023100, -91.624238, 5]
, [‘Southgate ave’, 41.640881, -91.9569, 3]
, [‘middle road’, 41.957377, -91.658464, 2]
, [‘ Clark st’, 41.604493, -93.648357, 1]
, [‘food bank ‘, 42.890123, -90.645212, 6]
, [‘luckys market’, 41.642235, -91.508941, 7]
, [“john’s market”, 41.658803, -91.532466, 8]
, [“central discount”, 41.540984, -91.705687, 9]

after you have done this copy this function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
for (var i = 0; i < stores.length; i++) {
var store = stores[i];
var marker = new google.maps.Marker({
position: {
lat: store[1]
, lng: store[2]
}
, map: map
, title: store[0]
, zIndex: store[3]

after that this is what your map should look like– file:///C:/temp/User%20Data/leroy/l3roy.github.io/index.html

Quinn- How to use Code.org’s App Lab to Change Screens

when you first get in you will need to go to design and where it says screens click it then add a screen. Once that is done add a button to the first screen. then go to the code tab and look in UI controls. the first one you see will be called (On Event). add that to your code and change the ID to button 1 with the type being click. then scroll down to the bottom of UI controls and look for the code that says set screen. Put that code in the bottom of the on event code and set it to screen 2.

Gabes How to Post

How to make a video addressing an issue

  1. Gather your facts for the issue you are addressing for example since I will be talking about world hunger I will do a google search for world hunger facts or statistics.

 

  1. Next you should open a blank document and find some facts and copy them on to the document But BE AWARE THAT YOU CANT COPY IT EXACTLY UNLESS YOU GIVE CREDIT TO THE SOURCE BY CITING IT easy bib is a free and easy way to do this.
  2. Then you go to screencastomatic.com and download it so you can record what is on the screen.
  3. Now open up a PowerPoint so you can put the facts in it.
  4. You can use effects if you want the slideshow to be better
  5. Next you go to a video editor like movie maker to edit some effects in to it
  6. Once you make the changes you can save your video and you can do what you want with it

 

how to create pages.

  1. you must select onevent
  2. and click setscreen,
  3. you must go to design.
  4. go to “button”.
  5. drag “button” on screen.
  6. on design, go the black arrow
  7. click on new screen
  8.  for onevent you have to put in butten1 and for setscreen you have to put in screen2.
  9. when you see ” Drag the elements into your app .”
  10. and have it clicked when your creating on a page. 
  11. for each page you make, you must change the number on butten and screen on onevent and setscreen.
  12. hover the pointer over next page and back page.
  13. you will figure which number page is.
  14. set up next or back page

Basics to Creating a website in html


This is the first code that you always should start with.  In order to code an html website we’ll take a deeper look at this piece of code and understand the pieces that make it up.

The first line we’ll skip(line in terms of code means the different rows of code), just understand that is necessary for the site, google explain’s this much better than I can.  So let’s start with the 2nd and 7th lines.  These lines of code inform the internet “HEY!  I’M A WEBSITE.”  Failure to understand and need more information to understand means you need, to return to kindergarden.

Let’s move onto lines 3 and 4.  These lines contain meta data and other information about the site, in other words it’s like setting the guidelines of the site.

Finally we’ll cover lines 5 and 6. These lines are the meat/structure of the website, additions to this area of the code is what adds to the page and presents the information.