Coding Solutions

Bronze Award Badge

Original Original
Modified Modified

Landing Cool

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Inspect element

iPhone 6

x

Kindle Fire

x

iPad Air 2

x

Landing Cool

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Additional sources of information

As well as forums, there are lots of tutorials and courses online that you can use to develop your skills including YouTube, Lynda.com, W3schools.com, Microsoft Virtual Academy and Codecademy for example. You can also access content through Massive Open Online Courses (MOOCs).

Here are some useful links for further information on coding solutions

http://forums.asp.net/t/1337412.aspx?FAQ+on+the+correct+forum+to+post+at+is

https://www.sitepoint.com/top-5-places-to-share-code-quickly/

http://codereview.stackexchange.com/

Quiz

To finish the badge you just need to show that you can find some information from these additional sources. Open a new browser tab so that you can find the answers to the following five quiz questions.

Summary

Well done! You’ve completed you coding solutions badge. In this badge you’ve learnt:

  • How to solve common website coding problems
  • How to check your code is correct
  • Where to find further information when you need to solve future coding problems

You should now have a good idea where you can find information. You should keep up-to-date with posts to find out what others are discussing, learn new techniques from online sources (including iDEA) and read review and news site articles to find out what are the latest developments.

Go Back to iDEA
  • Click Format code so the HTML code is easier to read and we can find the error.
HTML 


<div class="theme-hero">
<div class="theme-content">
<div class="theme-content_middle">
<h1>Landing cool</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<button class="">HEY</button>
</div>
</div>
</div>
CSS 

/* background-image: starry-night.jpg */

.theme-hero {
  background-image: url();
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* color: white; */
/* text-align: center; */

.theme-content_middle {
  color: ;
  text-align: ;
}


/* font-family: 'Amatic'; */
/* font-size: 65px; */
/* "px" or pixel is a unit of measurement */

.theme-content_middle h1 {
  font-family: ;
  font-size: ;
}


/* This Class you must use the Button */

.btn-rounded {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #ffffff;
  padding: 10px 40px;
  margin: 0;
  font-size: 24px;
  vertical-align: middle;
}