CSS VS HTML

kriptcs · January 25, 2017

Hi guys.I am really blurry when it comes to those 2.I know that html is used for site development,so is css,but which one is better and why,thanks.

kriptcs · January 25, 2017

1 minute ago, Lacrimas said:

They work together, you can't separate them.

so if i know HTML,i have to know Css? tho my teacher said that we will learn html..heard nothing about css.And tho,what are each doing?

Ceff · January 25, 2017

HTML is used for the layout of a webpage. Items on a webpage (textboxes, checkboxes, buttons, labels) are HTML elements.

CSS is used for stying HTML elements. Say you wanted a blue button, well you'll need the appropriate CSS selector attribute in the element with the color attribute set to blue.

HTML can be used on its own without CSS. CSS on the other hand cannot be used on its own.

Cruorzy · January 25, 2017

If you start out you probably just do stuff copy paste and see if it works, with CSS this might be a bit frustrating. But i would recommend you to keep going since the more you work with it the more research you end up doing and improve at both CSS and HTML. Once you got the fundamentals i would focus on making a responsive website (Mobile friendly.)

Making it responsive would give you alot more points compared to your classmates.

Mira Yurizaki · January 25, 2017

If you want some reference material, I highly recommend this book: https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_1?ie=UTF8&qid=1485378887&sr=8-1&keywords=html+and+css

It provides 95% of the things you should learn to do (at least that's what the book's preface says) with clear examples on what each thing does. Advanced techniques can wait until you build your foundations.

If you don't feel like spending money, www.w3schools.com is also an excellent resource.

kriptcs · January 29, 2017

On 1/25/2017 at 8:44 PM, Cruorzy said:

If you start out you probably just do stuff copy paste and see if it works, with CSS this might be a bit frustrating. But i would recommend you to keep going since the more you work with it the more research you end up doing and improve at both CSS and HTML. Once you got the fundamentals i would focus on making a responsive website (Mobile friendly.)

Making it responsive would give you alot more points compared to your classmates.

how can I make it responsive? i actually wondered this since i finished learning the basics of html

Cruorzy · January 29, 2017

Try to get more into CSS, I used bootstrap its a CSS framework with the rule "Mobile first" This means that everything you make his first priority is for mobile users.

Then it comes to making it the way it way that it works fine on PC.

I jumped into bootstrap some people find this a bad practice (including me somehow) because understanding the fundamentals of something like CSS or JS is more important then jumping into a framework without any knowledge what it actually does in the background.

I just have a hate for CSS since i dont really find it working easly for me. I suggest you do a few websites with Bootstrap but dont make Bootstrap you main thing, Also try to get the understanding what Bootstrap exactly does.

http://getbootstrap.com/

Click on download bootstrap, put the folders JS CSS and fonts in your Assets folder.

link to the bootstrap.min.css and on the bottom of the page to bootstrap.min.js.

Or just start with this template, begin to read the documentation to add more.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Your custom style sheet, to apply mark-up -->
    <link href="/assets/css/styles.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; 2016 Company, Inc.</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
  </body>
</html>

Then a video to start with.

Akima · January 29, 2017

9 minutes ago, Cruorzy said:

Try to get more into CSS, I used bootstrap its a CSS framework with the rule "Mobile first" This means that everything you make his first priority is for mobile users.

Then it comes to making it the way it way that it works fine on PC.

I jumped into bootstrap some people find this a bad practice (including me somehow) because understanding the fundamentals of something like CSS or JS is more important then jumping into a framework without any knowledge what it actually does in the background.

I just have a hate for CSS since i dont really find it working easly for me. I suggest you do a few websites with Bootstrap but dont make Bootstrap you main thing, Also try to get the understanding what Bootstrap exactly does.

http://getbootstrap.com/

Click on download bootstrap, put the folders JS CSS and fonts in your Assets folder.

link to the bootstrap.min.css and on the bottom of the page to bootstrap.min.js.

Or just start with this template, begin to read the documentation to add more.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Your custom style sheet, to apply mark-up -->
    <link href="/assets/css/styles.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; 2016 Company, Inc.</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
  </body>
</html>

Then a video to start with.

+1 for bootstrap. It almost halved the development time I needed for a web app I was working on.

Dat Guy · January 30, 2017

Don't use any framework unless you can guess what it does. If I was a teacher, I'd totally give you zero points. Having other people's code do the work is not recommended.

Cruorzy · January 30, 2017

7 hours ago, Dat Guy said:

