找Web前端方面的工作，已初步学完HTML，JavaScript，CSS接下来该如何走？

HTML

<!-- 规定以js-开头的专门用于DOM获取 -->
<div class="wrap" id="wrap">
    <div class="text js-text" contenteditable="true"></div>
    <div class="btn-wrap">
        <span class="btn js-btn">留言</span>
    </div>
    <ul class="list js-list"></ul>
</div>

JS

function $(sClass) {
    return document.getElementsByClassName(sClass)[0];
}
var Msg = (function(){
    // 先获取DOM元素
    var oText = $("js-text"),
        oBtn = $("js-btn"),
        oList = $("js-list");
    function init() {
        oBtn.addEventListener("click", function() {
            var sTxt = oText.innerText,
                aLi = oList.getElementsByTagName("li"),
                oLi = document.createElement("li");

            oLi.innerHTML = sTxt;

            (oList.children.length == 0) ? oList.appendChild(oLi) : oList.insertBefore(oLi, aLi[0]);
        });
    }
    return {
        init: init
    }
})();
Msg.init();

相信任何学完HTML、CSS、JS基础都能看懂上面的代码，但有个问题是页面一刷新内容就没了，我们还需要把内容存储到数据库，这就是版本2所要做的事情。

版本2

我们需要用到AJAX把数据发送到后台，后台接收后再进行处理（添加到数据库）。HTML代码和版本1一样，下面是JS代码。

function $(sClass) {
    return document.getElementsByClassName(sClass)[0];
}
var Msg = (function(){
    // 先获取DOM元素
    var oText = $("js-text"),
        oBtn = $("js-btn"),
        oList = $("js-list");
    function init() {
        oBtn.addEventListener("click", function() {
            var sTxt = oText.innerText,
                aLi = oList.getElementsByTagName("li"),
                oLi = document.createElement("li");

            oLi.innerHTML = sTxt;

            // 发送数据到后台
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "msg.php?text="+sTxt);
            xhr.send(null);

            // 前台正常展示
            (oList.children.length == 0) ? oList.appendChild(oLi) : oList.insertBefore(oLi, aLi[0]);
        });
    }
    return {
        init: init
    }
})();
Msg.init();

msg.php

<?php
    $text = $_GET["text"];
    $time = time();

    // step1：先连接
    mysql_connect('localhost', 'root', '345149');
    // step2：选用哪个数据库
    mysql_select_db('msg');
    // step3：操作数据库中的哪个表
    $sql = "INSERT INTO msg_infor (ID, text, time) VALUES(0, '{$text}', '{$time}')";
    // step4：指定sql语句
    mysql_query($sql);
?>

版本3

版本2中我们虽然把数据存储到了数据库不假，可是当我们刷新页面的时候内容又不见了，此时我们还需要在页面加载时重新获取下数据库中的内容，JS代码和版本2中的一样，下面是HTML和PHP混编后的代码。

<!-- 规定以js-开头的专门用于DOM获取 -->
<div class="wrap" id="wrap">
    <div class="text js-text" contenteditable="true"></div>
    <div class="btn-wrap">
        <span class="btn js-btn">留言</span>
    </div>
    <?php
        // 一上来就从数据库中查一波
        mysql_connect('localhost', 'root', '345149');
        mysql_select_db('msg');
        $sql = "SELECT ID, text, time FROM msg_infor ORDER BY ID DESC";// 倒序
        $res = mysql_query($sql);
    ?>
    <ul class="list js-list">
        <?php while($row = mysql_fetch_row($res)){ ?>
            <li>
                <?php echo $row[1]; ?>
            </li>
        <?php } ?>
    </ul>
</div>

版本4

从上面的过程中我们能了解一个前后端交互最基本的实现过程，此时我还想在留言内容刚刚呈现时加一点点动画效果，而不是硬生生的出现，改动JS代码如下。

function $(sClass) {
    return document.getElementsByClassName(sClass)[0];
}
var Msg = (function(){
    // 先获取DOM元素
    var oText = $("js-text"),
        oBtn = $("js-btn"),
        oList = $("js-list");
    function init() {
        oBtn.addEventListener("click", function() {
            var sTxt = oText.innerText,
                aLi = oList.getElementsByTagName("li"),
                oLi = document.createElement("li");

            oLi.innerHTML = sTxt;

            // 发送数据到后台
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "msg.php?text="+sTxt);
            xhr.send(null);

            // 前台正常展示
            (oList.children.length == 0) ? oList.appendChild(oLi) : oList.insertBefore(oLi, aLi[0]);

            // 动画
            ani(oLi);
        });
    }
    function ani(oLi) {
        // 高度和透明度的变化                
        var iHeight = oLi.offsetHeight - 13;
        oLi.style.height = 0;
        oLi.style.opacity = 0;
        var iNum1 = 0,
            iNum2 = 0,
            timer = null,
            oBar = true;
        timer = setInterval(function() {
            iNum1 ++;
            iNum2 +=2;
            if(iNum1 >= iHeight) {
                iNum1 = iHeight;
            }
            if(iNum2 >= 100) {
                iNum2 = 100;
            }
            if(iNum1 == iHeight && iNum2 == 100) {
                clearInterval(timer);
            }
            oLi.style.height = iNum1 + "px";
            oLi.style.opacity = iNum2 / 100;
        }, 30);
    }
    return {
        init: init
    }
})();
Msg.init();

最后再啰嗦一句吧，要学好上面东西其实并不简单（至少对于我是这样），需要我们发现其中的乐趣并喜欢上他才能长久的坚持下去，缺少这个，会很麻烦。路漫漫其修远兮，一起加油吧