{"id":283753,"date":"2019-03-08T08:20:16","date_gmt":"2019-03-08T15:20:16","guid":{"rendered":"http:\/\/css-tricks.com\/?p=283753"},"modified":"2019-03-10T19:22:33","modified_gmt":"2019-03-11T02:22:33","slug":"hmtl-css-and-js-in-an-add-ocd-bi-polar-dyslexic-and-autistic-world","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/hmtl-css-and-js-in-an-add-ocd-bi-polar-dyslexic-and-autistic-world\/","title":{"rendered":"HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World"},"content":{"rendered":"

Hey CSS-Tricksters! A lot of folks tweeted, emailed, commented and even courier pigeoned (OK, maybe not that) stories about their personal journeys learning web development after we published “The Great Divide”<\/a> essay. One of those stories was from Tim Smith and, it was so interesting, that we invited him to share it with the broader community. So, please help us welcome him as he elaborates on his unique personal experience and how it feels to be in his shoes as a front-ender.<\/p>\n

<\/p>\n

Hi folks, my name is Tim Smith<\/h3>\n

I have ADD<\/abbr>, OCD<\/abbr>, Bi-Polar<\/a>, Dyslexia\u2026 and not to mention that I am on the Autism spectrum<\/a>. This combination (apart from causing me to feel a lot of personal shame) makes coding very hard \u2014 especially learning how to code, which I am trying to do. Things get mixed up in my head and appear backwards to the point that I find it nearly impossible to focus any longer than 15-20 minutes at a time. Perhaps I will expand on this in another post. Even now as I write this, I feel pulled to rate each song on YouTube Music and attempt to correct every mistake I make. And since I keep switching \u201cwrite” with \u201cright,” this becomes infuriating and discouraging, to say the least.<\/p>\n

I do not read well, so learning from books is the least effective way for me to learn (sorry O\u2019Reilly<\/a>). Online tutorials are OK, but I tend to sell myself short by being lazy with copy and paste for the code examples. If I force myself to hand-type the examples, I get the benefit of muscle memory but drown in the words of the tutorial and eventually lose interest altogether.<\/p>\n

Video tutorials are my ideal learning method. There\u2019s no reading involved and no way for me to copy and paste my way out of things. Having to stop and start the videos in order to type the code is maddening, but well worth it. YouTube is a great place for video tutorials if you have the patience to wade through them\u2026 which I don\u2019t.<\/p>\n

I found Chris Coyier in the early 2000s. The treasure trove of articles, guides, and videos contained here on CSS-Tricks has been a major benefit for me and actually progressed my ability to learn code. Later, I found Wes Bos. He, too, has been a leading contributor to my web learning. Wes unlocked many of the things I struggled with, namely React and the new features of ES6.<\/p>\n

Together, I\u2019d say Chris and Wes are responsible for at least 80% of my collective front-end knowledge. (Personal aside: Chris and Wes, you two are my heroes and secret mentors.) Both Chris and Wes have a way of giving me the information that’s relevant to what I’m learning in a way that is fun and entertaining as well as straightforward and precise. They don\u2019t just present the code; they explain the why and history behind each topic. Wes is a little better at this, but the sheer number of videos Chris has created has kept me busy for years and will continue to into the future.<\/p>\n

Simply writing code is another effective way for me to learn. I like to geek-out and setup development servers for various web languages and libraries and play around. I have learned a lot about MacOS and Linux (mostly Ubuntu) while also learning the basics of many web languages and libraries: PHP (for WordPress themes), Python, React, Vue and many others. I learned to embrace the command line and avoid GUIs<\/abbr> when possible. Nothing against GUIs<\/abbr>; I simply find the command line more precise (and just between you and me, way cooler to brag about to non-coders).<\/p>\n

I still do use the command line \u2014 or at least I would if I still had a laptop or desktop to work on. I am actually writing this on an iPad Mini 2. However, I have found another great way to write and share code without the need to set up servers and complicated environments: CodePen<\/a>. I joined an early beta way back when and it was love at first sight. I can now write code, share it and get feedback all in one place (here\u2019s my profile<\/a>). Every time I get a fun idea or find a fun kata, I fire up Codepen and just start coding. No tricky dev setup. There are other apps that do this but CodePen is unique because of the social aspect and the ability to easily embed code samples on forums.<\/p>\n

So, that\u2019s a little about me. What I want to get into is how I learn HTML and CSS because it\u2019s probably somewhat similar to yours, but different than how you might have gone about it.<\/p>\n

Breaking into HTML<\/h3>\n
\"A<\/figure>\n

I learned HTML in a few different ways. At first, I would look at the source code of popular web sites. In the early nineties, when I started to learn HTML many, if not most, web browsers had the ability to show the source code of a website. I saw all of the tags, how they were used and the basic structure of the sites. I was able to reverse-engineer them. I had not learned CSS at the time, so my first websites were single column and very boring.<\/p>\n

Quick aside: Without CSS, all websites are perfectly responsive and look great on any device or screen size. We break them with CSS, then need to fix them… ponder that a bit.<\/p>\n

Thanks to source code, I began reading articles on the web and studied constantly. I found the DreamInCode forum<\/a> which serves as a forum for all code disciplines and languages \u2014 similar to StackOverflow<\/a> because, like StackOverflow, the people were arrogant and rude to newbies, at least in my experience. Still, I was able to see how people approached various HTML concepts and problems and this was the springboard upon which I launched my learning adventure. I received blunt, often harsh feedback on my code examples. As hard as it is to hear hard criticism, it benefitted me as it taught me the right and \u2014 even more importantly, the wrong \u2014 way to approach and write HTML.<\/p>\n

Like most things, writing and mastering HTML is all about trial and error. I had to create hundreds of horrible websites (if you could call them that) before it \u201cclicked” for me. But that\u2019s better than nothing, as we\u2019ve all heard it said before:<\/p>\n

Just build websites!<\/a>
\n\u2014 Chris Coyier<\/i><\/p><\/blockquote>\n

It was not long after that I was introduced to CSS, and then the real journey began…<\/p>\n

Along came CSS<\/h3>\n
\"Tree<\/figure>\n

The easiest way for me to describe CSS is this: It\u2019s the code that makes your HTML look nice.” I had to adopt a KISS<\/abbr> attitude as I learned CSS because I found that I was overthinking it. CSS is simple if you let it be. Let\u2019s have a look:<\/p>\n

\nSee the Pen
\nThing<\/a> by Tim Smith (@WebRuin<\/a>)
\non CodePen<\/a>.<\/span>\n<\/p>\n

This is about as simple as CSS is. Name your block in HTML (e.g. <div class=\"Tim\">...<\/div><\/code>), then target that name in a CSS file with properties to describe the block, like colors, borders, font treatments among much, much more.<\/p>\n

At first, I would spend all my time trying to memorize as many CSS properties<\/a> as I could. I would \u201cAlta Vista” (remember that?!) around for what sort of things others were doing with CSS and how they were doing it. This was fun and informative but only served to confuse me to no end. Trying to reverse-engineer CSS as I did with HTML only got me so far. My memory for stuff like this is poor, at best. I had to step back, take a deep breath (literally and figuratively) and find a new approach.<\/p>\n

My thought process typically goes something like this:<\/p>\n

    \n
  1. Do I want the words to be black? If so, do nothing<\/li>\n
  2. What about the background color? The default white is boring so… give it a background color.<\/li>\n
  3. How big do I want the element to be? Don\u2019t overthink this as far as measurement units go, because pixels are fine and, well, height and width seem pretty logical to me.<\/li>\n<\/ol>\n

    And so on. Simple questions with simple property names. My point is you can do some amazing things with simple CSS. It was that simplicity that made me want to learn and apply everything I found. But, at the same time, I was so overwhelmed that I almost quit web development for good. It\u2019s an awkward conflict: the simplicity and elegance are welcoming and fun but the myriad possibilities are dizzying and impossible to retain.<\/p>\n

    What worked for me was taking an incremental approach to learn CSS. By starting small and slowly adding more as I truly learned and understood the properties. I found I could have fun and be creative at a comfortable pace without putting too much pressure on myself.<\/p>\n

    I won\u2019t lie. I am not a designer. Given a blank canvas, I will freeze or come up with a mediocre design that\u2019s derivative of a mish-mash of other designs I like. That said, I am great at coding a design that someone with actual design skills can put together (like this<\/a>).<\/p>\n

    I fell in love with CSS for one reason: it is the perfect balance of logic and design. A lot of coding is like this. Code can be beautiful, but CSS is the bee\u2019s knees for me!<\/p>\n

    JavaScript is hard! But I\u2019m trying.<\/h3>\n
    \"Full<\/figure>\n

    HTML and CSS came relatively easily to me. I stumbled a bit on CSS Grid and some of the more advanced stuff, but it just clicked for me<\/a>. As I alluded to earlier, I am a visual learner. Both HTML and CSS are inherently visual languages, and they give me the instant gratification my ADD<\/abbr> needs. Both are straightforward and commonsensical to me.<\/p>\n

    In contrast, Javascript is something I find to be very, very difficult. It is a logic-based language which would ordinarily be my cup of tea; nevertheless, I have found it challenging to \u201cclick” with. Despite a few epiphanies while learning it, JavaScript seems to elude me beyond the basics. I have completed Wes Bos\u2019 JavaScript30 course<\/a> along with many other tutorials. They make sense in the moment it\u2019s being explained to me, but even still, when presented with a \u201cblank canvas” so to speak, I forget most of the concepts and either write the same ol\u2019 stuff over and over or simply give up.<\/p>\n

    Surprisingly, React came much more naturally to me. I think it has to do with its modularity and my love for blocks, LEGOs, and puzzles. I have learned it well enough that I have been able to be creative with it and have started writing an app with it: a crowd-sourced urban bathroom locator<\/a>. I have written and rewritten the start of the app with various Flux libraries and backend data libraries. I invariably give up only to start again, like the famous definition of insanity. I just keep thinking I will figure it out and\/or find someone to do the hard parts for me.<\/p>\n

    My roadblock with React is JavaScript, of course. That may not make sense, but remember my stance on blocks. I know React is JavaScript. To me, though, it is quite different than vanilla JavaScript. Closures, pure functions, arrow functions, let<\/code> vs. const<\/code> vs. var<\/code>, the enormous set of built-in methods, not to mention imported libraries, classes, and of course, my nemesis, Big O<\/a> (how I loath Big-O)… my head is spinning even as I write this.<\/p>\n

    I want so badly to be, at the very least, decent at Javascript so I keep trying. Hundreds of tutorials, code schools like freeCodeCamp.org<\/a>, Treehouse<\/a>, Khan Academy<\/a>, and yes, even muscling through many books (I love JavaScript: The Good Parts<\/i><\/a>).<\/p>\n

    I have no trouble learning the syntax. The hangup, I think, lays in a lack of computer science knowledge and this inability to think mathematically. Algorithms make sense in concept, but their practical application simply blows my mind.<\/p>\n

    For mental health reasons, it was necessary for me to step away from my web development career in 2005. I was able to get back into it around 2010 when I worked for a few startups, but I never truly got back in. Javascript is my Achilles heel. I was lucky to find a few jobs that were truly light on JavaScript so I could focus on HTML and CSS \u2014 the things I thought added up to front-end development \u2014 but inevitably, I was expected to write JavaScript beyond basic interface enhancements and the jobs fell apart. So I either quit or was fired.<\/p>\n

    The ongoing search for work<\/h3>\n
    \"Animated<\/figure>\n

    Looking for work in recent times has been a nightmare! We now live in a world dominated by JavaScript and it seems no one wants a front-end developer whose strengths lie in HTML, CSS with an intermediate knowledge of Javascript \u2014 especially those without a degree in Computer Science. I can\u2019t even find a job posting for this on any major job site.<\/p>\n

    I have had the honor of interviewing with recruiters at Facebook, Google, and Apple but I could not get past the first round of phone screening. I was asked questions that I felt have little-to-nothing to do with what I understand front-end development to be. There were no questions about CSS best practices and even nothing about semantic HTML or the proper use of ARIA attributes. All they seemed to care about was Big O and efficient loops. Even interviews with smaller companies were like this. Have services like Wix and the like taken all the core front-end jobs away?<\/p>\n

    Despite all the challenges I have faced, I feel I have mastered HTML and CSS and have a baseline grasp on JavaScript. I am very proud of that. While I dream of getting a job at a large company like Facebook, Google, or Apple, I really just hope to find a role where my HTML and CSS skills will shine and I can gain real-world experience with JavaScript as a junior developer with the benefit of mentoring somewhere, like the San Francisco Bay Area where I currently live.<\/p>\n

    We all have different learning styles and paces, so don’t give up before you have tried every possible way to learn what you are trying to do. And, if you come up with a new way, please share so we can all broaden our individual and collective knowledge.<\/p>\n

    I hope this article has reached at least one other developer like me! Thank you to all my predecessors. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Hey CSS-Tricksters! A lot of folks tweeted, emailed, commented and even courier pigeoned (OK, maybe not that) stories about their personal journeys learning web development after we published “The Great Divide” essay. One of those stories was from Tim Smith and, it was so interesting, that we invited him to share it with the broader […]<\/p>\n","protected":false},"author":36959,"featured_media":284065,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Hey! A fellow named Tim Smith reached out with his story learning to code -- we asked if he'd share and he did just that in a post.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[870],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tree-colors-scaled.jpg?fit=2560%2C1280&ssl=1","jetpack-related-posts":[{"id":331135,"url":"https:\/\/css-tricks.com\/what-makes-css-hard-to-master\/","url_meta":{"origin":283753,"position":0},"title":"What Makes CSS Hard To Master","date":"December 18, 2020","format":false,"excerpt":"Tim Severien: I feel we, the community, have to acknowledge that CSS is easy to get started with and hard to master. Let\u2019s reflect on the language and find out what makes it hard. Tim's reasons CSS is hard (in my own words): You can look at a matching Ruleset,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/css-block-html.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304238,"url":"https:\/\/css-tricks.com\/why-is-css-frustrating\/","url_meta":{"origin":283753,"position":1},"title":"Why is CSS Frustrating?","date":"February 27, 2020","format":false,"excerpt":"Here\u2019s a great thread by Kevin Powell that's making the rounds. He believes so many folks see CSS as a frustrating and annoying language: https:\/\/twitter.com\/KevinJPowell\/status\/1231979376830484481 Why do people respect JavaScript or other languages enough to learn them inside-out, and yet constantly dunk on CSS? Well, all this reminds me of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/css-mind-blown.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330337,"url":"https:\/\/css-tricks.com\/very-extremely-practical-css-art\/","url_meta":{"origin":283753,"position":2},"title":"Very Extremely Practical CSS Art","date":"December 8, 2020","format":false,"excerpt":"I've always enjoyed the CSS art people create, but I\u2019ve never ventured into it much myself. I'm familiar with many of the tricks involved, but still find it surprising every time: the way people are able to make such fluid and beautiful images out of little boxes. I always end\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-08-at-4.35.09-PM.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":769,"url":"https:\/\/css-tricks.com\/my-big-ol-list-of-designdevelopment-htmlcss-and-personal-blogs-i-read\/","url_meta":{"origin":283753,"position":3},"title":"My Big Ol’ List of Design\/Development, HTML\/CSS and Personal Blogs I Read","date":"May 16, 2008","format":false,"excerpt":"I've had a few folks ask recently what other sites I read. Like many of you I suspect, I'm a bit of a junkie when it comes to design & tech news. I really enjoy popping open Google Reader and having a nice amount of articles I can browse through.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/blogsiread.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316282,"url":"https:\/\/css-tricks.com\/my-long-journey-to-a-decoupled-wordpress-gatsby-site\/","url_meta":{"origin":283753,"position":4},"title":"My Long Journey to a Decoupled WordPress Gatsby Site","date":"July 13, 2020","format":false,"excerpt":"As a professional research biologist, my playground used to be science laboratories filled with microscopes, petri dishes, and biology tools. Curiosity leads many scientists on their journey to discoveries. Mine led me to web design. I used to try learning HTML on my lab desktop while centrifuging extraction samples or\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321187,"url":"https:\/\/css-tricks.com\/the-empty-box\/","url_meta":{"origin":283753,"position":5},"title":"The Empty Box","date":"September 23, 2020","format":false,"excerpt":"When I was in high school, we learned about \u201cThe Black Box\u201d which is concept in theater. If memory serves me right, the approach was a simple and elegant one: that you can take any space, any black box, and make it come to life with a story. I liked\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/b63f8a3d565c7c6e3737f950cb032131dcfee5ee.jpeg?fit=767%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tree-colors-scaled.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283753"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/36959"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=283753"}],"version-history":[{"count":19,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283753\/revisions"}],"predecessor-version":[{"id":284396,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283753\/revisions\/284396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/284065"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=283753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=283753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=283753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}