Setting Up Your Website Using C# and C9

Size: px

Start display at page:

Download "Setting Up Your Website Using C# and C9"

Morgan Morton
5 years ago
Views:

1 Setting Up Our Work Environments

2 Setting Up Our Work Environments Create and account at GitHub github.com

3 Setting Up Our Work Environments Sign into Cloud9 with your GitHub Account c9.io

4 Setting Up Our Work Environments Hover over Create New Workspace button Select Clone From URL option

5 Setting Up Our Work Environments Type in the Following URL and select HTML

6 Setting Up Our Work Environments Select the Start Editing button

7 Web Design Basics February 28, 2015

8 What We Will Cover Today: HTML5 Markup Basic CSS Layout Creation Basic Web Design and Layouts Typography on the Web

9 Where do we use HTML / CSS? Content Management Systems (CMS) Corporate Websites Web Applications (Such as Online Banking) Blogs & Social Media Online Gaming Digital Advertisements

10 What Makes Up A Website? HTML Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. <body> content </body>

11 What Makes Up A Website? CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. body { color: #000000; background: white; }

12 Difference Between HTML and CSS HTML CSS

13 The Web in 2015

14 The Web in 2015 Don t Design for This Design for This

15 HTML

16 What Makes Up a HTML Document? <html> <head> </head> <body> </body>

17 What Makes Up a HTML Document? <!DOCTYPE html> <html> <head>... </head> <body> content </body> </html>

18 The <head> Tag <head> <title>my Website</title> <link rel="stylesheet" media="screen" href="styles.css"> </head>

19 The <body> Tag <body> <header>... </header> <main class= wrapper > <div class= inner >... </div> </main> <footer>... </footer> </body>

20 Headings & Paragraphs <body>... <h1>heading One</h1> <h2>heading Two</h2> <h3>heading Three</h3> <p>paragraph</p>... </body>

21 The Content ELISE BLANCHARD JOB TITLE About Nam rutrum sollicitudin ipsum a sodales. Nullam vitae quam id lorem sagittis ullamcorper ac et ante. Nam egestas arcu ut ante vulputate hendrerit. Duis id sem convallis, pharetra erat quis, molestie est. Suspendisse accumsan pellentesque lorem, non posuere nibh laoreet eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent tempor felis nunc, ac convallis sem porttitor in. Sed in vehicula enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porttitor diam et lacus posuere sollicitudin. Nulla rhoncus tempor ante, in imperdiet purus iaculis vel. Vivamus eu augue in quam gravida tempus sed quis arcu. Nam sed metus at nisl mattis convallis scelerisque at turpis. Nam et ultrices erat. Experience Job Title Employer, Job Title Employer, Education Degree School, Degree School, Skills Nam rutrum sollicitudin ipsum a sodales. Nullam vitae quam id lorem sagittis ullamcorper ac et ante. Nam egestas arcu ut ante vulputate hendrerit. Duis id sem convallis, pharetra erat quis, molestie est. Suspendisse accumsan pellentesque lorem, non posuere nibh laoreet eget. Pellentesque h Contact for references.

22 ELISE BLANCHARD The Content JOB TITLE About Nam rutrum sollicitudin ipsum a sodales. Nullam vitae quam id lorem sagittis ullamcorper ac et ante. Nam egestas arcu ut ante vulputate hendrerit. Duis id sem convallis, pharetra erat quis, molestie est. Suspendisse accumsan pellentesque lorem, non posuere nibh laoreet eg Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent tempor felis nunc, ac convallis sem porttitor in. Sed in vehicula enim. Cum soc natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porttitor diam et lacus posuere sollicitudin. Nulla rhoncus tempor ante, in imperdiet purus iaculis vel. Vivamus eu augue in quam gravida tempus sed quis arcu. Nam sed metus at nisl mattis con vallis scelerisque at turpis. Nam et ultrices erat. Experience Job Title Employer, Job Title Employer,

23 Headings & Paragraphs <h1>job Title</h1> <h2>section Heading</h2> <p>paragraph</p> <h2>section Heading</h2> <h3>sub Heading </h3> <p>paragraph</p>

24 Anchors (Links) Connect Everything! <a href= # >link</a> <a href= target= _blank title= Learn More >Link</a>

25 Let s write some HTML!

26 Web Fonts are Friends

27 Type Families & Web Fonts Typefaces add personality and professionalism to a website. Only the fonts needed should be loaded into a website. Sans-Serif Serif Monospace Script Handwriting Silly Fonts

28 Choosing a Web Font

29 Fonts & Page Load

30 Fonts & Page Load

31 Implement the Fonts Add the generated code inside the <head>

32 CSS

33 How to write CSS selector { attribute: value; } body { background: white; }

34 How to target HTML with CSS You can directly style tags such as HTML, and body as well as elements like h1 and p..class is used to target elements and can be reused. #id also targets elements, but can not be reused. It is also very important.

35 Using Classes HTML: <main class= wrapper ></main> CSS:.wrapper { width: 100%; }

36 Common Attributes for Containers width width of a box height height of a box margin space around a box padding space inside a box

37 Common Attributes for Content font-size sets the font size line-height an invisible box around each letter. color color of your content background color or image for the background of your container

38 Link States a { color: blue; } a:hover { color: #00f; } a:active { color: #0000ff;} a:focus {color: rgba(0, 0, 255, 1);}

39 Let s write some CSS!

40 Thank You

The package provides not only Roman fonts, but also sans serif fonts and

The package provides not only Roman fonts, but also sans serif fonts and typewriter fonts. Times Roman Condensed (c, n). 0123456789, $20, C30, 60. Naïve Æsop s Œuvres in français were my first reading.