Designing in HTML/CSS/JS - I don't even know how to ask my question

In the late 90’s I helped my newspaper convert from traditional formats to digital. There was some very minor web coding involved. Learned Photoshop, Illustrator, Quark. Then I watched ‘Office Space’, identified with it too much, and became a window cleaner for around 15 years. Now I want to learn coding for web design with intent to learn good graphic design in code instead of using adobe products.

I’m forcing myself to learn the basics of HTML before I spend time on graphic design in my Responsive web design courses. When I change the colors of the penguin and designed the heart in code, I understood that this is what some of you are doing all the time.

Question 1:
I wonder when I should stop and go back and learn to ‘design’ my practice pages. I use very little css They’re horrible looking, but they, in my mind are for learning code, not design. Any opinions from those more experienced? I’m trying to decide if I should go back and do some basic design work before moving on to JavaScript.

Question 2:
What resources should I be studying if I want to create simple, cute web graphics, say a cartoon image of me for my window cleaning website, etc.

Thanks in advance!

I would say to follow your interests! If you’re feeling excited about design and how it works with CSS, I would say you should definitely dedicate more time to that and how it works with HTML before moving to Javascript. The first recommendation that pops into mind is YouTube, there are endless videos that help beginners explore CSS and its potential. : )

1 Like
  1. Personally I believe that having “good” design in mind as early as possible in the learning process actually can help you learn HTML/CSS more effectively. It forces you to learn about certain techniques and to take the needed time to implement the structure and CSS more carefully.

  2. SVG is not a bad idea to learn about if you want to do web graphics.

1 Like

I’m not an expert in CSS by any means, but in my opinion, if you are trained in graphic design/plan on increasing your skill in graphic design, it would be much more useful to you to learn CSS as a means to utilize that skill than to learn it as a separate skill altogether. CSS I believe is a tool, but like most coding, it is best used in tandem with other languages and systems to make a layout rather than be treated as a single system to exclusively be used for layout and design.

That said, I would imagine that at least having a basic understanding of how to use CSS when necessary wouldn’t hurt. It’s much easier to handle layout with CSS than anything else, and even if you aren’t using it to its fullest potential, having that skill in your back pocket will, in my opinion, definitely make your life easier.

As for your second question, I don’t know if this completely answers it, but I tend to use CSS Tricks when I want to look up design options. I don’t know how far it goes into “cute,” but it might be worth looking at.

1 Like

Thanks all! I think from what I learned on this thread, I’ll go with learning CSS after I complete the basic html on my technical documentation page.

SVG seems right up my alley, so that might be next, even before JS if I can get away with it!

  1. I think you should follow @js_tut on twitter.
  2. Read his book http://www.javascriptteacher.com/free-book.html
  3. Test his new app ArtBox (Photoshop for CSS) https://www.artbox.dev/
1 Like

In the last couple of years, a host of helpful “prototyping tools” for screen design sprang up. (multiple screen sizes, interactions, basic animations)
e.g. Sketch, InVision, Adobe XD, Figma, and others
https://appinventiv.com/blog/top-mobile-app-prototyping-tools-2019/

You could go to dribbble.com, pinterest.com or behance.net and collect examples to narrow down the style/composition you want to create. Then deconstruct how to create it … watch tutorials as needed … graphicdesign.stackexchange.com is useful for technical questions.

1 Like

I’ll check these out, too. I’m on a hotspot for the next few months and Adobe doesn’t respect my bandwidth needs so I had to delete 'em for a while. Stackexchange is new to me and i’ll check that out.