code and design your first website

55
Code & Design Your First Website April 2017 http://bit.ly/first-website-la

Upload: thinkful

Post on 11-Apr-2017

62 views

Category:

Education


5 download

TRANSCRIPT

Code & Design Your First Website

April 2017

http://bit.ly/first-website-la

About us

Thinkful prepares students for web development & data science jobs through 1-on-1 mentorship programs

About me

• Anna Mendoza

• Designer + Developer

• Work in Design + Digital Services as a hybrid

• Co-Founder Curve Design

• Thinkful teacher FEWD + UX + Backend ( full stack! )

Thank you for joining us

HI EVERYBODY!let’s talk about you first

What’s your programming background?

• Is this your first time writing code?

• Been self teaching for 1-3 months?

• Been at this for a couple of years?

• Been at this since you were a kid? ( secret ninja )

Let’s see a show of hands!

What are your Goals?

• Learn how the web works

• Wireframe an Idea

• Learn basics of HTML and CSS

• Come to practice building

• You want to work ( communicate ) better with developers

Feel free to share them at the end of the workshop!

What are your Goals?

Rest assured, wherever you came from, and whatever your trying to do…

We’re here for you tonite! Ask us some burning questions!

Why start by learning “Frontend”?

A LOT OF PEOPLE START HERE BECAUSE:

• Easy to get started

• See if working with code is for you

• Get clear & immediate gratification

• Discover job opportunities: UX / UI DesignerFrontend DeveloperContent Strategist

• Determine if your more interested in the “Backend”

What is “Frontend” development, anyway?

First, let’s understand the term.

We all ‘google’ it, shop, read, watch movies, etc… Every websites we visit is displayed inside a browser window.

That browser is a software application that’s accessing the internet. And it lives on your computer.Both can be called the ‘client’ in this scenario.And they are accessing a service on a ‘server’.

What is “Frontend” development, anyway?

Frontend web development is the practice of developing the HTML, CSS and JS that people see and interact with directly. That’s why its also known as “client-side development.”

clientclient

client

Clients-Server Model

ClientFrontend Developer Develops what we see

ServerBackend Developer

Often develops what we do not see

How the web works

When you go to a website, you’re loading an address.That address is a reference, a ‘URL’. And its pointing to a resource on the internet. URL stand for uniform resource locater.

That address will load a ‘home page’ in your browser. The browser is rendering the DOM - the document object model-that is formed from the HTML & CSS files sent from the server. These elements make up the page layout.

When you’re navigating through the website, clicking through links, you’re essentially rendering the DOM. Front-end developers are responsible for this basic interaction model. It’s part engineering, part user-interface (UI) and UX.

How the web works

Type a URL from a client (e.g. www.washingtonpost.com)

Browser communicates with DNS server to find IP address

Browser sends an HTTP request asking for specific files that make up the DOM

Browser receives those files and renders the DOM elements into layouts that make up a website

How the web works

Request

Response

Client - UI Logic Server - Business Logic

Database Servers

What we see and what’s really going on

Everything today is dynamic.

Most websites today are essentially architected as templates, that are rendering content dynamically.

These templates are constructed by both client side languages ( html, css, js ) and server side languages.

If we go to www.washingtonpost.com today, its guaranteed the content will change tomorrow. And of course a week from now, it will be totally different.But what hasn’t changed is the layout.

How that relates to what we’re doing today

HTML & CSS files are sent by the server that form the DOM structure that make up the layout. Today, we’ll be writing these files.

Tonight’s project

Design & build an “about me” webpage — your personal homepage on the internet

Tonight’s project: AGENDA

1. Wireframe / Sketch our page ( 25 min. ) • Determine content • Broadly sketch out sections

2. Write the HTML structure for the page ( 1 hr ) • Discover the elements, tags and attributes of HTML

3. Style the HTML page with CSS ( .35 min ) • Experiment with different CSS selectors

4. Get inspired

Wireframing your page

Sample wireframe

A wireframe consists of:

• Skinny drawings • Sections of a Page • Dummy or filler text

represented as lines • A Navbar - for all pages • X-BOXES generally

represents images / illust.

Sample wireframe: Sitemap

Sitemaps are then created to showcase all the pages of a website, organized with a hierarchy. Today, we’re building 1 of those pages.

Wireframe exercise for “About Me”

What is the purpose of a wireframe?

