写给在学WEB前端开发新手的几个建议

1、想要从事web开发的朋友,首先要想清楚自己开发的侧重点,是web前端开发,还是后端开发。定位好自己的角色再有针对性的学习。当然,既然是web开发,做前端的就不可避免的会与后端有联、系,因此了解后端制、作技术是有必要的,当然,你若目标就只是能找到工作,没有更高的要求,那么你仅仅会一些简单的前端技术就可以了,但那是没有前途是,也就是你只会停留在前端的最低层次。要知道,web前端开发,也分三六、九等,职位有比如网页设计师,前端工程师、JS研发师等等,当然你的技术与你的薪水也是挂钩的,有的只是普普通通的两三千的月薪,而有的则上5位数,这就是差距,看你有没有那个继续前行的动力了。


2、关于学习。前端开发的技术,主要靠自学应该,可能有些大学开的课有相关方面的课程,但新技术还是要自己去学习。另外,知识学的好,不如东西做的好,要多练习多多练习多总结经验,做出来东西摆出来让别人看,且看着是那个样,看着舒服,才是王、道,而你懂的多,但就是动手能力不行,让你做个东西,做半天做不出来,那别人会怎么想,可想而知。

如果你你热爱WEB前端,热爱这个行业就应该持续走下去,如果你看到这里欢迎一起来学习交流617327703还有大神解答问题分享学习资料

分享一篇挺有意思的一段代码。马上520就要到了

某程序员写给女友的清新页面

/*

网上发现了一个某程序员写给女友的清新页面

项目主页:http://love.hackerzhou.me

*/

// variables

var$window = $(window), gardenCtx, gardenCanvas, $garden, garden;

varclientWidth = $(window).width();

varclientHeight = $(window).height();

$(function() {

// setup garden

$loveHeart = $("#loveHeart");

varoffsetX = $loveHeart.width() / 2;

varoffsetY = $loveHeart.height() / 2 - 55;

$garden = $("#garden");

gardenCanvas = $garden[0];

gardenCanvas.width = $("#loveHeart").width();

gardenCanvas.height = $("#loveHeart").height()

gardenCtx = gardenCanvas.getContext("2d");

gardenCtx.globalCompositeOperation ="lighter";

garden =newGarden(gardenCtx, gardenCanvas);

$("#content").css("width", $loveHeart.width() + $("#code").width());

$("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));

$("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));

$("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));

// renderLoop

setInterval(function() {

garden.render();

}, Garden.options.growSpeed);

});

$(window).resize(function() {

varnewWidth = $(window).width();

varnewHeight = $(window).height();

if(newWidth != clientWidth && newHeight != clientHeight) {

location.replace(location);

}

});

functiongetHeartPoint(angle) {

vart = angle / Math.PI;

varx = 19.5 * (16 * Math.pow(Math.sin(t), 3));

vary = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));

returnnewArray(offsetX + x, offsetY + y);

}

functionstartHeartAnimation() {

varinterval = 50;

varangle = 10;

varheart =newArray();

varanimationTimer = setInterval(function() {

varbloom = getHeartPoint(angle);

vardraw =true;

for(vari = 0; i < heart.length; i++) {

varp = heart[i];

vardistance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));

if(distance < Garden.options.bloomRadius.max * 1.3) {

draw =false;

break;

}

}

if(draw) {

heart.push(bloom);

garden.createRandomBloom(bloom[0], bloom[1]);

}

if(angle >= 30) {

clearInterval(animationTimer);

showMessages();

}else{

angle += 0.2;

}

}, interval);

}

(function($) {

$.fn.typewriter =function() {

this.each(function() {

var$ele = $(this), str = $ele.html(), progress = 0;

$ele.html('');

vartimer = setInterval(function() {

varcurrent = str.substr(progress, 1);

if(current =='<') {

progress = str.indexOf('>', progress) + 1;

}else{

progress++;

}

$ele.html(str.substring(0, progress) + (progress & 1 ?'_':''));

if(progress >= str.length) {

clearInterval(timer);

}

}, 75);

});

returnthis;

};

})(jQuery);

