Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree4Likes
  • 1 Post By Ronald Roe
  • 1 Post By PreciousReed
  • 1 Post By satindertech
  • 1 Post By Ronald Roe

Thread: New to HTML5 and CSS

  1. #1
    Junior Member
    Join Date
    Mar 2016
    Posts
    1
    Member #
    53596

    New to HTML5 and CSS

    Hello

    I am new to HTML5 and CSS and have been reading up with books and been going through youtube tutorials to try and get the basic understanding of how things work.
    I learn best by playing around with things myself which is how I learned photoshop and wanted to know if there is any free codes of full websites that I can use which will allow me to then edit it and play around with the design so I can learn that way how things work?
    If anyone knows any websites that have free codes that allows me to edit it please let me know.
    Thanks in advance
    John

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Most browsers now have some sort of dev tools. Chrome's are arguably the best built-in tools. Press F12 while you're on a page you want to know about. Once the dev tools are open, you can do just about whatever you want. You can add/delete elements/HTML, change CSS styles and run JavaScript code in realtime in the console. If you want more information that you'll know what to do with, run this in the console:

    Code:
    console.dir(document.querySelectorAll('*'));
    This will output every element and all of its information as a massive array of objects that you can peruse. It will show everything from CSS styles applied, internal HTML, parent/child elements to more advanced things like attached JS listeners, manipulation methods and constructor functions. The amount of information contained is daunting, but useful if you want to really understand how everything comes together in the Document Object Model (DOM).
    satindertech likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Banned
    Join Date
    Jan 2016
    Location
    Brooklyn, New York
    Posts
    85
    Member #
    53107
    Liked
    16 times
    Download free bootstrap templates or any site templates and try editing its style. You can also make your own from scratch.
    satindertech likes this.

  5. #4
    Junior Member satindertech's Avatar
    Join Date
    Jan 2016
    Posts
    15
    Member #
    52977
    Liked
    3 times
    First play with ready templates. Google "Free website templates html5 & css". Download them.
    Try to change pics, text etc. play with colours, appearance etc.
    Adjust it with F12. Play in browser on opened pages. This is best and fast method.
    Try to make a website for a friend who is not in hurry.
    Ronald Roe likes this.

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by PreciousReed View Post
    Download free bootstrap templates or any site templates and try editing its style. You can also make your own from scratch.
    This is actually not what you want to do. You will learn very little from this.

    "But..", some will say, "Editing templates is how I learned". And to those people, I say, "Bravo". There's no better way to learn something than to break it and put it back together again. A Bootstrap template, however is NOT the way to go.

    The reason? There's a couple actually.
    1. Bootstrap fails in one very important way (and many smaller ways as well). HTML, CSS and JS have very different and useful functions. HTML is for structure/content. CSS is for style. JS is for interaction. The basic nature of Bootstrap confuses these very important separations. Style is brought to the HTML by way of adding specific classes in exchange for a specific style. You need to learn how these 3 techs interact and how the separation between them is important.

    2. Abstraction. When you add a class of navbar to a nav element, it automatically styles it to be a horizontal, mobile friendly nav bar with gradients, proper spacing and media query breakpoints. You need to be able to do those things on your own first, or you will only learn to use Bootstrap and will miserably fail without it. It will become a crutch.
    satindertech likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 07:05 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com