Grow your CSS skills. Land your dream job.

Reading HTML5/CSS3 Versus Writing HTML5/CSS3 – I Have A Mental Block

  • # September 26, 2012 at 11:17 am

    Fellow forumers,

    I have a mental block that I hope you can help me get past.

    I can look at pretty much any HTML code or CSS code and it makes perfect sense. However, when it comes to actually writing code or modifying code, I am a complete idiot.

    See this thread, for example: http://css-tricks.com/forums/discussion/19706/display-submenu-dropdown-on-hover#Item_4

    How can I overcome this shortfall between being able to read and understand HTML and CSS and actually writing it from scratch or modifying existing code?

    I have pretty much every recent book on the subjects know to man, but am still open to suggestions for more.

    I have written some pretty complicated stuff in Excel VBA and Visual Basic in the past, but just can’t quite get HTML or CSS to stick yet.

    Any advice would be greatly appreciated. Thanks.

    Glenn

    # September 26, 2012 at 11:33 am

    It’s going to sound super patronising but “Just build websites!” (Chris always says this on ShopTalk).

    What I would recommend is going somewhere like Themeforest or whereever and grabbing some of their PSD only templates (if you have photoshop). If not, just view the “Screenshots” and you can see how the site is supposed to look.

    I would then save those images and literally try to build them with my own CSS/HTML to get into the grip of things.

    Nowadays I can sit down, look at a picture handed to me by my graphics guy and just code that badboy up.

    Divs, sections, asides etc, naming wise just call them what they are (header, footer, main-content) etc.

    With regard to CSS – try to work out your own style by doing the above and organise it in a way that you’re happy with.

    My CSS usually follows the actual page layout, so starting at the body, then header, then main content areas then footer. I obviously breakup my other parts like typography etc so it doesn’t get over-ridden.

    Within each property I’ll break it down by doing display/visibility, width/height, margin/padding, then misc as it comes.

    It will literally come from you just building stuff and having a purpose to it. So grab some ideas or templates and just get coding. The mistakes you make along the way and have to fix will teach you more about coding than any books!

    # September 26, 2012 at 11:36 am

    Two words: do stuff.

    Sign in into CodePen, and build stuff. Even simple stuff. Buttons, dropdowns, navigations, layouts, whatever. Just create things, and you’ll quickly overcome every little issue. :)

    # September 26, 2012 at 2:56 pm

    A agree with the above. Just start making websites. You don’t need a reason other than to try it out. To this day, if I find a technique or a look I really want to know how to make, I open Notepad++ and try to build it from scratch.

    # September 26, 2012 at 3:13 pm

    Yea, unfortunately it’s just practice. I remember way back when there was a time where I had to look up almost everything in CSS.

    “What was that code to make a div centered again? *Looks it up* Oh, right, `margin: 0 auto;`”

    Eventually those question get more complicated:

    “Hmmmm, I forget the shorthand for box-shadow… *Looks it up* Ah yes, it’s `box-shadow: x y blur spread color`”

    At some point it all comes naturally and from memory.

    # September 26, 2012 at 3:21 pm

    Oh. And start with the box-model. This is the first step to understand CSS.

    # September 27, 2012 at 5:52 am

    I have the same problem.
    May I ask a question to Andy_unleash :
    Because I’m a newbie and it’s the first time I visited Themeforest , do you mean that you have to buy the PSD template in order to receive all the pictures and photos you need to rebuild the site ? or can I save the screenshots ? Thank you for your comment.

    # September 27, 2012 at 5:57 am

    Yes, you have to buy the PSD.

    I suppose, in theory, you could do it from a a screen capture but it’s only $10 and you are going to use their work.

    It’s the least you can do.

    # September 27, 2012 at 11:18 am

    You don’t have to, could just use the screenshots, but it will be worth it so you can use some of the imagery in your build. That way you won’t waste time with images but just be able to crack on with the code.

    # September 27, 2012 at 11:33 am

    If you’re going to be in this industry, you should also be supportive of those who are in it. Why would you not support someone else’s work if you’re going to use it or learn off it? @Pauli_D understands it.

    __
    # September 27, 2012 at 10:53 pm

    You may download a single copy of any content contained on the Sites, solely for your personal, non-commercial use, consistent with these terms of use, provided that you maintain the copyright and other notices contained in that content. This excludes products available for sale/licensing on the Sites [emphasis added].

    http://themeforest.net/legal/user

    that’s “the word.”

    however, themeforest does offer free stuff. It might not be the one you really want, but it will still help you learn.

    # September 28, 2012 at 1:53 pm

    of course I would be supportive of those who do all the work – that wasn’t my problem – I am only new to this and I would like to learn. – Thanks everyone

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".