• Lo-fi sketches are meant to get ideas down and get a rough concept… fast.

• Saves time and money before development

• It focus’s your attention on the structure and content of a page without the distraction of design elements,like the ‘right’ picture or font.

• Quickly iterate and test out layouts. Testing a message, or we are testing our logic.

Wireframe exercise for “About Me”

Everybody, include the following in your wireframe

• List out the topics you want to include• Name, copy, images, illustrations, contact info

• Divide each topic into a section• Organize your content into boxes.

• Layout the page (start at top and work down)• Try emphasizing content by size

• Keep it simple — use these resources for “inspiration”:• blog.mockupbuilder.com/10-fresh-beautiful-examples-of-website-wireframes/ • www.dcrazed.com/website-wireframe-examples • https://speckyboy.com/free-wireframe-templates-mobile-app-web-ux-design/

Let’s start with HTML

You should have a basic Wireframe of your site, and now we’re going to build it with HTML. HTML is a language. Hypertext Markup Language, that tags the raw content and determines the structure of a webpage. It's the skeleton of your website.

What does it look like?

!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSSDemo</title> <style></style> </head> <body> <div class="container"> <h1>My background color is black</h1> <div class="el el-1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil. </div> <div class="el el-2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil. </div> <div class="el el-3"> I also have a background image set but the URL is invalid so the background color shows. </div> <p> The following has a background image with lots of transparent areas. </p> <div class="el-4"></div> </div> </body></html>

let’s look here!

We’ll polish the elements later

We will start with just HTML — then add a Cascading Style Sheet (CSS) file to “style” your website.

Getting Started with Codepen

• Normally developers use a text editor

• Codepen lets us write HTML/CSS and see the results instantly

• Create an account: codepen.io/signup/free

• Skip profile info => Go to create a new “Pen”

• “Fork” this code: http://codepen.io/anna_curve/pen/mWopeP

First lines of HTML

<html> <head></head>

<body>

<h1>About me</h1>

</body>

</html>

html is the root element of the document tree and everything that follows is a descendant of that root element

head element contains metadata—information that describes the document, and lists itwith resources such as css style sheets.

body element contains everything that you can see in the browser window is contained here

This is a typical HTML Element,made up of the h1 tags, and wrapped content

Key HTML concepts

Hyper Text Markup Language is made of the following concepts and syntax. Just like any other language it has rules and structure.

• Elements• Tags• Attributes

HTML elements

HTML elements usually consist of an opening tag, closing tag, and some content. Notice all the nesting going on.

<html> #html element starts here

<body> #body element starts here

<h1>About Me</h1> #this is an HTML element

</body> #body element ends here

</html> #html element ends here

More about elements

Some consist of just a self-closing tag, which means theydon’t have a closing tag.

<img src=“http://i.imgur.com/Th5404r.jpg">

HTML tags

All tags compose elements. We are essentially ‘tagging’ the content, so that the browser knows how to render the elements. Every tag starts with a “less than” sign & ends with a “greater than” sign.

<html> #this is an HTML opening tag

<body> #this is a body opening tag

<div> #this is div opening tag <h1>About me</h1> #this is set of H1 tags

</div> #this is div closing tag

</body> #this is a body closing tag

</html> #this is an HTML closing tag

More about tags

• Tags instruct a browser about the structure of our website, and how to render the page ( DOM ). See it in action!

• Semantic elements clearly describe its meaning to both browser and the developer. It’s a language after all, used by machine and humans.

• There are hundreds of built-in tags though you’ll use the same few a lot. ( Built-in means, they are provided as part of the fundamental syntax of the language. )

A note about <div>’s

<div> stands for DIVISION of a page, and are one of the earliestsyntaxes that describe how a page is divided up. We use <div> tags to separate sections of our site.With the advent of HTML5, <div> is now less used, because itsnot as semantically meaningful as say: <article>, <section>,<form> or <footer>. But its still quite heavily used.

<div>

<h1>Hello world!</h1>

</div>

Non-exhaustive list of HTML tags

• <html> #html tags wrap your entire page

• <head> #head tags holds info about the page

• <body> #body tags wrap around your content

• <h1> #signifies the largest headline (through h6)

• <p> #wraps a paragraph of writing

• <div> #div tags are generic container tags

• <a> #anchor tags for text to be a link

• <ul><li> #unordered list of items