functiontimeElapse(date){

varcurrent = Date();

varseconds = (Date.parse(current) - Date.parse(date)) / 1000;

vardays = Math.floor(seconds / (3600 * 24));

seconds = seconds % (3600 * 24);

varhours = Math.floor(seconds / 3600);

if(hours < 10) {

hours ="0"+ hours;

}

seconds = seconds % 3600;

varminutes = Math.floor(seconds / 60);

if(minutes < 10) {

minutes ="0"+ minutes;

}

seconds = seconds % 60;

if(seconds < 10) {

seconds ="0"+ seconds;

}

varresult =""+ days +" days "+ hours +" hours "+ minutes +" minutes "+ seconds +" seconds";

$("#elapseClock").html(result);

}

functionshowMessages() {

adjustWordsPosition();

$('#messages').fadeIn(5000,function() {

showLoveU();

});

}

functionadjustWordsPosition() {

$('#words').css("position","absolute");

$('#words').css("top", $("#garden").position().top + 195);

$('#words').css("left", $("#garden").position().left + 70);

}

functionadjustCodePosition() {

$('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);

}

functionshowLoveU() {

$('#loveu').fadeIn(3000);

}

3,关于学习:前端开发的技术,主要靠自学应该,可能有些大学开的课有相关方面的课程,但新技术还是要自己去学习。另外,知识学的好,不如东西做的好,要多练习多多练习多总结经验,做出来东西摆出来让别人看,且看着是那个样,看着舒服,才是王道,而你懂的多,但就是动手能力不行,让你做个东西,做半天做不出来,那别人会怎么想,可想而知。

4. 关于代码编写:建议初学者脱离可视化编辑器(推荐sublime text),练习手写代码能力,这样看似麻烦,笨拙,但坚持下去,真正到你进行设计时就会体会到其中甜头。手写代码,对于你对代码的理解是很有帮助的,同时也会便于编写更具有语义的代码。

5.关于学习方法:自己不理解的实在想不明白就百度一下,或者到各大论坛去提问,请高手帮你解决,不要不好意思,当然去的时候尽量提些有技术含量的问题,基础知识不懂了就去翻翻书。要经常逛论坛,向高手学习经验,推荐蓝色理想,有机会大家可以去看看,里面高手很多。

关于,参考书籍,我个人认为,应该选择国外经典著作,毕竟国内目前状况还处在web标准化起始阶段,推荐《精通css与html设计模式》、《web编程入门经典:html、xtml和css》、《html与xtml权威指南》、《css权威指南》、《JavaScript权威指南》。需要指明的是,目前国内图书市、场这方面的书比较多,建议大家不要盲、目购买,最好读一读国外设计师的经、典著作,更重要的人家写的都是比较有条理,循序渐进。如果能读懂原著,最好看原著,看不懂的就看翻译过的也好。

如果你你热爱WEB前端,热爱这个行业就应该持续走下去,如果你看到这里欢迎一起来学习交流617327703还有大神解答问题分享学习资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,764评论 0 1
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,418评论 1 19
  • “生活还要继续!”是我高中最喜欢的一句话,因为这句话,在我卑微迷茫的日子里给了我力量,指引我方向,激励我前进。 生...
    林中小狼阅读 376评论 1 3
  • 在微博上常年出现的“10大悬疑片推荐”或者“让你猜不到结局的x部电影”里,通常都会出现诺兰的某几部作品。这位尚属年...
    魔鬼的赞歌阅读 793评论 10 13
  • 泪水打落轻朝露珠 打磨的蹭亮的屋瓦 光影只遍旷野,留宿于屋檐 躺尸的张弛的弓 画不出圆的轮廓 折起的挣脱不开的信纸...
    一葳阅读 329评论 0 3