Don't use any framework unless you can guess what it does. If I was a teacher, I'd totally give you zero points. Having other people's code do the work is not recommended.

Yeah i already said that, but good advice. I disagree with giving a zero tho..

SpaceNugget · January 30, 2017

10 hours ago, Dat Guy said:

Don't use any framework unless you can guess what it does. If I was a teacher, I'd totally give you zero points. Having other people's code do the work is not recommended.

Yea, don't use any frameworks at all, you better write your Ethernet driver too, then a TCP layer, HTTP/2 server, encryption, etc...

"Having other people's code do the work is not recommended." Having other peoples code do the work is how every professional programmer works. Work hard but work smart too.

Dat Guy · January 30, 2017

I usually write my server software on my own, indeed. However, even a standard task like a responsive web UI should not be assumed to require a web framework.

SpaceNugget · January 30, 2017

3 minutes ago, Dat Guy said:

I usually write my server software on my own, indeed. However, even a standard task like a responsive web UI should not be assumed to require a web framework.

Server sided logic =/= the http server itself. If you actually wrote an http server every time you want to make a website, you might think that makes you hardcore but it actually would make you the least effective web dev on the planet =D

Dat Guy · January 30, 2017

Different web services have different server requirements.

SpaceNugget · January 30, 2017

25 minutes ago, Dat Guy said:

Different web services have different server requirements.

You are dodging the admission that you don't write an http server from scratch every time you make a website =D

the different server requirements are handled by the variety of different servers around, nginx/apache/node(http module)/etc.. and you probably even use frameworks like django/flask/express. oh the horror of letting others code do the work.

Dat Guy · January 30, 2017

There is no good C framework for web applications. Sorry to disappoint you. I totally understand why Pythoneers would want to use such though. The less Python code someone needs to write, the less horrible it is.

SpaceNugget · January 30, 2017

37 minutes ago, Dat Guy said:

There is no good C framework for web applications. Sorry to disappoint you. I totally understand why Pythoneers would want to use such though. The less Python code someone needs to write, the less horrible it is.

If you are writing C http servers every time you make a website you are just a shitty programmer. Cost to the customer and development time are important. Even C programmers use curl and other networking libraries Out of a strange coincidence I am literally writing a trivial C http server using socket libraries RIGHT NOW. Its not the correct way to do it.

BTW I hope you dont use libc or any network drivers you didn't write. gotta keep all the code yours you know?

Dat Guy · January 30, 2017

I have no customers for most of my C stuff. It's basically one of my weird hobbies.

Sorry, but did you really misunderstand my point when I said that using third-party frameworks for trivial tasks was a bad idea? There is a big difference between using the libc for basic C functionality and using Bootstrap for making a fucking website "mobile-friendly".

Cruorzy · January 30, 2017

On 1/29/2017 at 1:43 PM, Cruorzy said:

I jumped into bootstrap some people find this a bad practice (including me somehow) because understanding the fundamentals of something like CSS or JS is more important then jumping into a framework without any knowledge what it actually does in the background.

Well luckly enough this was already made clear to the person, no need to make a big deal out of this.

Thanks for sharing your advice, luckly he has a choice now and maybe ask his teacher if its okay to use Bootstrap if he wants to.

Maybe he is just a bit short of time to learn and then write his CSS/JS all at once.

SpaceNugget · January 30, 2017

35 minutes ago, Dat Guy said:

I have no customers for most of my C stuff. It's basically one of my weird hobbies.

Sorry, but did you really misunderstand my point when I said that using third-party frameworks for trivial tasks was a bad idea? There is a big difference between using the libc for basic C functionality and using Bootstrap for making a fucking website "mobile-friendly".

Disparaging the use of bootstrap when you don't know what you are talking about and making wild statments like don't make others code do the work really made you look like a fool and I didn't want to let you weasel out of it.

There are plenty of benefits of using bootstrap. It has become pretty widespread in industry, lots of web devs have experience working with it. That is massive on its own. if you need to hire a new dev, getting them up to speed when they already have a sense of how your styling rules are implemented saves hours and hours are what costs money. The reality is that software development for the most part is a business, and doing things that save time, even if it means its less 'yours' is still a net benefit. If you minimally configure and extend it, you have a huge pool of developers and support + you have the time savings of architecting a set of style rules + etc...

There are situations where bootstrap is a good fit and ones where writing from scratch makes more sense. Making blanket statements and throwing away huge swaths of industry consensus only serves to make you a worse developer. Keep your mind and your options open.

Sign In

CSS VS HTML

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites