MyBlog

MyBlog

Introduction


We have made a blogging platform with four different categories covering food, technology, travel and sports. People can add posts based on their interests and view blogs written by other people

Team Members


Name Responsibility
Syesha Girdher Frontend (HTML/CSS) and backend (PHP)
Ashutosh Batabyal Frontend, Wikipage
Mridul Gupta Design and Layout (HTML/CSS/BOOTSTRAP), Wikipage
Akash Nagrath Front end (CSS)
Bhavna Nath cell-content

Area and Initial planning

We planned to create a platform where the user had to signup first, then would be given the option to select from the various subcategories.

i9pv49S.png

Tools and Languages

To design the website we have used HTML and CSS to make it look the way we want, and for back-end we have used PHP and mysql.

  • HTML: Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages. A web browser can read HTML files and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses them to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language rather than a programming language.
  • Cascading Style Sheets: CSS gives the HTML coding colors, format and design.HTML and CSS tutorials are available at codecademy.
  • PHP: PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.
  • MySQL: MySQL is an open-source relational database management system (RDBMS) in July 2013, it was the world's second most widely used RDBMS, and the most widely used open-source client–server model RDBMS.
  • Hosting: You can access the website from [here]
  • Source: You could download the source from [here]

Learning Journey

We first decided which languages will be required to achieve the desired website. Then we looked had to look for good online tutorials since none of us had any previous knowledge of web designing.
We found codecademy particularly useful. For backend, i.e. PHP and mysql we used w3schools.
First we started by creating the skeleton using HTML which is the base for any website. Then CSS was used to style the site according to our preference. For backend we tried using PHP and mysql.


Snippets

front page:

<div class="wrapper">
  <div id="topbar">
    <div class="fl_left">Tel: +91 9999999999 | Mail: info@MyBloG.com</div>
    <div class="fl_right">
      <form action="#" method="post">
        <fieldset>
          <legend>Site Search</legend>
          <input type="text" value="Search Our Website&hellip;"  onfocus="this.value=(this.value=='Search Our Website&hellip;')? '' : this.value ;" />
          <input type="submit" name="go" id="go" value="Search" />
        </fieldset>
      </form>
    </div>
    <br class="clear" />
  </div>
</div>

<div class="wrapper">
  <div id="topnav">
    <ul class="nav">
      <li class="active"><a href="index.html">Homepage</a></li>
      <li><a href="pages/foodblog.html">Food</a></li>
      <li><a href="pages/technologyblog.html">Technology</a></li>
      <li><a href="pages/travelblog.html">Travel</a></li>
      <li class="last"><a href="pages/sports.html">Sports</a></li>
      <li><a href="#">Add a new blog</a>
        <ul>
          <li><a href="#">Food</a></li>
          <li><a href="#">Technology</a>

          <li><a href="#">Travel</a>

          <li><a href="#">Sports</a></li>
        </ul>
      </li>
     </ul>
    <div class="clear"></div>
  </div>
</div>

Stylizing the login page using CSS:

body{
    margin: 0;
    padding: 0;
    background: #fff;

    color: #fff;
    font-family: Arial;
    font-size: 22px;
}

.body{
    position: absolute;
    top: -20px;
    left: -20px;
    right: -40px;
    bottom: -40px;
    width: auto;
    height: auto;
    background-image: url("http://www.desktopwallpaperhd.net/wallpapers/5/2/desktop-wallpaper-cool-themes-photography-digital-51074.jpg");
    background-size: cover;
    -webkit-filter: blur(5px);
    z-index: 0;
}

.grad{
    position: absolute;
    top: -20px;
    left: -20px;
    right: -40px;
    bottom: -40px;
    width: auto;
    height: auto;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); 
    z-index: 1;
    opacity: 0.7;

Screenshots

NJYh6q4.png
ZrrdKNZ.png
foodblog.jpg
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License