Code & Design Your First Website (4-26).pdf

Code & Design Your First Website (4-26).pdf -...

Info icon This preview shows pages 1–21. Sign up to view the full content.

bit.ly/first-website-dc network: GWconnect
Image of page 1

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

April 2017 Code & Design Your First Website
Image of page 2
Me TJ Stalcup Lead DC Mentor @ Thinkful API Evangelist @ WealthEngine Github: tjstalcup Twitter: @tjstalcup
Image of page 3

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

About us Thinkful prepares students for web development & data science jobs through 1-on-1 mentorship programs
Image of page 4
What’s your goal? Do you want to work better with developers? Do you want to start working in tech? Do you have an idea that you want to build?
Image of page 5

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

What’s your programming background? First lines of code will be written tonight? Been self teaching for 1-3 months? Been at this for 3+ months
Image of page 6
Goals How the web works Wireframe exercise Basics of HTML and CSS Lots of practice building Next steps in your learning
Image of page 7

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

How the web works Type a URL from a client (e.g. google.com) Browser communicates with DNS server to find IP address Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website
Image of page 8
Clients / Servers Client Frontend Developer Server Backend Developer
Image of page 9

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

Programming fundamentals Request Response Client - UI Logic Server - Business Logic Database Servers
Image of page 10
Example: facebook.com HTML, CSS, & Javascript render interactive newsfeed Algorithm determines what’s in your feed Request Get data about your friends’s and their posts Open browser and navigate to facebook.com Business Logic Database Servers Response
Image of page 11

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

How that relates to what we’re doing today HTML & CSS are the files that are stored on a server, sent to the client, and then rendered by your browser. Today, we’ll be writing these files.
Image of page 12
Why start by learning “Frontend”? Easy to get started and see if coding is for you Get clear & immediate gratification Job opportunities
Image of page 13

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

Tonight’s project Design & build an “about me” webpage — your personal homepage on the internet
Image of page 14
Wireframing your page
Image of page 15

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

Wireframe exercise for “About Me” List out the topics you want to include Divide each topic into a section Layout the page (start at top and work down) Keep it simple — use Google for “inspiration”
Image of page 16
Sample wireframe
Image of page 17

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

Let’s start with HTML HTML is the content and structure of a webpage It’s the skeleton of your website
Image of page 18
By itself, HTML is ugly
Image of page 19

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

We’ll make it pretty later We will start with just HTML — we’ll then add a Cascading Style Sheet (CSS) file to “style” our website. More on that later…
Image of page 20
Image of page 21
This is the end of the preview. Sign up to access the rest of the document.
  • Winter '17
  • Tom Alone
  • css, Ode, Cascading Style Sheets, developer, HTML element

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern