Live Coding: Working with HTML, CSS and jQuery

Video is ready, Click Here to View ×


Learn to build a website from scratch, based on the Threadly Pro project from our jQuery course. We’ll go over setting up the project’s HTML structure, linking CSS and JavaScript files, and more outside the Codecademy environment!

The final code for the project can be accessed here: https://github.com/dordille/threadly

You can get access to Threadly and other projects and review materials with Codecademy Pro! Click here to learn more: https://www.codecademy.com/pro?utm_source=youtube&utm_campaign=live_coding_pro&utm_medium=external_ad_youtube&utm_content=description_link

Links To Resources Used:
HTML Layout: http://j.mp/1rAnFtj
Bootstrap: http://getbootstrap.com/
jQuery: https://code.jquery.com/

25 Comments

  1. Hi I recently got your e-mail thank you.
    I am keen to return to coding but are unable to dedicate a particular time to study. Do Codecademy have a online course where I can study at my own pace please. I trying to teach myself Responsive Web design and now see something abut bootstrap. It has been 12months since my last course on web design and realise technology changes quickly.

  2. Great video! I have a JavaScript vs. JQuery question in connection to this tutorial though. With JS tutorials I've seen, to code an action for a form submit button you have to supply an action= argument to the <form> tag (if using PHP, CGI, ASP, etc.) or something like onSubmit="JavaScript:ExampleJS()" for JS, but it looks like JQuery (which is a form of JS) doesn't require that, so I'm guessing the only way the $('form').submit(function(event)) code works is that somehow the entire HTML document is passed to JQuery which then selectively parses the elements (not all that different from how CSS seems to be applied). Is this correct, and if so why can't regular JS do this? Thanks in advance.

  3. at 18:00 minutes, what is wrong?

    </head>
    <body>
    <header class="header">
    <div class="container">
    <div class="row">
    <div class="col-xs-12 col-md-12">
    <H1>Threadly</H1>
    </div>
    </div>
    </div>
    </body>

    <div class="main">
    <div class="container">
    <div class="row">
    <form class="form">
    <div class="col-xs-8 col-md-10">
    <input id="comment" type="text" placeholder="share your thoughts">
    </div>
    <div class="col-xs-4 col-md-2">
    <button type="submit" class="btn">post</button>
    </div>
    </form>

    </div>
    </div>

    </div>
    </div>
    </div>

    </html>

    <!18:00 of video->

  4. Very helpful and informative tutorial. I was able to follow all the code writing. Thanks to CodeAcademy HTML & CSS class! 🙂
    Keep the good work!
    Thanks a lot!

  5. "form input {}" doesn't do anything for me unless I put a period in front of "form". I thought when selecting a class the periods were required. How are you able to see results without using a period in front of a class selector in CSS?

  6. Great video! Just started my path to full-stack front-end, couldn't do it before with books and videos, was getting very bored and disappointed, but with help of codecademy interactive learning everything went smoothly. Even looking for additional information and documentation beside codecademy became much easier. Thank you very much! Waiting for more videos!

Leave a Reply

Your email address will not be published.


*