Code - Cheat Sheet

Showing posts with label webdesign. Show all posts
Showing posts with label webdesign. Show all posts

Wednesday, April 29, 2020

04/29/2020 - "Inspect" Exploration



CODE that we learned;


www.tarotgoddess.com

    .content-left {
    padding: 1px 30px 1px 0px;

    • this correlates with the paragraph section in the left-hand side.
    • 389x342.8000 are the dimensions of the div.
    • padding is space between image or cell cotnents and it's outside border*

    30 px is the padding that has been applied to this paragraph div, providing space between the ad and the paragraph

    * .content-left {
        padding: 1px 30px 1px 0px;

      .homecontent {
            float: left;
            max-width: 389px;
            margin: 0px auto 0px auto;
        }


        body, div, table {
            color: #000000;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 15px;
            font-weight: normal;
            line-height: 150%;
            text-align: left;
        }

        Monday, January 13, 2020

        CSS: Cascading Style Sheets

        CSS - Cascading Style Sheets

        Pages that give style to HTML

        CSS - Definition

        CSS - Cascading Style Sheets. Adding style to web documents. i.e. color, design, typefaces, object placement, accessibility, transitions, etc.


        Wednesday, January 1, 2020

        CSS - Linking to HTML

        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"

        -name of css file
        -rel, type, and media

        Practice - 01/01/2019

        ul
        <li><a href="home">Home</a></li>

        ul
        <li><a href="Contact"><Contact</a></li>


        <section>


        </section>

        ul
        <a href="About">


        ul>li*7<a





        Create a list of social media icons

        ul
        li<a href="http://www.facebook.com/">img src= " "</a>
        li<a href"http:www.twitter.com/"> img src= " "</a>
        li<a href="http:www.linkedin.com/"> img src= " " </a>
        li< a href="http:www.instagram.com/"> img src- " " </a>

        Website Layout

        <!doctype html>

        <html>

        <head>

        </head>

        <body>

        </body>

        </html>

        Website Design Process




        Sketch Out Site Layout. Gather resources (text, images, tables, etc.)
        Setup Site in Dreamweaver
        Create Pagae Structure html
        Add Sample Content to Structure
        Create Page Presentation CSS - Fromatting and Positioning
        Repeat steps 3-5 for additional page designs
        Create templates and pages to your site
        Add actual content to page
        Publish final site

        CSS - Terms

        https://www.cram.com/flashcards/coding-sites-11154992


        #header {}
        body in header

        ex: background-blue: #EEEE

        #container { }

        background - color

        text-align: center

        color: white

        center
        margin-left: auto
        margin-right: auto


        #content - content header

        #nav div - divs always appear on a new line

        Web Page - Building (analogy0



        4 Different aspects to each web page

        -Structure - HTML
        -Presentation - CSS
        -Content - Text/Images
        -Action - Javascript/PHP

        Tuesday, December 17, 2019

        Terms

        HTML - structure and content to a web page
        CSS - provide style to the web page

        Panels

        Panels are the items at the right side of the Photoshop window that can display layer information and text options SOURCE: https://www...