FCC practice and notes.

In this example below you will see how to do a FCC practice and notes. with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FCC practice and notes.</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class=
     "container-fluid">
  <!-- bootstrap impletation link -->
  <link rel=
        "stylesheet" 
        href=  "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

  <!-- font awesome impletation link -->
  <link rel=
        "stylesheet" 
        href=
        "//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />


  <head>
    
    <div class=
         "container-fluid">
      <div class=
           "row">
        
        <div class=
             "col-xs-8">
          <h2 class=
              "dog-app 
               text-center">
            Dog Photo App</h2>
              
            </div>
        
        <div class=
             "col-xs-1">
          <img class=
               "img-responsive" 
               src=
               "https://inspirationseek.com/wp-content/uploads/2014/09/White-Pomeranian-Dog.jpg"                  
               alt="">
        </div>
      </div>
    </div>

    <link 
          href=
          "https://fonts.googleapis.com/css?family=Lobster" 
          rel="stylesheet" 
          type="text/css"
          >

  </head>

  <body>


    <div class=
         "button-spaces">
      
      <div class=
           "row">
        
        <div class=
             "col-xs-4">
          
          <button class=
                  "btn 
                   btn-block
                   btn-primary">
          <i class=
             "fa 
              fa-thumbs-up">
             </i>Like 
          </button>
            
          </div>
        
        <div class=
             "col-xs-4">
          <button class=
                  "btn 
                   btn-block
                   btn-info">
          <i class=
             "fa 
              fa-info-circle">             
             </i>Info 
          </button>
               
             </div>
        
        <div class=
             "col-xs-4">
          
          <button class=
                  "btn 
                   btn-block 
                   btn-danger">
          <i class=
             "fa 
              fa-times 
              aria-hidden=
              "true" 
                    ">               
             </i>Delete 
          </button>
            
          </div>
      </div>
    </div>
    
    
    <div class=
         "list-settings text-center">
      <p id=
         "title">
        Some of the things dogs enjoy
      </p>
      <p>Naps</p>
      <p>Scratches</p>
      <p>Food</p>

    </div>


    <form 
          action=
          "/the-destination-of-the-data" 
          id=
          "user-background-color"
          >

      <input 
             type=
             "text" 
             class=
             "input-left-margin" 
             placeholder=
             "submit items to the list" 
             required
             >
      
      <button 
              type=
              "submit" 
              class=
              "submit-left-margin"
              >
      submit
      </button>
      
      <div 
           class=
           "row"
           >
        <div class=
             "col-xs-6"
             >
          <label>
          <input 
                 type=
                 "radio" 
                 name=
                 "yes-no" 
                 checked
                 >YES
          </label>
          </div>
        <div class=
             "col-xs-6">
          <label>
          <input 
                 type=
                 "radio" 
                 name=
                 "yes-no"
                 >NO
          </label>
          </div>
      </div>
      
      <div class=
           "row">
        <div class=
             "col-xs-4"><label>
          <input 
                 type=
                 "checkbox" 
                 name=
                 "personality">cute
          </label></div>
        <div 
             class=
             "col-xs-4"><label>
          <input 
                 type=
                 "checkbox" 
                 name=
                 "personality" 
                 checked>furry
          </label></div>
      </div>

    </form>
    <!--</div>-->
    <h1 
        class=
        "black" 
        id=
        "blue">
      HI</h1>

    <p>Things I 
      <span 
            class=
            "text-danger">Love
      </span> to do in my free time</p>
    <ul>
      <li>look at car related videos</li>
      <li>read no sleep on reddit</li>
      <li>watch animes</li>
    </ul>
  </body>

  <!--
required - 
when you add this in the inside your input tag, it will not let you submit untill the required items is fulfilled.
<input type="text" placeholder="type here" required>

anchor tags-
are the link text hyper link that are highlighted that will send you to the desinated link.anchor tags are also nested within the paragraph tags
ex- <p>click here if you want to go to <a href="www.google.com">google</a></p>

you can also set the a tags as a deadlink with the hash, the reason for this is that sometimes you dont want your logo or title do nothing 
ex - <a href="#"></a>

form tags- 
is a tool that will send the user data to the desinated json or the file you want to submit to with using only html.
<form action="/the-url-you-want-to-send"></form>

