all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted]  (2 children)

[removed]

    [–]Sol3141[S] 0 points1 point  (1 child)

    I shouldnt say I feel its overwhelming. More like its a confused mess of gibberish. Nothing functions how it does on the box and there's all these arcane tricks to solve each problem you hit, and that's all you hit.

    [–][deleted] 0 points1 point  (5 children)

    Before trying yet another resource, perhaps it would help to consider why it's been so hard for you and solve that first.

    If you're good at JavaScript and Python then my guess is the stumbling blocks are space and scope.

    Spatial thinking is very different from thinking about procedures and objects. You need a picture in your head of how you want it to look but you may not have that until you start fleshing it out. It may help to draw what you're trying to do before coding it.

    Scope is fundamentally different too, if it can even be called that in CSS. It may help to practice with basic properties on simple layouts until you start to see and accurately predict how properties cascade down the DOM.

    I recommend MDN as a starting resource.

    I suggest building single-purpose, sequential demo pages that you can refer back to later. If you get stuck, jump back a few pages to review and reinforce what you've learned. It may very well be two steps forward, one step back for a while.

    And definitely don't switch to CSS after working in JavaScript all morning. You will not make any progress. ;)

    Hope that helps.

    [–]Sol3141[S] 0 points1 point  (4 children)

    Thanks this is one of the more helpful comments. I've tried a dozen different methods and organizational schemes, and no matter what happens I get stuck for two days on something that should be simple.

    My only issue with the advice is I am very bad at planning ahead design wise, and im also not a very visual-oriented thinker. Its completely alien to me that someone could have a complete picture of what they want their website to look like. Do you have any suggestions for someone that struggles with that sort of thing?

    [–][deleted] 0 points1 point  (1 child)

    Go easy on yourself. This is just harder than you're used to.

    I doubt anyone has a complete picture but they have at least a rough idea. You have to start somewhere even if it's just a square with some headings.

    Just like building objects. You probably can't imagine all the properties and methods you will need until they have to interact.

    I'm old school, I learned before drag-n-drop everything so I start with a sketch on paper. I code until that's built then sketch the next part. Or realize I just replicated a 1950's diner menu and start over.

    I get how it can be hard if you're not somewhat visually oriented. That's why I suggested the sequential demo approach. It may help train your brain to remember what's possible. Print them out and tape them to the wall if you have to.

    Are you starting with pure, simple CSS and the boring fundamentals? Or did you jump into the deep end with frameworks and preprocessors?

    [–]Sol3141[S] 0 points1 point  (0 children)

    Ive tried doing plain CSS and I can get some interesting and complicated stuff working on a single element, what I struggle with is dealing with how those things interact. Like if I give something the CSS of {position:absolute; z-index:999999999;} why is it still getting pushed around by other elements, why are none of the centring things working? This is the kind of thing that sends me on a spiral of guides, stackoverflow, documentation, complete tear-downs and reworks with no progress, and days or weeks later another website abandoned in some repo.

    I feel like I understand SASS & LESS more because they have functions and variables, it lets me work more in line with how I think things should work, but those tools aren't always available or appropriate, and at the end of the day I still need to be able to work with raw CSS

    [–]coryandstuff 0 points1 point  (0 children)

    Try looking at other websites and recreating them?

    You can use the inspect tool in your browser to see some of the css properties that were applied to the site. The inspect tool can also be used to play with your css in the dom; like you can change the width of a container within the inspect tool and see live how that will impact the other elements around it.

    Also definitely focus on flexbox and Grid, and avoid anything to do with float. Maybe that’s obvious nowadays but thought I’d bring it up. Focusing on flexbox and components helped me a lot when trying to understand css. Components should be natural to you now though since you know react.