• <button> #this is a button

HTML attributes

HTML attributes set properties on an element — the are attached in the opening tag. They are made of name / value, pairs.

<a href=“https://somewhere.com">This is a link</a>href is an attribute that sets the destination of a link

<h1 class=“headline”>This is a headline</h1>class is one attribute that identifies element (for CSS & Javascript)

<h1 id=“headline”>This is a headline</h1>id is another attribute that identifies element (for CSS & Javascript)

“About Me” website — HTML

FORK IT, If you haven’t done so…codepen.io/anna_curve/pen/mWopeP

• Drill — Add another section of your choosing

• Drill — Add a title and a paragraph in that section

• Drill — Try and add an image underneath “About Me”Resources:

• https://www.w3schools.com/html/html_basic.asp

What is CSS?

Cascading Style Sheets (CSS) interact with your HTML to determine the visual presentation of your webpages. They are basically attributes of tags.

CSS example

p.red { color: red; font-size: 36px; } In html: <p class=“red”>hey I’m red!</p>

selector is selecting the p tag in the document

properties or keys are constants

values are what can change

p tag is also a selector.

attribute ‘class’ is being assigned to ‘red’

class .red’ is defining the p selector

CSS solves two problems

1. It updates the visual presentation of each element.

2. Creates the structure which defines the layout of all elements that basically designs the page.

The browser reads a css file from the TOP down and ‘cascades’ down the css file. Hence the name: Cascading Style Sheet.

Key CSS concepts

• Selectors

• Declaration / Declaration Block

• Property

• Value

CSS selectors

• Selectors are what allows you to target specific HTML elements and apply style to them

• They include tag selectors, class selectors, id selectors and attribute selectors and much more!

• Selectors can be combined or ‘daisy-chained’ in HTML with singe spaces, and in CSS with dot notation

Example of selectors

p ( selects all paragraph tags )<p>I’m a paragraph</p>

.name ( selects HTML elements with class attribute: “name” )<h1 class=“name”> I’m a headline</h1>

#intro (selects HTML elements with id attribute: “intro”)<p id=“name”> I’m a paragraph</p>

p.name (selects paragraph tags with class attribute: “name”)<p class=“name”> I’m a paragraph</p>

Declarations and declaration blocks

This is a declaration block containing two declarations

p {

color: red;

font-size: 36px;

}

CSS properties

Constants that determine which aspect of an element’s appearance we wish to target:

• color: (set the font color)

• font-family: (sets main typeface and backup typefaces)

• background-image: (sets background image)

• height: (sets the height of an element)

p {color: red;

font-family: Helvetica, sans-serif;

background-image: url(“/imgages/puppy.png”);

height: 400px;}

More on CSS properties

• Each property has a default value — when you write CSS, you override that default with a new value

• There are lots of CSS properties! For a full list see http://www.htmldog.com/references/css/properties/

• And my favorite: code drops CSS reference: https://tympanus.net/codrops/css_reference/

CSS values

Determine the aspect of the element’s appearance we wish to change

• color: red, blue, green, #CCCCCC; acceptable values for the color property

• font-family: helvetica, arial, sans-serif; acceptable values for the font-family property

• background-image: url(“imageFile.jpg”);points to a URL value that will access and load an image

• height: 40px, 50%; set in pixels or percentage of container height

CSS challenge

• Pick a typeface, color, and size for the words

• Add a “More About Me” section and put a border around it

• Add background colors to each section to separate them

From Codepen to reality

• Download Sublime Text (or another text editor)

• Create a new folder (“First Website”)

• Create a new HTML file in First Website folder (index.html)

• Copy & paste your Codepen HTML into this file

• Create a new css file in First Website folder (index.css)

• Copy & paste your Codepen CSS into this file

• Add link to your CSS in your HTML <head> section

• Save both files

• Double-click & open your index.html file

More about Thinkful

We train developers and data scientists through 1-on-1 mentorship and career prep

Our Program

You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor

Our Mentors

Mentors have, on average, 10+ years of experience

Our Results

Job Titles after GraduationMonths until Employed

Try us out!

Try the program for two weeks, includes six mentor sessions - $50

Learn HTML/CSS/JavaScript

Option to continue onto web development bootcamp

Come talk to me if you’re interested (or email me at [email protected])

October 2015

Questions? email me at [email protected]