網頁開發和設計是兩個偉大的技能，因為他們允許你從任何地方工作，創造驚人的，美麗的網站和應用程式。儘管如此，當你不知道該做什麼的時候就很難開始了。我們可以用這十大技巧和工具來幫助你。

10.接受教育

如果你不懂基礎知識，技巧和工具就沒用了。如果你還在為程式設計和設計的最初概念而掙扎，我們有一些經驗可以幫助你。為了開始web開發，我們的tl80 Night School系列可以教您HTML和CSS以及JavaScript，其中幾乎涵蓋了基礎知識。我們也有Photoshop課程，可以教你如何模擬網站佈局。我們還有一堂關於色彩理論的基礎課。要學習更多的設計技巧，請檢視以下資源列表。它將幫助你獲得靈感，並找到學習更多基礎知識的方法。如果你想瞭解更多，可以去程式碼學院學習更多的程式設計課程。當您準備好從頭到尾執行您的第一個編碼專案時，請務必閱讀以下內容。

9.建立字型庫

選擇正確的字型可以決定一個偉大的設計。我的意思是，想象一下用漫畫來代替每一個Helvetica Neue的例子。對嗎？對嗎？不管你是否有字型知識或你不知道你的襯線從你的無襯線字型，你總是可以受益於一個好的字型收集。我最喜歡的資源是DaFont，但這隻是其中之一。FontPark提供超過70000種免費字型，你的字型甚至可以讓你自己**。要找到更多的免費字型，請檢視我們的字型標簽頁。

8.使用假工具

Lorem ipsum悲哀地坐在amet，奉獻著一位精英。夥計，我可以繼續用這個Lorem Ipsum文字生成器為頁面編寫天才素材。如果你不熟悉，Lorem Ipsum（簡稱Lipsum）是許多設計師和開發人員用來為他們的設計生成假佔位符文字的工具。當你為網頁、雜誌或其他有大量文字的版面設計時，你不一定有實際的內容。Lipsum生成器為您提供佔位符文字，用於在缺少時填充標題、句子和/或段落。但你不必依賴標準的東西。有許多種類的Lipsum發生器，如紙杯蛋糕Ipsum。熊爪糖李子甜捲。芝麻鬆糕鬆糕鬆糕甜燕麥餅鬆糕棒棒糖檸檬滴！

文字不是為設計生成的唯一內容。如果你沒有影象怎麼辦？虛擬影象生成器基本上是影象的Lipsum等價物。你只要輸入一個大小，它就會彈出一個佔位符。這在設計和開發過程中都非常方便。

7.偷竊

你知道沒有原創的想法，一切都是混音嗎？不要覺得你必須想出一個從來沒有人見過的設計或原始程式碼時，有大量現有的程式碼片段免費提供在網上，你可以使用你喜歡的。偉大的想法來自於建立在別人想法的基礎上，所以請隨意偷一點。顯然，你不想逐字複製任何人的想法或未經允許使用任何東西，但你可以從別人的作品中獲得很多靈感，並借用他們所做的小事，使你的設計看起來很棒，使你的程式碼更加強大和高效。我喜歡Snipt尋找程式碼片段。說到設計，你只需要瀏覽網頁。Pinterest正迅速成為釋出優秀設計示例的大型資源，但您不必再深入研究tl80社群。我們有許多設計師在我們中間，最近我們推出了一些與技巧，你可以從他們的過程中學習登陸頁。看看有沒有值得“偷”的技術或想法

6.拉皮條

對於大多數網頁設計師來說，Photoshop是一個必不可少的工具。它有很多功能，但是你可以透過新增新的動作、畫筆、形狀等等來擴充套件它的功能。動作基本上是Photoshop的巨集，允許你自動執行那些你不想“手工”完成的繁瑣任務。這裡有100個現有的Photoshop動作來擴充套件你的集合，但是如果你需要一些特定的東西，你可以自己建立。

擴充套件形狀和筆刷集合還可以為您提供新的選項。形狀給你向量影象，你可以在你的設計中使用，畫筆會讓你畫各種各樣的物件和風格。這個最終的形狀集合應該給你一個好的開始，但你會很快發現，如果你在網上搜索“Photoshop形狀”和你要找的任何型別的形狀（從一個好的選項集剪影開始），你會找到一些好的選擇。你會發現Photoshop畫筆的數量更加豐富。就拿這本2000年的收藏品來說吧。畫筆可以讓你畫形狀，模擬真實的畫筆，甚至建立有趣的效果。也很容易建立自己的。