input tags-
input tags will allow the user to input their information to send via form tool, input tags are nested within the form tag
<input type="text" placeholder="type here" required>

button - 
like the name implies, it is a tool that will let the user send their info by clicking the button, this tag is also within the form tag
<button type="submit">submit</button>

Radio button-
Radio buttons are for questions when you want the users to only answer once.
Radio buttons are also a form of input tags
Each of the radio buttons are nested inside the label tags 
<label><input type="radio" name="yes-no"></label>
Radio buttons always have the same name artibute so in a yes and no it will look like this
<label><input type="radio" name="yes-no">Yes</label>
<label><input type="radio" name="yes-no">No</label>


<form action="text">
<button type="submit">
submit
</button>
<label><input type="radio" name="yes-no">Yes</label>
<label><input type="radio" name="yes-no">NO</label>
</form>

Checkboxes-
like the radio tag checkbox also has the same tags like nested inside the label tag and use the same input type but this time we change it to checkbox for the type the same name logic applies as where the name has to identical for all the names for the input
  <label><input type="checkbox" name="personality">cute</label>
  <label><input type="checkbox" name="personality">furry</label>

Default radio and checkboxes-
at the end of the input tags like required, you can type checked and it will show up at it is checked by default
  <label><input type="checkbox" name="personality" checked>cute</label>

div -
also knowen as division container 
it is a general pourpse container for the other elements
its useful for passing the css of its own class declarations down to all of the elements that it contains 
so for summany it is like a food container that holds its class so its easier to maintain and organize. Divs are used a lot in code, and if you want to apply using div in a react native format then apply to every single things of group that use class
in the css part the div like everyone else starts with a .ball-color{color:black;}
  <div class="ball-color-black>
    <p>ball</p>
  </div>

id-
like divs where it is used as a class container for the nested tags 
id is smiliar but id is used for only single elements container
dont give the same id atribute to another element, like your social security, it is unique 
<form action="/dog-photo" id=dog-photo-app></form>
<style> #dog-photo-app{color:#00BCD4} </style>

padding, margin, border

the trio that dictates where the html element stays in the screen
padding like the name implies is the first layer 
border is the second layer as it is the border for the padding
margin, finally is the outside layer 
each of them have a 4 direction rule or the clocl notation 
top-right-bottom-left ex x:top-px right-px bottom-px left-px;

html and css override of styles which overrides which?
the answer is the html class always overrides the styles class
ex

<style>
body{
background-color: black;
}
</style>

<hmtl>
<body>
  <h1>
    <p class="h1-color-white">hi</p>
</h1>
</body>
</hmtl>

the above example will show that the html p class tag will override the body styles


-->

  <!--

new comment section because i crashed the top one 
ok so 

Class vs class in the same element which one will win if they both have the same objective?
like reading the book in english from left to right, the class that is in on the far right will be implemented, the left class is the old class

ok now we learned class can override the basic html styles done in the styles tag but there is another override, which is the override of the class it self and that is id
id can override all the classes in the same element ex
<h1 class="black" id="blue">HI</h1>

<style>
.black{
color: black;
}
#blue{
color: blue;
}
</style>

ok so just learned from free code camp that we can 
override the id as well with something called 
an inline style 
<h1 style="color:blue" id="random"></h1>

!important
In the front end we will use alot of css libaries and what if some of the css is override by these libaries and your own css is overriden then there is one tool in the html bag and that is called !important , this word lets you make sure your class is 100% implented
in order to implement this technique we need to add it in the styles or your css class file and inside the class you want to be sure it is used with the code, in this case is the color blue.

ex
<h1 id="yellow" class="blue green" ></h1>

<style>
.blue{
color:blue !important;
}
</style>


-->

  <!-- 
next is expanding our use of colors by using something called hex code
hex code alows to expand your color palet there are 6 digits and letters 
hex code uses both number and letters to represent the color palet
hex code always starts with the hash# symbol then followed by 6 digits and letters
it can be all digits showen here for the example
#000000 this represents the color balck because thats the lowest value in the hex code 

now we know the basics of hexadecimal now lets add in more rules to represent precise colors
so FF is the brightest and highest color in the hex code rule
for ex for the color red the code would look like this #FF0000 
for green #00FF00 for orange it is #FFA500
and 0 represents the complete absense of colors 

