So I have anxiety and, at times, racing thoughts that turn my brain into static. I struggle with “all-or-nothing” thinking, as you will see in this post… On top of this, we’re still in a worldwide pandemic and I’m feeling a tad suffocated in my bedroom/office.
I’m not asking for project feedback, here. I’m asking for… advice as to where you start your projects? Any project? I toiled for days trying to think of a “product” at all–just as I had struggled to think of a tribute page subject and survey topic–and got so worked up my boyfriend made me step away from the computer. When inspiration finally struck, I sketched out what I envisioned (aka the minimalist look every website strives for these days…) and… I didn’t know where to begin.
Observe! My notes from the past few days of working on the third HTML project: product-landing page.
I’ve been doing my best to
1.) Build small to large, the idea of building minimalist for a smart phone and working your way up making the most sense to me.
2.) Writing the HTML in full and then adding on CSS. Which… again, I think makes the most sense and is the standard?
Much of me wants to meet the bare minimum of what the project demands and move on! Screw media queries! Damn CSS! Each and every div tag can rot in hell!
But… the other part of me is pulled in a very different direction: I want this page to be perfect: aesthetic, responsive, e-reader friendly; something I’ve worked with rather than rushed through to stretch my HTML/CSS muscles!
I’m sure there’s a happy medium. Any advice for finding it? And with that, where do I begin? Where do you begin?
P.S. Passing Danes, feel free to correct my grammar Hygge, Hyggeligt…?
Many writers are terrified of a blank page, and programmers are the same when it comes to a brand new project. Given how you like to whiteboard your UI, perhaps you could use something like Figma to prototype it. Figma will generate your HTML and CSS too, but obviously that’s not going to teach you either of them very well.
As for how much detail you want in the final product, that’s hard to say and there’s no right answer: knowing when to step away and call a project done is a tough call, and some never know when to make it. Having a list of goals in advance will help. Maybe even use a ticket tracking system like Jira or Github issues and organize things into one-or-two-week “sprints”. However you do it, having a prioritized list in front of you where you can cross items off will help you separate the “must-haves” from the “if I have the time” items.
Thing 1: Your whiteboard wireframes are great. That’s legitimately an important part of the process that even many professional developers try to skip or rush through and suffer for (she says, side-eyeing her coworkers).
Thing 2: It sounds like an important step for you to add is thinking about which things matter. Which decisions are important? Which features must work and which just seem cool? The obvious example here is the subject of your projects. I think that you know that it doesn’t matter what your page is about, but it can be helpful to explicitly acknowledge that. You will learn just as much from building a product page about unicorns as you would from one about coffee cups, or a smartphone, etc. Put your energy into things that matter. Give yourself time (or effort) limits to things that don’t matter as much. On software teams we call this “timeboxing” a task.
Thing C: We often talk about things like “minimum viable product” or “minimum working example”. This is the stripping down of your idea into the version of itself that focuses exclusively on the crucial elements. It’s good to have a more complete goal and work backwards from that to get a minimum design/set of requirements and then start adding bells and whistles progressively when the minimum version is working.
Thing the Fourth: Once you have a plan, get something on the screen. Blank screens are debilitating. Even if it’s just a bunch of divs that say “Title”, “Picture”, “text”, etc. The more you build up getting started in your mind, the more you’ll freak yourself out. Do something and then improve on it.
I think you are going about it well. Building from small to big, getting the html out there first and then adding the css. Great.
I think you are compensating. The care and preparation is being compensated by a desire to ‘just get on with it and smack it in the file’. The extremes are pulling you to pieces. So, this is not about right or wrong. You need to find your balance and there is but one way to do that: code and get some feedback. Start putting it in a file and show us what you got. I think some honest and thoughtful feedback is going to help you become grounded. And have patience. Coding is about learning concepts, applying them and slowly handling more and more complexity. Don’t try to create too much complexity from the start. Your mind is complex, your skills not yet. Do something simple. Make that work. And then add to that.
You have created a beautiful structure but see to it that its realization does not put too much pressure on you. Start with the html, start with a bit of the html. Just a bit. See to it that that works and then add to that. You’ve thought big, now do something small.
Unlike you, I would throw myself off the deep-end, wild-eyed and hair aflame, coding into the night. That would suppress the doubt and the paralysis but it was pretty frantic. I always felt a little inferior to people who work like you, like a careful calm adult. At least that’s what I imagine people who make those kinds of schemes to be. But I read that you suffer as much as I do. Doubt, it’s such a killer.
I’ve written down your name. Send us a link with a bit of code in it. You don’t have to do this alone.
Nose to the grindstone today and… still. I feel like I need to just start over, but know that won’t automatically fix everything. I’ve been looking at others’ landing pages and… don’t know how they were able to write SO MUCH CSS. HTML, okay, I get it pretty conceptually, but how they’re able to manage hundreds of lines of CSS? Classes on top of classes? I just can’t understand.
I know I’m improving: the first time I looked at HTML it all blurred together and overwhelmed me. Now I can look at it and understand. But CSS… I get it, until I try to apply it. Going to sleep on things.
Any advice I can personally give will just be me being captain hindsight as I was equally as stressed and annoyed at not understanding stuff when I started learning, but here we go:
Invest time consistently in your learning and try to split that 50% theory and 50% practice and playing around with code,
Be patient with yourself and with your computer, cultivate patience as a skill - it’s far easier to program when you’re calm (still tough when starting out though)
Have trust that if you invest time consistently in learning you will improve, like exercising consistently and getting fitter/stronger it’s sort of an inevitable outcome in the long run,
Try udemy courses - as a beginner it helps to watch someone coding and explaining on video as it makes more sense than reading about a concept in text as you get to see things happening in context, Angela Yu’s Web Development course on there I found very useful but there are plenty of other equally good courses, pick someone who’s voice/style you like as you’ll be watching/listening to them for many hours. For a beginner Udemy is extremely good,
The key ingredients are really time + patience + practice
A lot of concepts won’t make sense until you need them but you won’t know you need them unless you’ve read about them so it’s all a very iterative process,
It’s also a messy process
I started learning in July 2019.
I made this in December 2019.
(don’t pay attention to this for learning purposes it’s not good html)
Speaking from experience, it’s much easier to, ahem, “borrow” a design style then it is to incorporate on the fly when styling your pages.
I know, I know, “But I want to make this my own! It needs to look pretty and come from me!”
Believe me, I completely understand. We want our work to stand out but what seems to cause paralysis by analysis is making branding decisions whilst developing the page. Branding the web page should be done prior to developing your web pages so that the amount decisions the developer has to make is at a minimal. After all, building your page should be a technical aspect.
I think a good place to start is by finding an already existing web design that fits your project. This looks like a good place to start : https://creativemarket.com/blog/hygge-graphic-design-ideas. I would use that rabbit hole and see if you can find a site that fits that theme. Once you find a site, download their css and start hand picking the css styles that you like the most and paste it into your stylesheet.
Once your site is styled, then you can start messing with the styles so it can fit your vision and be able to make it your own.
You got the idea. However, IMO no one really discovers the effective way to start a project unless they’ve done several projects. In other words, it comes with experience.
Don’t strive for “the best.” It is an illusion. Strive for “good.” From there you can always look for “better”, if you have the time. As a teacher and a boss I prefer a “good” solution by the deadline over the promise of getting “the best” late (and usually not even getting anything close to acceptable).
Think in terms of iterations: when you’ve sketched your wireframe do a rough implementation. Then step back, reassess your plan and then make refinements and adjustments. Learn to use Git (or whatever)… to keep versions. Make branches to try new ideas and either keep them or go back to the main path.
Remember, this is a journey. Review each completed project and assess what went well, what didn’t go well, and what you would do differently next time. Then approach the next assignment with excitement, not dread! You get to do things better and perhaps learn new things.
Ha, yes, I do, and my therapist and I are working on that grandiose misinterpretation of the world lol.
Thank you everyone. I’ve discovered w3schools’ exercise section for HTML and CSS. I’ll return to this project once I understand the fundamentals–and have put them into practice (the most challenging part)–a bit better. I’m so fortunate to have found you all.
Hygge, Hyggeligt…?
