Scribd Logo
Upload

Welcome to Scribd!

  • 41 views

    1 To 5 Case Study

    Uploaded by

    Ganesh Bagul
    This document discusses creating a blogging website using only HTML and CSS. It provides a 7 step process including setting up the boilerplate code, creating the layout structure, adding content, and styling elements with CSS. The conclusion emphasizes iterating on design approaches and improving code organization.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    1 To 5 Case Study

    Uploaded by

    Ganesh Bagul
    41 views12 pages
    This document discusses creating a blogging website using only HTML and CSS. It provides a 7 step process including setting up the boilerplate code, creating the layout structure, adding content, and styling elements with CSS. The conclusion emphasizes iterating on design approaches and improving code organization.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses creating a blogging website using only HTML and CSS. It provides a 7 step process including setting up the boilerplate code, creating the layout structure, adding content, and styling elements with CSS. The conclusion emphasizes iterating on design approaches and improving code organization.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    41 views12 pages

    1 To 5 Case Study

    Uploaded by

    Ganesh Bagul
    This document discusses creating a blogging website using only HTML and CSS. It provides a 7 step process including setting up the boilerplate code, creating the layout structure, adding content, and styling elements with CSS. The conclusion emphasizes iterating on design approaches and improving code organization.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 12

    Department of Computer Engineering

    Course Name & Code: Web Technology (310252)

    Date:16/04/2024 Class: T.E Computer Engineering


    Course Teacher: Prof. Jyoti Pawar. Semester: II, A.Y.: 2023-24

    Case Study (Unit- ):

    Title: Create a style sheet suitable for blogging application using HTML and using style sheet

    Abstract:

    The Blog layout consists of a header, navigation menu, main content area, and footer. The header
    contains the website logo, name, and its tagline. The navigation menu is used to allow users to
    easily navigate through the different sections of the blog. The main content area contains the list of
    blog posts with title, author name, published date, and content. Also, there is an archive section, that
    contains recently published articles list. The footer section contains additional information such as
    links to the blog’s social media profiles and a copyright notice.

    Keywords:

    HTML, Blogging application, Development, Server-side scripting language, Scalability,


    Community support, Frameworks, Libraries, Database integration, Security, Performance
    optimization, User experience, Flexibility, Content formats, Best practices.

    Introduction:

    In the digital era, blogging has evolved from a personal hobby to a powerful means of
    communication, marketing, and content dissemination. As the demand for dynamic and
    engaging blogging platforms continues to rise, developers are constantly seeking efficient
    technologies to meet these evolving needs. One such technology that has proven instrumental
    in the development of robust blogging applications is PHP (Hypertext Preprocessor).

    let’s create a full-fledged website using only HTML and CSS. Most of the users have a
    question today – Can you create a website just using HTML and CSS?
    It is quite possible to create a good-looking website with the help of only HTML and CSS.
    HTML stands for Hypertext markup language and provides the skeleton for our website.
    However, CSS (Cascading Style Sheet) allows the skeleton to be more good-looking. Let us
    use seven steps to create a good-looking website from scratch.
     Step 1: Create a Layout
    First create a basic structure of your website as a rough sketch. There are a lot of free
    online services that will help you design your website. Nonetheless, you must have a basic
    structure of the website ready.
     Step 2: Set up the boiler code
    Create a new project folder and create an empty index.html file inside the folder. Here, add
    the boilerplate code to the HTML file.

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>How to create a website using HTML and CSS</title>

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

    </head>

    <body>

    <h1>Test</h1>

    </body>

    </html>

    Before starting the actual content add some test content in your HTML file, and run it on
    the browser to test if the code is working fine.
     Step 3: Create major elements in the layout
    Now, create section elements in the HTML file.

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>How to create a website using HTML and CSS</title>

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

    </head>

    <body>

    <header>

    </header>

    <main>

    <section id="intro">

    </section>

    <section id="about">

    </section>

    <section id="contact">

    </section>

    </main>

    <footer>

    </footer>
    </body>

    </html>

    Read More: Browser compatibility with CSS Gradients

     Step 4: Create the HTML content


    In the previous step, you had created the elements in the layout. In this step, fill in the
    HTML content. Note that, in this example, let us fill the content with dummy text only.

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>How to create a website using HTML and CSS</title>

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

    </head>

    <body>

    <header>

    <nav>

    <ul>

    <li><a href="#intro">Home</a></li>

    <li><a href="#about">About</a></li>

    <li><a href="#contact">Contact</a></li>

    </ul>

    </nav>

    </header>

    <main>
    <section id="intro">

    <div class="Container">

    <img src="Images/doggo.jpg" alt="display picture of doggo">

    <h2>My name is Doggo</h2>

    </div>

    </section>

    <section id="about">

    <div class="container">

    <h1>About Me</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, similique?</p>

    <ul>

    <li>Btech Qualified</li>

    <li>Software Engineer</li>

    <li>GATE AIR 01</li>

    </ul>

    </div>

    </section>

    <section id="contact">

    <div class="container">

    <h1>Contact me</h1>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laudantium.</p>

    <ul>

    <li>Email ID</li>

    <li>Insta ID</li>

    <li>Facebook ID</li>
    </ul>

    </div>

    </section>

    </main>

    <footer>

    <p>© Copyright 2022 Doggo Co LTd.</p>

    </footer>

    </body>

    </html>

    Now, if you reload the page, you are going to get an output something like this. You are
    now going to give this webpage some CSS in the next step to make it good-looking.
     Step 5: Create CSS for the layout

    Before adding the depth in the CSS, let us first add some basic CSS to make our webpage
    look somewhat similar to the layout that we designed in the first step.
    Learn more: What are CSS Breakpoints and Media Query Breakpoints
    Moreover, we linked our HTML file to a CSS file in the second step while writing our
    boilerplate code. Add the basic layout CSS in the linked CSS file. In this step, we are going
    to focus on height, width, padding, margin, and display of the sections and images, to
    make them adjustable according to the webpage.

    *{
    padding: 0;
    margin: 0;
    }
    header{
    height: 45px;
    }
    header nav ul{
    display: flex;
    margin-left: 80%;
    }
    header nav ul li{
    padding-left: 10%;
    }
    section{
    height: 100vh;
    border: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .Container{
    margin-top: 10%
    }
    .Container img{
    height: 300px;
    }
    .Container h2{
    margin-top: 3%;
    }
    footer {
    line-height: 40px;
    display: flex;
    justify-content: center;
    }

     Step 6: Create CSS to style individual elements


    In this step let us style individual content. Let us focus on properties like font, border,
    colors, and more.

    *{
    padding: 0;
    margin: 0;
    }
    header{
    height: 45px;
    }
    header nav ul{
    display: flex;
    margin-left: 70%;
    list-style: none;
    }
    header nav ul li{
    padding-left: 10%;
    }
    header a{
    text-decoration: none;
    color: brown;
    }
    section{
    height: 100vh;
    border: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .Container img{
    height: 300px;
    border-radius: 50%;
    }
    .Container h2{
    margin-top: 2%;
    font-size: 3em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans
    Unicode', Geneva, Verdana, sans-serif;
    }
    .Container p, ul{
    margin-top: 2%;
    font-size: 1.5rem;
    }
    footer {
    line-height: 40px;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    }

     Step 7: Add background color and style


    In this step,let us add some finishing touches, and our website is ready. Let us add a
    background image and background colors to the sections.

    #intro {
    background-image: url(pinkbg.jpg);
    background-repeat: round;
    }
    #about{
    background-color: bisque;
    }
    #contact{
    background-color: blanchedalmond;
    }

    After completing the entire code of our website, it will look something like this. Note that
    you can add more CSS to make it further good-looking.
    CONCLUSION

    This challenge was a good start to the UX/HTML/CSS Design and Code Challenge series. The
    website wasn’t too complicated, but challenging enough to present some new and interesting
    learning opportunities. Making use of the atomic design approach in future challenges will show
    how well it is to employ in the design and coding parts of future challenges. Refining how it can be
    used will be a key goal for future challenges. Another area for future improvement is become more
    adept at using Flexbox to control layout. Finally, working on organization and naming conventions
    for CSS will be a key area for improvement.

    What I find is that making good designs and writing good code is important, but its also
    important not to dwell on it too much when its not perfect. A good idea is to make a good attempt,
    identify what went well and what can be improved, and move on with that knowledge to the next
    challenge.

    REFERENCES

    1. https://www.browserstack.com/guide/build-a-website-using-html-css

    2. Leung,https://bootcamp.uxdesign.cc/challenge-one-blogging-website-
    124421343041

    3. XML https://www.w3schools.com/howto/howto_css_blog_layout.asp

    4. IBM Developer. (Accessed 2024). XML Zone. https://developer.ibm.com/xml/

    5. W3Schools. (Accessed 2024). XML Tutorial. https://www.w3schools.com/xml/


    Group members:

    Roll No. Student Name Sign

    1 Aher Dipak Vilas

    2 Aher Tejaswini Kailas

    3 Ahire Pranali Anil

    4 Argade Ganesh Sunil

    5 Bagul Ganesh Kashinath

    Date: 16/04/2024
    Class: T.E(Computer) Sem:II Sign of Subject Teacher

    You might also like