[CSS/HTML] งานตัด CSS/HTML notramap.com

nostramap.com
nostramap.com

งานนี้รับมาจาก www.designil.com โดยราละเอียดงานเป็นการตัดหน้า html + css โดยรับรายละเอียดงานว่าให้รูปที่ออกแบบจาก Photoshop มาแล้วตัดให้เป็นเว็บแบบ static ก่อนที่ทาง designil จะเอาไปทำเป็น Theme ต่อเข้ากับ wordpress บทความเขียนไว้บอกตัวเองและเป็นผลงานไว้ว่าบรีฟกันยังไง ตัดแบบไหน ใช้ framework อะไรครับ

โปรแกรมที่จำเป็นต้องใช้ ตัด css

  • photoshop สำหรับเปิดงานจากทาง Design ที่ส่งให้เราแล้วจะสามารถดูจุดต่างๆได้ บางทีอาจจะส่งเป็นภาพอย่างเดียว ถ้าดีหน่อยก็จะส่งเป็น psd โดยเราจะได้รู้ว่า font อะไรยังไง
  • sublime text 2 สำหรับเขียน html/css ง่าย สะดวก เร็ว
  • framework ที่ใช้คือ foundation
  • wow.js สำหรับ animate ง่ายๆและเข้าใจง่าย

ระยะเวลาทำงาน

มีกำหนดระยะให้ตัด 10 วัน งาน 14 หน้าถือว่าให้เยอะพอสมควร เพราะงานนี้ผมเป็นมือใหม่ด้วย จึงได้คำแนะนำจากทาง designil ซะเยอะมาก ก็มีปรับแก้ไปเรื่อยๆด้วย ก็ส่งมอบงานกันได้แบบสบายๆ

รายละเอียดงานตัด css

หลายๆคนคงมีคำถามว่าทำไมใช้ foundation ไม่ใช่ Bootstrap เหตุผลหลักๆเลยคือ งานนี้ต้องใช้ Off-canvas menu หรือเมนู Hamburger ที่เวลาเราเปิดมือถือจะเป็นเมนูครับดังภาพข้างล่าง

nostramap-off-canvas-menu
nostramap-off-canvas-menu
nostramap-off-canvas-menu
nostramap-off-canvas-menu

อย่างที่เห็นครับก็ถือว่ามันรองรับมากับตัว core ของ framework เลยถ้าเป็น bootstrap เราอาจจะต้องไปหาส่วนเสริมหรือเพิ่มเติมเอง อีกอย่างผมว่าระบบ grid ของ foundation มันดูไม่ยุ่งยากหลายชั้นเท่ากับตัว bootstrap ด้วยแต่ผมก็ชอบทั้งคู่นะครับได้ลองอะไรใหม่ๆด้วย

งานตอนแรกก็คุยงานและก็ตกลงเครื่องมือเสร็จแล้วก็เขียน html เลยแต่ก็มีต้องเพิ่มเติม class เข้าไปเองบ้างไม่ใช่ใช้ framework ทั้งหมด

สรุป

งานนี้สนุกและได้รู้จักเครื่องมือใหม่ๆเยอะเหมือนกัน ถ้าหากต้องการจ้างงานด้านนี้สามารถติดต่อผมได้จากเมนูเลยครับ

Credit

สกิลการตัด css/html ผมบอกตรงๆเลยนะครับเนื่องจากผมได้ไปเป็นผู้ช่วยฝึกสอนงาน Designil บ่อยๆ จึงได้สกิลด้านนี้มาโดยปริยายฟังบ่อยๆ สอนบ่อยๆ สามารถติดตามได้ผมจะเขียนสรุปงานช่วยฝึกสอนเรื่อยๆครับ เพราะฉะนั้นใครอยากหาเงินด้านนี้ไปเรียนได้ที่คอร์สนี้เลย

http://school.designil.com/

หากใครชอบงาน Design สวยๆอย่างเว็บ nostramap.com สามารถติดต่อ Designer ได้ทางนี้ครับ

https://dribbble.com/dxnat

คุณอาจจะชอบบทความเหล่านี้

ฟรีแลนซ์ ยังไง? ตอนเครื่องมือช่วยชีวิต... วันนี้ผมไป Event ฟรีแลนซ์ ยังไง? ตอนเครื่องมือช่วยชีวิต ที่ pah space เป็นบอกเล่าเกี่ยวกับหากเราจะทำงานแบบ Freelance เราต้องเตรียมตัวอย่างไรบ้าง อ...
How to create wordpress theme by yourself part2 How to create wordpress theme by yourself part2 มาต่อกันเลยกับ how to create wordpress theme by yourself part 2 จากคราวที่แล้วเราได้กล่าวถึงว่าทำม๊...
ผู้ช่วยฝึกสอนคอร์ส Responsive for Designers and De... งานนี้ได้ไปช่วยฝึกสอนสำหรับคอร์ส Responsive for Designers and Developers at BJC โดยได้รับการเสนอมาจาก Designil.com ให้ช่วยเหลือผู้อบรมถ้ามีปัญหาหรือ ม...

ชอบเนื้อหาแบบนี้ไหมครับ ?

ถ้าชอบอย่าลืมติดตามง่ายๆด้วยการกรอกอีเมลของคุณในช่องด้านล่าง ผมจะส่งบทความดีๆเกี่ยวกับ programming, event, lifestyle ต่างๆมาสรุปให้แก่คุณก่อนใคร และยังมีกิจกรรมดีๆ ซึ่งคุณจะไม่พลาดทุกการเคลื่อนไหวอย่างแน่นอน

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th