5.使用css生成器快速直觀地生成複雜的css程式碼

CSS3生成器、css3maker和CSS3 Border Radius生成器都是很好的例子，說明瞭如何生成您經常忘記的更複雜的CSS程式碼。陰影、動畫和圓角是非常酷的效果，你有時會想使用它們，但由於你使用它們的頻率較低，而且它們比你的一般風格需要更多的努力，因此有一個生成器可以幫助你方便地建立程式碼。在編寫程式碼時，瞭解自己在做什麼以及理解生成器中的程式碼是很重要的，但是當您很忙或者記不清確切的語法時，您可以節省一點時間。這裡有很多你可以新增到你的兵工廠。

4.下載免費資源

當你不得不自己拍照，自己畫畫，從頭開始創造幾乎所有的東西時，設計可能會很困難。有時候，當你需要在佈局中新增帶有介面元素的iphone4s時，最好能得到一些幫助。網際網路上充斥著大量免費和可用的Photoshop現成的資源，以幫助您提高您的設計，而不需要投入額外的工作時間。以這30款免費小工具psd為例。大多數時候，你所要做的就是搜尋你想要的東西。也就是說，你可以在psdGraphics、Noun Project、designkindle和PSD Collector等網站上找到大量優秀的影象、背景、圖示等。DeviantART也是一個很好的資源。一些資產將需要歸屬，而其他資產只是為了您的利益而提供，不需要回報。你不想過度使用這些偉大的資源，但它們可以非常有用的時候，在正確的方式利用。

3.獲得一個很好的程式設計友好的文字編輯器

就像Photoshop是網頁設計師不可或缺的工具一樣，一個優秀的程式設計友好型文字編輯器對程式設計師也是如此。我們有Windows和OSX的最愛，所以如果你想找一些好的選擇，一定要看看這些。您可能還想檢視我們最喜歡的文字擴充套件應用程式，這樣您就可以儲存您最喜歡的程式碼片段，只需幾次按鍵即可將它們**到您的程式碼中。

2.瞭解你的網站在不同的螢幕和瀏覽器上的外觀

當你是唯一一個瀏覽網站的人時，為網站設計就足夠簡單了。然而，當它在網上直播時，它將顯示在各種不同的web瀏覽器中的所有形狀和大小的螢幕上。部署之前，您將要測試並確保事情看起來像您想要的那樣。螢幕飛可以顯示你的網站將如何在不同的顯示。Browsershots將讓您看到在Windows、OS X和Linux上執行的許多不同瀏覽器如何渲染站點。你所要做的就是選擇你想要的瀏覽器，等待螢幕截圖出現。它可能不如在實際計算機上測試站點那麼高效，但它肯定要便宜得多。

1.使用框架

框架可以使開發甚至設計過程更快。這是因為大多數web專案在建立方式上並不是特別獨特。就像你最終會在網路上竊取一些小想法和程式碼片段一樣，你最終也會借用那些長期以來一直是標準的概念和原則。框架讓您利用這一點，它將大量的精力從標準程式碼中提取出來。這可以節省時間，也可以節省很多頭痛，而這些頭痛往往伴隨著從頭開始的繁瑣過程。

那麼你應該使用什麼樣的框架呢？在開發方面，Blueprint非常適合CSS佈局，Ruby-On-Rails適合Ruby程式設計師，Zend和CakePHP適合PHP開發人員，Django適合Python程式設計師。在關於設計的對話中，你通常不會聽到“框架”這個詞，但是這個想法還是可以翻譯的。網格系統和960網格是兩個很好的例子。如果您想透過遵循多年來行之有效的原則來節省一點時間，請檢視一個框架。它將幫助您堅持最佳實踐，而且您不會後悔。

有這麼多偉大的資源在那裡，很難保持名單上只有10項。更多資訊，請檢視Kuler、貼上HTML、剋服創造性塊、Behance、Forrst、UI工具包、What The Font和Wirify。如果您有任何其他提示和工具，您想新增，請分享他們的評論！