how i started

In this example below you will see how to do a how i started with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>how i started</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="page2">
    
  <div class="header">
    <p><a href="https://codepen.io/dusanrandjelovic/full/mpMXjB/" target="_blank">Dušan Ranđelović |</a></p>
    <ul>
      <li><a href="#" style="text-transform: uppercase;">How I Started</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/PErdNZ/" target="_blank">CodePen Websites</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/aEgXXB/" target="_blank" >Atom Websites and Logos</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/WdVzgb/" target="_blank">WordPress Websites</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/goVBPm/" target="_blank">Contact</a></li>
    </ul>
  </div>
  
  <div class="srediste">
  <h1>How I Started</h1>
    <div class="col-sm-6">
  <p>Without any knowledge of coding, about programming, without any knowledge of website creation, I needed to have some clear goal about what I want to learn. This goal was: I want to make a website. With research, firstly, I came to WordPress, free website builder. With WordPress I made couple of websites. Because those sites are tottaly free (free domain name and hosting), they have subdomain .wordpress and some of them have advertisement for WordPress on their pages. But when site was finished, he was not visible on google search. Then, I found that I need to submit URL of my website to google. After that, my site is visible. 9/12 WordPress websites, that I made, are on first google page after search, without typing .wordpress. You only need to type, for example, mlekara mlecni zalogaj, and you will see this site on first google page.</p> 
    </div>
    <div class="col-sm-6">
  <p>My first goal was accomplished. Second goal was: I want to code site. With research, I found W3schools, freeCodeCamp, codecademy, free platforms for learning. I learned HTML5 and CSS3, Bootstrap, and when I started with JavaScript and jQuery, I had first problems to understand how to implement theory in practice. In CodePen I made first sites by coding. But, CodePen is working platform and sites are not visible on google search. I realised that I need code editor and host. I downloaded Atom, free code editor and made files with HTML5 and CSS3. I chose 000webhost to host my sites and simply copy/pasted files on required space on my 000webhost profile. I did not need Filezile. Three sites that I coded, are part of world wide web: informalno ucenje, serbian dogs, prirodnjacki centar sumarak. But, problem with free 000webhost hosting is: suffix on domain name .000webhostapp; 4 hours a day site is sleeping; there are advertisements on site pages.  </p>
    </div>
  </div>
  
  <div>
    <p style="color: OrangeRed; text-align: center;">____________________</p>
  </div>
  
  <div>
    <button onclick="myFunction1()">What I am learning now?</button>
  <p id="as"></p>
  </div>
  
  
  
  <div class="footer">
    <div class="levo">
    <p>&copy; Dusan Randjelovic |</p>
    <p class="te">dusanrandjelovic92@gmail.com</p>
    </div>
    <div class="desno">
      <p>My LinkedIn profile:</p>
      <a href="https://www.linkedin.com/in/dusan-randjelovic-98a170134/" target="_blank"><img src="https://cdn4.iconfinder.com/data/icons/bubble-gradient-social-media-1/200/linkedin-128.png" /></a>
    </div>
  </div>
  
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dusanrandjelovic/how-i-started-XVevGq */
* {
  margin: 0;
  padding: 0;
}
body {
  color: black;
  background-color: Snow;
  font-family: Times;
}
.header {
  height: 70px;
  width: 100%;
  background-color: OrangeRed;
  color: Snow;
  position: fixed;
  z-index: 1000;
  opacity: 0.9;
  top: -8px;
}
.header p {
  padding-left: 50px;
  padding-top: 20px;
  float: left;
  font-size: 150%;
}
ul {
  list-style-type: none;
  float: right;
}
li {
  display: inline-block;
  padding-right: 50px;
  padding-top: 24px;
  font-size: 130%;
  letter-spacing: 0.02em;
}
a {
  color: Snow;
}
a:hover {
  color: SaddleBrown;
  text-decoration: none;
}
.srediste h1 {
  text-align: center;
  margin-top: 120px;
  margin-bottom: 40px;
}
.srediste p {
  width: 80%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7em;
  font-size: 17px;
  margin-bottom: 40px;
}
button {
  margin-left: 585px;
  margin-top: 50px;
  padding: 17px;
  border-color: OrangeRed;
  background-color: Snow;
  color: OrangeRed;
}
#as {
  margin-left: 635px;
  margin-top: 20px;
  font-size: 18px;
  color: OrangeRed;
}
.footer {
  clear: both;
  height: 110px;
  width: 100%;
  background-color: OrangeRed;
  margin-top: 90px;
}
.levo {
  float: left;
  padding-left: 80px;
  padding-top: 30px;
}
.levo p {
  float: left;
  color: Snow;
  font-size: 140%;
}
.te {
  padding-left: 300px;
}
.desno {
  float: right;
}
.desno a img {
  height: 50px;
  padding-left: 44px;
}
.desno p {
  color: Snow;
  padding-top: 17px;
  padding-right: 70px;
  font-size: 16px;
}

/*Downloaded from https://www.codeseek.co/dusanrandjelovic/how-i-started-XVevGq */
var a = ["JavaScript"];


function myFunction1() {
  document.getElementById("as").innerHTML = a;
}

Comments