Web Design Essentials 1

Class 6

AGENDA

  • Recap
  • CSS "Tips & Tricks"
  • Code Review & Project Feedback
  • Cultivating a Web Dev Practice
  • Cohort Feedback

Stretch - "Bio" Break

8:00p EST / 7:00p CST / 5:00p PST

Recap

Topics Covered

  • HTML Elements & CSS Properties
  • Semantic HTML & CSS
  • Accessibility
  • CSS Box Model
  • Working with Images
  • Media Queries

Topics Covered

  • Project Planning
    • Wireframing
    • Pseudo-coding
  • Using Documentation
  • Working in Dev Tools

CSS Tips & Tricks

Hiding Things


h2 {
  display: none;
}
/* Removes the element and its space from the page */


h3 {
  visibility: hidden;
}
/* Hides the element, and retains its original space */

Centering Things

To center horizontally and vertically:
Make sure the element to be centered is in a parent container


  
Center Me

Centering Things

Apply the CSS:
To center horizontally and vertically


.container {
  /* Give the parent container width, height 
  and the position properties */
  width: 200px;
  height: 200px;
  position: relative;
}

.content {
  /* Apply these rules to the content to be centered */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Centering Things

Apply the CSS:
To center horizontally alone


.container {
  /* Parent container can have a specific width 
  or be full width. */
  width: 800px;
  height: 200px;
}

.content {
  /* The content to be centered must have a 
  width that's less than its parent container. */
  width: 300px;

  /* This CSS rule creates the centering effect */
  margin: 0 auto;
}

Smooth Scrolling

/* Apply to the html element selector 
at the top of your CSS stylesheet. */

html {
  scroll-behavior: smooth;

  scroll-padding: 50px; /* Optional */
  /* Adds spacing above the sections we're scrolling to */
}

Code Review

Project Feedback

Cultivating a Web
Development Practice

  • Progressive Practice aka "Start Small"
    • How can I use what I currently know?
    • What do I want to do and what is my (current) knowledge gap?
    • Where can I find answers?
  • Deliberate Practice

Cultivating a Web
Development Practice

  • Create checklists!
    • Accessibility basics
    • Visual Design principles
    • Project setup
  • Start a collection of frequently-used code snippets

Cultivating a Web
Development Practice

  • 80-20 Rule:
    • Spend time pre-planning a project
    • Organize your markup/code (indentations, etc)
  • Read documentation
    • "Real" developers look things up!
  • Review other developers' code
  • Be comfortable asking questions
  • Use Dev Tools--a lot!

Cultivating a Web
Development Practice

Graph of coding learning curve

Source: Why Learning to Code is So Damn Hard (Thinkful.com)

Cultivating a Web
Development Practice

  • Be prepared for the "dips"
    • It's okay not knowing everything
  • Take breaks!
  • Welcome "happy coincidences"
  • Acknowledge your growth!

Resources

  • MDN - Mozilla Developer Network
  • W3Schools
  • CSS-Tricks
  • Free Code Camp
  • And more!

See Resources List

Final Feedback

https://forms.gle/4aj2kfTfKTFjevUE6

Q&A

Upcoming GDI Courses

Web Design Essentials 2

JavaScript Fundamentals 1

Intro to Git & Github Workshop

UI Projects Cohort

Keep in Touch!

Connect with me on Linkedin

GDI Logo

Thank You!