[HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

วันนี้ไปเปิดเจอ Slide ของคุณ Chris Coyier เจ้าของเว็บ CSS-Tricks ได้พูดไว้ในหัวข้อ What We Don’t Know เลยเอามาแชร์ให้ได้อ่าน ได้ดูกันนะครับ >_<

ตามไปอ่านบทความเต็ม ๆ ได้ที่ My Slides from InControl 2012: What We Don’t Know

อยากเรียน Web Design ฟรี ดูใน iTunes ดิ

ใน iTunes นั้นจะมีส่วนของ Podcasts ซึ่งมีหลายเรื่องที่เราสนใจไว้ให้ได้ดู ได้ฟังแบบฟรีบ้าง เสียเงินบ้าง แต่เรามาหาแบบฟรีกันดีกว่า ลองไปดูว่ามีอันไหนบ้าง

Think Vitamin Radio

View in iTunes : Think Vitamin Radio

Web Designer Podcast

View in iTunes : Web Designer Podcast

Web Design TV

View in iTunes : Web Design TV

Sitepoint

View in iTunes : Sitepoint

This Week in Photography

View in iTunes : This Week in Photography

Web Design Tuts+

View in iTunes : Web Design Tuts+

Photoshop Webdesign.de

View in iTunes : Photoshop Webdesign.de

WebDevDesign

View in iTunes : WebDevDesign

Freelance Radio

View in iTunes : Freelance Radio

Mac Tips and Tricks

View in iTunes : Mac Tips and Tricks

MailChimp Academy

View in iTunes : MailChimp Academy

37signals Podcast

View in iTunes : 37signals Podcast

AppClinic – graphic design tutorials

View in iTunes : AppClinic – graphic design tutorials

Founders Talk

View in iTunes : Founders Talk

Web Design 101

View in iTunes : Web Design 101

CreativeXpert Design Interviews

View in iTunes : CreativeXpert Design Interviews

Voices of Design

View in iTunes : Voices of Design

Xcode Quick Tips

View in iTunes : Xcode Quick Tips

jQuery for Designers

View in iTunes : jQuery for Designers

Facebook 101

View in iTunes : Facebook 101

CSS-Tricks Screencast

View in iTunes : CSS-Tricks Screencast

Pragmatic Podcasts

View in iTunes : Pragmatic Podcasts

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย

ไม่รู้ว่าหลาย ๆ คนเป็นเหมือนผมหรือเปล่า แต่ผมเนี่ยโคตรขี้เกียจจะเขียน Code HTML ที่มันเกี่ยวกับ Form ยังไงก็ไม่รู้บอกไม่ถูก เวลาตัดเว็บแล้วเจอ Form เนี่ยจะตัดช้าลงไปอย่างไม่น่าเชื่อ แล้วผมก็ไปเจอเว็บนี้ FormBakery ลองไปดูว่า FormBakery มันทำอะไรเกี่ยวกับ Form ให้เรานะครับ

FormBakery

มาเริ่มต้นอบ Form จากเตากัน จะเห็นมีส่วนผสม 5 อย่างให้เราเลือก

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [1]

เราอยากได้ส่วนผสมไหน ก็ลากมาวางเลยครับ

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [2]

เราสามารถปรับเปลี่ยนข้อความต่าง ๆ รวมถึง options ให้กับส่วนผสมเราได้

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [3]

หลังจากที่ปรับแต่งจนเราพอใจแล้ว ก็กด Export เลยครับ

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [4]

เราจะได้ Code HTML CSS ออกมาให้ใช้งานแล้วครับ

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [5]

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [6]

แต่ถ้าเป็นส่วนของ javascript และ php นั้นเราต้องจ่ายเงินเพิ่ม เพื่อที่จะรับ Code ในส่วนนั้น

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [7]

แต่สำหรับผม ผมต้องการแค่ HTML CSS ดังนั้น FormBakery ก็ช่วยในสิ่งที่ผมต้องการครบแล้ว

ถ้าอยากจะไปลองอบ Form ของตัวเองดู ก็ไปที่ : FormBakery เลยครับ

[HTML] : HTML Ipsum

ในการทำเว็บ เชื่อว่าหลาย ๆ คนต้องรู้จักกับ Lorem Ipsum ถ้าใครยังไม่รู้จักก็ไปดูที่นี่เลยครับ lipsum.com ให้เปรียบเทียบ Lorem Ipsum ก็เหมือนกับข้อความตัวอย่างแบบนี้ครับ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, dolor sit amet tincidunt iaculis, lacus est rutrum nibh, at dapibus felis leo sit amet ipsum. In blandit blandit neque non laoreet. Pellentesque eleifend mollis lectus vitae aliquam. Proin diam augue, ultricies vitae viverra sed, aliquet sit amet leo. Fusce sem turpis, eleifend non cursus id, condimentum quis nulla. Nam consectetur feugiat enim, aliquet fermentum quam consectetur eget. In placerat aliquet ipsum, in dictum nisi dapibus ut. Pellentesque nisl mi, tempus non convallis non, porttitor eget neque. Vestibulum pulvinar facilisis diam volutpat volutpat. Nunc adipiscing, quam et tincidunt aliquet, orci velit posuere nisl, a eleifend orci ligula non ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sodales, urna at sollicitudin vulputate, velit neque aliquam lacus, ac ornare enim sapien nec quam. Nulla dignissim ullamcorper lacus, eget varius metus scelerisque nec. Sed iaculis sodales gravida. Sed aliquam, erat eget semper viverra, sapien urna semper tellus, et suscipit enim nisi ut nisl.

สำหรับเว็บ lipsum.com นั้น เราก็จะได้เพียงข้อความมาใช้ในเว็บ แต่ผมจะแนะนำอีกเว็บนึงครับนั่นคือ HTML Ipsum

HTML Ipsum

สำหรับเว็บ HTML Ipsum นั้น ก็จะมี code สำหรับใช้เป็นตัวอย่าง อย่างเช่น form ตัวอย่าง

[html]
<form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>

<div>
<h4>Radio Button Choice</h4>

<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
</div>

<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>

<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</div>

<div>
<input type="submit" value="Submit" />
</div>
</form>
[/html]

หรือแค่ list ตัวอย่าง

[html]
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
[/html]

ถ้าสนใจลองเข้าไปในเว็บ HTML Ipsum เลยครับ

ที่มา : HTML Ipsum

วิดีโอสอนพื้นฐานของ HTML CSS Javascript จาก Google

ในการจะเรียนรู้ HTML CSS นั้น ผมคิดว่าในตอนนี้ไม่น่าจะเป็นเรื่องยากแล้ว เพราะมีข้อมูลความรู้มากมายในอินเตอร์เน็ตให้เราค้นหา ให้เราศึกษา และนี่ก็เป็น 1 ในนั้น มันคือ วิดีโอที่ทาง Google ได้ทำขึ้นเพื่อสอนพื้นฐานของ HTML CSS Javascript เรามาดูกันเลยดีกว่าครับ

แนะนำให้รู้จัก HTML CSS Javascript

HTML

แนะนำให้รู้จัก HTML

แบบฝึกหัดในหัวข้อ HTML

CSS

แนะนำให้รู้จัก CSS

สอนใช้ CSS เบื้องต้น

แบบฝึกหัดในหัวข้อ CSS

JavaScript

แนะนำให้รู้จัก JavaScript

แบบฝึกหัดในหัวข้อ JavaScript

HTML CSS เนี่ยผมว่าไม่ยากที่จะเรียนรู้หรอกครับ อย่าคิดว่ามันยาก ถ้ายังไม่ได้เริ่มที่จะเรียนรู้มันนะครับ ^^