hex code can be little bit confusing with 16 million color palets but in hex code 
you can shorten it to 4000 simple colors by using abbrivated of the hex code 
so for the red hex code we said it was #FF0000 we can shorten it to #F00, the browswer still reconises it as the color red

rgb 
Another way you can represent colors in CSS is by using RGB values.

The RGB value for black looks like this:

rgb(0, 0, 0)

The RGB value for white looks like this:

rgb(255, 255, 255)

Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.

If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.


-->

  <!--
reponsive design aka bootstrap 
is tool that makes any screen on the device to adapt its given width, on top of your html code use this 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
to apply the bootstrap functions into your code

On top of your html nest a div within all of your html
inside the div create a class="container-fluid"
this makes all of your elements fluid and alligned

Bootstrap and IMG responsiveness
bootstrap class  img-responsive
<img class="img-responsive" src="www.codepen.io" alt="">
this feature allows us to put any img in html and automatically ajusts with the screen width 

Bootstrap and Text center
bootstrap class text-center
<h1 class="text-center red-text">HI</h1>
this makes the text center lik the name implies

Bootstrap and button
class btn
<button class="btn" >HI</button>
makes the button looks more stylish with BS

Bootstrap block element button
this atribute is to fill in the button for its row
class="btn btn-block"
<button  class="btn btn-block"></button>


Bootstrap primary like button/ info button
class="btn btn-block btn-primary"
<button  class="btn btn-block btn-primary"></button>
<button  class="btn btn-block btn-info"></button>

this attribute is the main class that you will use in your app, it is useful for highlighting the actions that the users wants to take. for ex we have two useful userbuttons- like and info in this sense. 

BS btn-danger
<button class="btn btn-block btn-danger" ></button>
this button attribute lets the user know some desructive action is going on like deletng an item 


BS grid system using col-size-#
bootstrap uses a grid system to organize its stacks of code that are similar like used in buttons of like, info, delete
the collum is the how wide is the block you want it to be so col-xs-4 is 4 xs blocks of extra small blocks of collums.
in order to start the process we first need to add a div element with a class of row,
then each of the button needs to be again nested with another div element with the following class of col, short for collum then - followed by the size of the screen we are working on, in this case if we are building the dog app for the smart phone then the size is xs- followed by the number of the collums in this case is 4. As you can see in the example each of the like,info, delete is organized now into one row side by side.
<div class="row">
<div class="col-xs-4"><button>Like</button></div>
<div class="col-xs-4"><button>Like</button></div>
<div class="col-xs-4"><button>Like</button></div>
</div>
-->

  <!-- 
Span: inline elements 
this feature lets you put several elements together and even style differnt parts of the same element diffrently 
<p>Things I <span class="text-danger">Love</span> to do in my free time</p>
<ul>
<li>look at car related videos</li>
<li>read no sleep on reddit</li>
<li>watch animes</li>
</ul>
so for this span example i made the love text red within the paragraph tag

-->

  <!-- 
custom heading with bootstrap grid system
features used 
div row
div col-xs-8 for the title 
div col-xs-4 for the img
-->


  <!--
Font awesome 
font awesome is a feature that has a bunch of icons stored in a .svg file
here is the link code to use it in any html related project
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
in order to use this feature we need to first create a i element 
then we put the i element inside your button element and give it a class of fa fa-thumbs-up 
<button class="btn btn-block btn-primary">Like <i class="fa fa-thumbs-up"></i> </button>

-->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/fcc-practice-and-notes-pdVRKg */
.list-settings{
  background-color:#64B5F6;
  padding-top:1px;
  padding-right:2px;
  padding-bottom:2px;
  padding-left:10px;
  
  font-family:lobster;
 

}

.dog-app{
  font-family:lobster, monospace;
  color:#F0F0F0;
  background:#00BCD4;
  padding:10px
  
}




#user-background-color{
  background-color:#8BC34A;
  margin: 10px 0px 20px 0px;
}


  
  
}



.submit-left-margin , input-left-margin{
  margin: 10px 10px 10px 10px;
  
}

.black{
  color: black !important;
}

#blue{
  color: blue;
}

.button-spaces{
  margin-bottom:5px;
}


Comments