🌐 Public

Deeper than DOM

By Eric Kidd

Introduction

This flow is for anyone who wants to, or does, understand developing for client side.

Eric Kidd — Web designer/developer with a passion for learning and growing.

Added by Eric Kidd: “So your CSS is nice and object-y. What if those objects need to move? How do you allow for the rich interactions of the web whilst maintaining maintainability?

1 Scalable and Modular Architecture for CSS

You've got a Photoshop document open in front of you and you have been told to turn it into the magic that is HTML and CSS (with maybe a little JavaScript thrown in for good measure). It may seem straightforward to start mapping things directly from the composition to the code. However, various components on your page are likely to

Added by Eric Kidd: “Pop quiz! No pressure, though, use this quiz to know if this flow is right for you. If you scored less than the average, this flow might be useful to you. Score over 80%? You're too good! Go find something more challenging than this, or brush up on the fundamentals.

2 Front End Web Development Quiz

2 people completed this quiz and the average score was: 50% Start "By David ShariffHTML: <ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>CSS: ul { color: red;}li { color: blue;}What is the color of the text Sausage ? HTML: <ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>CSS: ul li { color: red;}#must-buy { color: blue;}What is the color of the

Added by Eric Kidd: “CSS is powerful! WIth that power, in the esteemed words of Spidey, comes great responsibility. Learn to harness the power of CSS specificity and you'll take your first step towards code that is both powerful and maintainable.

3 Specificity

Specificity is a mechanism within the CSS cascade that aids conflict resolution. The concept of specificity states that when two or more declarations that apply to the same element, and set the same property, have the same importance and origin, the declaration with the most specific selector will take precedence. Consider this example: p { color: black; background-color: white; }

Added by Eric Kidd: “Learn to separate content styles from container styles. This separation will force you to architect your styles in a more maintainable and extensible way.

4 An Introduction To Object Oriented CSS (OOCSS)

Have you ever heard the phrase "Content is King"? Being a Web developer, and therefore having a job that's often linked to content creation, it's likely you have. It's a fairly overused but true statement about what draws visitors to a site. From a Web developer's perspective, however, some may argue that speed is king. More and more, I'm starting

Added by Eric Kidd: “This is your starting point. This quiz is not 'easy', unless you're a front-end genius or a cheater. Possibly both. If you get 100% on this quiz, this isn't the place for you. If you get less than 20%, it probably isn't either. Did you score above a 90%? Awesome! Keep rockin'. Score under 20%? That's okay! Keep working and come back when you're ready to dive in!

5 Front End Web Development Quiz By David Shariff

2 people completed this quiz and the average score was: 50% Start "By David ShariffHTML: <ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>CSS: ul { color: red;}li { color: blue;}What is the color of the text Sausage ? HTML: <ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>CSS: ul li { color: red;}#must-buy { color: blue;}What is the color of the

glomikuz

Freshman

  • 0 Playlists
  • 0 Followers

abdallah alshaer

big ambition and crazy dream

  • 0 Playlists
  • 0 Followers

Ahmad Seder

Freshman

  • 0 Playlists
  • 0 Followers

Caroline Artz

Full Stack Web Developer & Designer. @DevBootcamp Chicago. Startup. Creator.

  • 0 Playlists
  • 0 Followers

bibhudash

Freshman

  • 0 Playlists
  • 0 Followers

AIMartin

Freshman

  • 0 Playlists
  • 0 Followers

Igor Jovanovic

Freshman

  • 0 Playlists
  • 0 Followers

David Guerra

Freshman

  • 0 Playlists
  • 0 Followers

David Flagello

Freshman

  • 0 Playlists
  • 0 Followers

Alden Leong Qi Wen

Freshman

  • 0 Playlists
  • 0 Followers

Michalis Valou

Freshman

  • 0 Playlists
  • 0 Followers

mike.a

Freshman

  • 0 Playlists
  • 0 Followers

Alienpruts

Freshman

  • 0 Playlists
  • 0 Followers

Julian Hristov

Freshman

  • 0 Playlists
  • 0 Followers

Aivis Lisovskis

Freshman

  • 0 Playlists
  • 0 Followers

Sai Abishek

Freshman

  • 0 Playlists
  • 0 Followers

chernosliv

Freshman

  • 0 Playlists
  • 0 Followers

Michal Takáč

Freshman

  • 0 Playlists
  • 0 Followers

anderz

Freshman

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?