1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Am I doomed with CSS

Discussion in 'Web Development & Web Hosting' started by Dazzo, May 3, 2013.

  1. Dazzo

    Dazzo Byte Poster

    171
    3
    17
    Hi Guys,

    I've been working on learning HTML and CSS over a few months now. I have HTML down pretty much and I've started looking at HTML5 and using that on pages I create. Unfortunately, I can't seem to grasp CSS in a way that I can make the items do what I want on the page. I am not doing anything professionally just trying to create a personal website showing pictures of a year long trip I am on for a way to learn and practice.

    Does anyone have the same issue? Am I lacking in design skills or do you think I need tons more practice?

    Recommendations on places to learn CSS would be great :D

    Thanks,
    Darren
     
    Certifications: A+, MOS: Master 2010, Network +
  2. dmarsh

    dmarsh Terabyte Poster

    3,782
    302
    184
    Not a way to learn CSS really, but I'd reccomend looking at Bootstrap.
     
    Certifications: CITP, BSc, HND, SCJP, SCJD, SCWCD, SCBCD, SCEA, N+, Sec+, Proj+, Server+, Linux+, MCTS, MCPD, MCSA, MCITP, CCDH
  3. ade1982

    ade1982 Megabyte Poster Forum Leader

    566
    12
    52
    When I learnt it, it was just practice. The key ones are how to position things (like absolute, relative and fixed) and how to float or clear things.

    The most invaluable tool I have ever used is firebug (for Mozilla Firefox) as it means you can play around with things to get them just right, without having to re-upload code etc.
     
    Dazzo likes this.
  4. rocdamike

    rocdamike Byte Poster Gold Member

    235
    21
    72
    Initially CSS was very difficult for me to learn as well; it just didn't click. However, now I'm a lot more confident with it.

    My recommendations:

    • Take it slow (don't rush learning)
    • Get used to the terminology (declaration, attribute, attribute value, selectors etc)
    • Know the box model (content, padding, borders, margin - all crucially important!)
    • Get a good editor (I use Sublime Text 2)
    • Test, test and test (write some CSS, view the output locally on your web browser, alter the code, view it again, repeat this process so that you understand what is happening)
    • TutsPlus have a free HTML and CSS course which is very good - https://tutsplus.com/course/30-days-to-learn-html-and-css/
    • Keep practicing
     
    Certifications: CCNA R&S, CCENT, F5 101 Application Delivery Fundamentals, ITIL Foundation (2011), CompTIA (A+, Network+), MTA (Windows OS, Networking, HTML5)
    WIP: CCNA Security
    Dazzo likes this.
  5. Dazzo

    Dazzo Byte Poster

    171
    3
    17
    I just installed that in firefox and was using it. Pretty good just got to remember that it doesn't save haha. Made loads of changes and it looked ok and then I went off it lost it all ><

    - - - Updated - - -

    I'm using Notepad++ but might try a WYSIWYG editor to see if I can get a grasp using that. Will just have to keep at it as I'm not ready to put money into this yet unless I get a role where I could really use it.
     
    Certifications: A+, MOS: Master 2010, Network +
  6. rocdamike

    rocdamike Byte Poster Gold Member

    235
    21
    72
    I only use Sublime Text 2 in unregistered mode. I used to use Notepad++ and found that it was very good too :)
     
    Certifications: CCNA R&S, CCENT, F5 101 Application Delivery Fundamentals, ITIL Foundation (2011), CompTIA (A+, Network+), MTA (Windows OS, Networking, HTML5)
    WIP: CCNA Security
  7. dmarsh

    dmarsh Terabyte Poster

    3,782
    302
    184
    Dazzo,

    1. Visual Studio has a free Web express version so you could check that out for colouring and syntax highlighting etc.
    2. Seriously take a look at Bootstrap, (also a course here).
    3. Firebug has a lite version for chrome also
    4. Pluralsight and Lynda do some good HTML and CSS courses.
    5. I like Notepad2 as a Notepad replacement, its not an full HTML editor or IDE though.
    6. Code School has a free CSS course.
    7. Codecademy has a free CSS course.
    8. Peepcode have some design stuff also.

    rocdamike's, advice is good.
     
    Last edited: May 4, 2013
    Certifications: CITP, BSc, HND, SCJP, SCJD, SCWCD, SCBCD, SCEA, N+, Sec+, Proj+, Server+, Linux+, MCTS, MCPD, MCSA, MCITP, CCDH
    Dazzo likes this.
  8. Dazzo

    Dazzo Byte Poster

    171
    3
    17
    Thanks for all the info. I'm currently downloading bootstrap to go through the tutorial and have been using code academy the past couple weeks when I get chance and just got to the css bit. I'll transfer what I learn to the site I make and upload it here for you guys to check out.

    I really want to sign up to Lynda.com but I am unable to atm due to cash situation. All my money is going on a long trip through Australia in a few months time!!
     
    Certifications: A+, MOS: Master 2010, Network +
  9. rocdamike

    rocdamike Byte Poster Gold Member

    235
    21
    72
    Really good advice by dmarsh.
     
    Certifications: CCNA R&S, CCENT, F5 101 Application Delivery Fundamentals, ITIL Foundation (2011), CompTIA (A+, Network+), MTA (Windows OS, Networking, HTML5)
    WIP: CCNA Security
  10. Dazzo

    Dazzo Byte Poster

    171
    3
    17
    I'm working my way through Code academy now on the CSS part. When I'm done with this I'll try apply it to the site I'm creating.

    Haven't had time to look at bootstrap yet though!
     
    Certifications: A+, MOS: Master 2010, Network +
  11. Dazzo

    Dazzo Byte Poster

    171
    3
    17
    I uploaded what I've done so far to : A Trip Down Under - An adventure from the UK to Australia

    I'm still testing things out including border-radius and positioning. The color scheme is hard to get right, how do you guys pick them?

    I have a problem with the nav bar though. I can't get it to center. Any tips?
     
    Certifications: A+, MOS: Master 2010, Network +
  12. rocdamike

    rocdamike Byte Poster Gold Member

    235
    21
    72
    Well done! Looks good so far.

    For a bit of inspiration on colour palettes, try colourlovers.com.

    Regarding the nav bar centering, try zeroing out the padding on your unordered list i.e:

    Code:
    nav ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        width: 940px;
    }
    
     
    Certifications: CCNA R&S, CCENT, F5 101 Application Delivery Fundamentals, ITIL Foundation (2011), CompTIA (A+, Network+), MTA (Windows OS, Networking, HTML5)
    WIP: CCNA Security
    Dazzo likes this.
  13. Dazzo

    Dazzo Byte Poster

    171
    3
    17
    Thanks man that worked a treat!

    I'll look into that website now, may even try one of the pictures as a main background and do something similar to this : Total War
     
    Certifications: A+, MOS: Master 2010, Network +
  14. rocdamike

    rocdamike Byte Poster Gold Member

    235
    21
    72
    Glad to hear that it worked. Keep us posted about your progress.
     
    Certifications: CCNA R&S, CCENT, F5 101 Application Delivery Fundamentals, ITIL Foundation (2011), CompTIA (A+, Network+), MTA (Windows OS, Networking, HTML5)
    WIP: CCNA Security
  15. Juelz

    Juelz Gigabyte Poster

    Top Poster
    of the Month

    1,180
    186
    176
    All I have to say is Learn to code | Codecademy
     
    Certifications: MTA Windows Fundamentals, ITIL Foundation, Apple Mac Integration 10.12
    WIP: MTA Networking Fundamentals| MTA Windows Server Administration Fundamentals
  16. Dazzo

    Dazzo Byte Poster

    171
    3
    17
    I updated it again. Still think it looks a bit amateurish(sp) but it's a good template for the galleries on the site.

    Going to probably work on the other pages with a general home page set up and update feed/ contact page.

    Will probably start a new thread as my questions have been well and truly answered :D
     
    Certifications: A+, MOS: Master 2010, Network +
  17. dmarsh

    dmarsh Terabyte Poster

    3,782
    302
    184
    You might want to also look into SASS and LESS
     
    Certifications: CITP, BSc, HND, SCJP, SCJD, SCWCD, SCBCD, SCEA, N+, Sec+, Proj+, Server+, Linux+, MCTS, MCPD, MCSA, MCITP, CCDH

Share This Page

Loading...