Μάθετε HTML και CSS με αυτά τα Βήμα-Βήμα Tutorials

Περιέργεια για HTML, CSS και JavaScript; Αν νομίζετε ότι έχετε ένα πλεονέκτημα για να μάθετε πώς να δημιουργείτε ιστοσελίδες από το μηδέν - εδώ είναι μερικά μεγάλα βήμα-βήμα tutorials που αξίζει να δοκιμάσετε.

Περιέργεια για HTML, CSS και JavaScript;  Αν νομίζετε ότι έχετε ένα πλεονέκτημα για να μάθετε πώς να δημιουργείτε ιστοσελίδες από το μηδέν - εδώ είναι μερικά μεγάλα βήμα-βήμα tutorials που αξίζει να δοκιμάσετε.
Διαφήμιση

Όταν αισθάνεστε φαγούρα για να δοκιμάσετε το χέρι σας με τον κώδικα, απλά δεν υπάρχει όριο στον αριθμό των σεμιναρίων, των βίντεο και των online μαθημάτων που μπορείτε να δοκιμάσετε. Αλλά μερικές φορές, ο καλύτερος τρόπος για να μάθετε κάτι είναι με την κατάδυση και την προσπάθεια από πρώτο χέρι. Η ανάπτυξη ιστού δεν είναι διαφορετική.

Αν είστε περίεργοι για το HTML, το CSS και το JavaScript ή νομίζετε ότι μπορεί να έχετε την ικανότητα να μάθετε πώς να δημιουργείτε ιστοσελίδες από το μηδέν - υπάρχουν μερικά μεγάλα tutorials βήμα προς βήμα που αξίζει να δοκιμάσετε.

Η ακόλουθη λίστα με τα μαθήματα θα σας καθοδηγήσει στα βασικά του HTML και του CSS και θα σας δώσει ακόμη μια εισαγωγή στον περίπλοκο κόσμο που είναι το JavaScript Τι είναι το JavaScript και μπορεί να υπάρχει το Διαδίκτυο χωρίς αυτό; Τι είναι το JavaScript, και μπορεί το Διαδίκτυο να υπάρχει χωρίς αυτό; Το JavaScript είναι ένα από αυτά που πολλοί θεωρούν δεδομένους. Όλοι το χρησιμοποιούν. Διαβάστε περισσότερα - τουλάχιστον όσον αφορά τους αρχάριους. Αλλά αυτό που δεν θα κάνουν είναι να σας προετοιμάσει για μια ζωή ως προγραμματιστή ακριβώς έξω από το κουτί. Οι περισσότερες από αυτές τις υπηρεσίες είναι απλά ένα εύκολο μέρος για να ξεκινήσετε.

Θα χρειαστεί πολύ περισσότερο από αυτό να ξεκινήσετε την ανάπτυξη ιστοσελίδων επαγγελματικά. Αυτά τα εργαλεία, τα περισσότερα από τα οποία είναι δωρεάν, σας δίνουν τα βασικά δομικά στοιχεία για την ανάπτυξη ιστοσελίδων και θα σας διευκολύνουν να βουτήξετε στα πιο περίπλοκα μαθήματα.

Γενική συνέλευση της Γενικής Συνέλευσης

Οι άνθρωποι στη Γενική Συνέλευση έχουν ένα δωρεάν εργαλείο που σας διδάσκει τα βασικά του HTML, CSS και JavaScript και είναι το ιδανικό μέρος για να ξεκινήσετε απόλυτα αρχάριους. Μέσα από μια σειρά πέντε έργων, θα μάθετε την ορολογία και τις βασικές δεξιότητες κωδικοποίησης που σας επιτρέπουν να δημιουργήσετε έναν ιστότοπο που μοιάζει με μια σελίδα about.me, πώς να δημιουργήσετε ένα ανταποκρινόμενο blog και έναν ιστότοπο εστιατορίου.

Dash1

Τα μαθήματα Dash υπερβαίνουν την εκμάθηση πώς να δημιουργήσετε απλούς ιστότοπους, μπορείτε επίσης να αξιοποιήσετε τη δύναμη του HTML, CSS και JavaScript για να δημιουργήσετε ένα ρομπότ χρησιμοποιώντας σχήματα και γραμμές ή ακόμα και ένα παιχνίδι Mad Libs.

Τα μαθήματα Dash κινούνται με έναν λογικό ρυθμό, που σας μεταφέρει σε κάθε βήμα μερικές γραμμές κώδικα κάθε φορά. Όπως και με κάθε φροντιστήριο, θα συνιστούσα να λαμβάνετε σημειώσεις καθώς δουλεύετε. Αυτό θα σας βοηθήσει να απομνημονεύσετε τα διάφορα εργαλεία που μαθαίνετε και με τα μαθήματα της Γενικής Συνέλευσης, αφού ολοκληρώσετε μια φάση, δεν φαίνεται να υπάρχει τρόπος να το επαναλάβετε.

Dash2

Συμπέρασμα : Η χρήση του Dash θα σας καθοδηγήσει με όλες τις γνώσεις που χρειάζεστε για να βάλετε μαζί έναν βασικό σύγχρονο ιστότοπο - από τη ναυσιπλοΐα, στον αποκρινόμενο σχεδιασμό. Μπορείτε ακόμη και να εισαγάγει τα βασικά του πώς να δημιουργήσετε ένα προσαρμοσμένο θέμα Tumblr. Τούτου λεχθέντος, υπάρχουν μόνο συνολικά τέσσερα μαθήματα στο Dash. Ενώ μπορείτε να πάρετε τις έννοιες που έχετε μάθει και να προσπαθήσετε να τις εφαρμόσετε με διαφορετικούς τρόπους, θα πρέπει να συμπληρώσετε τις γνώσεις σας με άλλα μαθήματα που περιλαμβάνονται σε αυτή τη λίστα.

Codecademy

Η Codecademy ήταν πολύ πιο μακριά από τον Dash και συχνά προσθέτει νέα μαθήματα στις προσφορές του. Με τα ίδια βήμα βήμα-βήμα όλα τα μαθήματα που θα βρείτε στο Dash, Codecademy πηγαίνει ένα βήμα παραπέρα, δίνοντας στους χρήστες μια γενική επισκόπηση της δημιουργίας ενός δικτυακού τόπου με HTML και CSS, αλλά παρέχει επίσης σε βάθος tutorials στις διάφορες γλώσσες, HTML, CSS και JavaScript.

Όπως και άλλες υπηρεσίες, το Codecademy σας δείχνει πώς μπορείτε να δημιουργήσετε ένα μενού πλοήγησης, να προσθέσετε εικόνες φόντου, να φτιάξετε μια γκαλερί εικόνων ή ακόμα και μια σελίδα εγγραφής. (Για να προσθέσετε λειτουργικότητα στη σελίδα εγγραφής, βεβαιωθείτε ότι έχετε περάσει από το φροντιστήριο του Ruby on Rails.)

codecademy1

Υπάρχουν επίσης αφιερωμένα μαθήματα για το jQuery Δημιουργώντας το Διαδραστικό Ιστού: Εισαγωγή στο jQuery Δημιουργώντας το Διαδραστικό Ιστού: Εισαγωγή Το jQuery jQuery είναι μια βιβλιοθήκη scripting από την πλευρά του πελάτη που χρησιμοποιεί σχεδόν κάθε σύγχρονη ιστοσελίδα - κάνει ιστοσελίδες διαδραστικό. Δεν είναι η μόνη βιβλιοθήκη Javascript, αλλά είναι η πιο ανεπτυγμένη, η πιο υποστηριζόμενη και η πιο διαδεδομένη .... Read More, μια βασική γλώσσα που κάνει πολύ πιο εύκολη την εκμάθηση της JavaScript. Εάν είστε περίεργοι για την ανάπτυξη backend, υπάρχουν επίσης σε βάθος μαθήματα για Ruby, Python, PHP και πολλά άλλα.

Εκτός από την εκμάθηση πώς να σχεδιάσετε έναν ιστότοπο και να καταδύεστε στις περιπλοκές των γλωσσών προγραμματισμού 7 Χρήσιμα κόλπα για την αποκωδικοποίηση μιας νέας γλώσσας προγραμματισμού 7 Χρήσιμα τεχνάσματα για την κατοχύρωση μιας νέας γλώσσας προγραμματισμού Είναι εντάξει να είστε συγκλονισμένοι όταν μαθαίνετε να κωδικοποιείτε. Ίσως θα ξεχάσετε τα πράγματα τόσο γρήγορα όσο τα μαθαίνετε. Αυτές οι συμβουλές μπορούν να σας βοηθήσουν να διατηρήσετε καλύτερα όλες αυτές τις νέες πληροφορίες. Διαβάστε περισσότερα, μπορείτε επίσης να χρησιμοποιήσετε το Codecademy για να βρείτε τα βασικά στοιχεία σχετικά με τον τρόπο δημιουργίας εφαρμογών ιστού και τον τρόπο προσθήκης της σύνδεσης, της σύνδεσης και της αποσύνδεσης στον ιστότοπό σας.

Codecademy2

Συμπέρασμα : Όπως η Dash, η αλληλεπίδραση της Codecademy είναι ανεκτίμητη. Η ικανότητα να βλέπετε πώς υλοποιείται κάθε βήμα στον ιστότοπό σας είναι ενθαρρυντική και η ρύθμιση καθιστά επίσης εύκολο να εντοπίσετε λάθη. Εάν είστε ένας πλήρης αρχάριος, Codecademy είναι ένα εξαιρετικό μέρος για να πάρετε τα δάχτυλα των ποδιών σας υγρό και να αποφασίσει εάν η κωδικοποίηση και το σχεδιασμό ιστοσελίδων είναι το σωστό κατάλληλο για εσάς. Με αυτή την εμπειρία, μπορείτε να πάρετε αυτές τις γνώσεις σε μια πληρωμένη πορεία ή τάξη.

Tuts +

Το Tutsplus.com είναι ένας ιστότοπος γεμάτος με μαθήματα (δωρεάν και πληρωμένα) σε μια ευρεία ποικιλία θεμάτων, συμπεριλαμβανομένων των οτιδήποτε από την κινητή σχεδίαση μιας εφαρμογής καινοτομίας; 7 Mobile Blogs Ανάπτυξης πρέπει να διαβάσετε Σχεδιάζοντας μια σημαντική ανακάλυψη; 7 Mobile Blogs Ανάπτυξης πρέπει να διαβάσετε Ο κινητός χώρος είναι τόσο καινούργιος ώστε οι τάσεις μεταβάλλονται συνεχώς και γίνονται νέες γνώσεις κάθε μέρα. Εάν σχεδιάζετε να αναπτύξετε εφαρμογές για κινητά, πώς μπορείτε να συνεχίσετε χωρίς να τρέξετε; Διαβάστε περισσότερα και ανάπτυξη παιχνιδιών 4 Δωρεάν ιστοσελίδες από όπου μπορείτε να μάθετε τα βασικά της ανάπτυξης παιχνιδιών 4 Δωρεάν ιστοσελίδες από όπου μπορείτε να μάθετε τα βασικά της ανάπτυξης παιχνιδιών Όταν ψάχνετε για μια καλή σειρά παιχνιδιών ανάπτυξης παιχνιδιών, θέλετε ένα που θα σας διδάξει τις πρακτικές και τη νοοτροπία της καλής κωδικοποίησης επειδή μπορείτε στη συνέχεια να μεταφέρετε αυτές τις πρακτικές σε οποιαδήποτε γλώσσα ή πλατφόρμα. Διαβάστε περισσότερα για τη θεωρία των χρωμάτων Πώς να μάθουν τη θεωρία των χρωμάτων σε λιγότερο από μία ώρα Πώς να μάθουν τη θεωρία των χρωμάτων σε λιγότερο από μία ώρα Βασικές γνώσεις της θεωρίας χρωμάτων μπορεί να σημαίνουν τη διαφορά ανάμεσα σε μια «ερασιτεχνική» αισθητική και μια «επαγγελματική» - δεν χρειάζεται πολύ για να μάθει. Διαβάστε περισσότερα και πώς να χρησιμοποιήσετε το Adobe Illustrator Διδάξτε τον εαυτό σας Το Adobe Illustrator δωρεάν διδάσκει τον εαυτό σας Adobe Illustrator δωρεάν Το Adobe Illustrator είναι από καιρό το εργαλείο επιλογής για τους καλλιτέχνες γραφικών. Είστε έτοιμοι να ζωντανέψετε τα σχέδιά σας; Δείτε πώς μπορείτε να μάθετε δωρεάν το Adobe Illustrator. Διαβάστε περισσότερα . Αν και δεν είναι όλα τα μαθήματα που διδάσκονται στον ιστότοπο ακολουθήστε το βήμα προς βήμα μοντέλο, υπάρχουν μερικοί που ακολουθούν αυτή την προσέγγιση και περπατούν οι χρήστες μέσω εύκολης διαδικτυακής ανάπτυξης.

TutsPlus1

Ένα ιδιαίτερα χρήσιμο σεμινάριο σας περιγράφει τα βήματα για να σχεδιάσετε και να κωδικοποιήσετε τον ιστότοπό σας. Το σεμινάριο παραδόξως χρονολογείται από το 2009, οπότε η αισθητική του σχεδιασμού μπορεί να μην σας απευθύνει έκκληση, αλλά αυτό είπε ότι το σεμινάριο σας διδάσκει τις δεξιότητες που απαιτούνται για τον σχεδιασμό του ιστότοπού σας και στη συνέχεια μπορείτε να εφαρμόσετε αυτές τις δεξιότητες σε ένα πιο ενημερωμένο σχέδιο. Μια άλλη προειδοποίηση που αξίζει να αναφερθεί με αυτό το σεμινάριο είναι ότι απαιτεί τη χρήση του Adobe Photoshop. Αν δεν έχετε πρόσβαση στο λογισμικό, μπορείτε πάντα να επιλέξετε την επιλογή του Adobe Creative Cloud έναντι αμοιβής $ 50 το μήνα.

Το σεμινάριο σας καθοδηγεί στο σχεδιασμό μιας βασικής ιστοσελίδας δύο στηλών με μια κεφαλίδα και ένα υποσέλιδο. Ο ιστότοπος περιλαμβάνει περιεχόμενο, γραμμή πλοήγησης, κουμπιά κοινωνικών μέσων και πολλά άλλα. Μόλις σχεδιάσετε τον ιστότοπο στο Photoshop, μπορείτε να μεταβείτε σε έναν επεξεργαστή κώδικα και το σεμινάριο θα σας καθοδηγήσει στον κώδικα που απαιτείται για να μετατρέψετε το σχέδιο σας σε μια σελίδα HTML. Το σεμινάριο θα απαιτήσει κάποιες βασικές γνώσεις HTML, γι 'αυτό θα πρότεινα να δοκιμάσετε αυτό το tutorial αφού έχετε περάσει από τα πρώτα μαθήματα της Γενικής Συνέλευσης.

Αν θέλετε να κάνετε μια πιο περίτεχνη ιστοσελίδα, ελέγξτε έξω ένα άλλο Tuts + σεμινάριο για το πώς να σχεδιάσετε μια όμορφη ιστοσελίδα από το μηδέν. Ένα άλλο σεμινάριο PSD στο HTMl καθιστά τη ζωή λίγο πιο εύκολη, παρέχοντας τα αρχεία HTML, CSS και εικόνας. Άλλα μαθήματα σχετικά με το Tuts + σας βοηθούν να δημιουργήσετε ένα θέμα ημερολογίου Tumblr - αν και αυτό είναι ένα απλό σχέδιο του Photoshop, μείον τον κώδικα.

TutsPlus2

Συμπέρασμα : Σε σύγκριση με το Codecademy και το Dash, τα μαθήματα Tuts + παίρνουν λίγο περισσότερη προσπάθεια αφού πρέπει να περπατήσετε μέσα από τα βήματα. Με τις άλλες δύο τοποθεσίες, υπάρχει πολύ περισσότερο «χέρι εκμετάλλευση» έτσι να μιλήσω. Καθώς περπατάτε σε κάθε βήμα, είναι συχνά πιο εύκολο να καταλάβετε το λάθος που μπορεί να έχετε κάνει. Απαιτεί επίσης να χρησιμοποιείτε το δικό σας λογισμικό, ενώ τα Dash και Codecademy διαθέτουν ενσωματωμένα συστήματα. Τούτου λεχθέντος, με την ποικιλία των σεμιναρίων, είστε αναγκασμένοι να βρείτε μια σειρά από μαθήματα που εξυπηρετούν ακριβώς σε αυτό που θέλετε να μάθετε.

Μάθετε να κωδικοποιείτε με τον Shaye Howe

Με μια σειρά από 12 μαθήματα, ο Shaye Howe κάνει μια πολύ καλή δουλειά να σπάσει τα βασικά του HTML που σας εισάγει στην ορολογία και πώς να χρησιμοποιήσετε τα διάφορα στοιχεία του HTML και του CSS. Διάφορα μαθήματα περιλαμβάνουν γνωριμία με το HTML, CSS, κατανόηση του μοντέλου κουτιού, τοποθέτηση περιεχομένου, τυπογραφία και πολλά άλλα.

SH

Όταν πρόκειται να εφαρμόσετε τα μαθήματα στο σεμινάριο, ο ιστότοπος δεν παρέχει έναν τρόπο να δείτε γρήγορα πώς φαίνεται το HTML και το CSS σας σε ισχύ. Για να ξεπεραστεί αυτό μπορείτε να χρησιμοποιήσετε ένα online εργαλείο που θα παρέχει τα ίδια χαρακτηριστικά που θα βρείτε στο Codecademy και Dash.

Ελέγξτε ένα sandbox CSS / HTML / JavaScript όπως CSSDeck ή LiveWeave, τα οποία σας επιτρέπουν να εισάγετε HTML, CSS και JavaScript και να δείτε το τελικό αποτέλεσμα. Από τεχνικής απόψεως, μπορείτε επίσης να χρησιμοποιήσετε τους επεξεργαστές HTML, CSS και JavaScript σε Dash και Codecademy καθώς σας αρέσει η ρύθμιση που παρέχουν.

Καθώς εργάζεστε στις εξηγήσεις, ο ιστότοπος παρέχει επίσης παραδείγματα κώδικα για να δοκιμάσετε τον εαυτό σας. Στο τέλος κάθε μαθήματος είναι μια πρακτική άσκηση που σας επιτρέπει να εφαρμόσετε όσα έχετε μάθει.

Αφού ολοκληρώσετε τα 12 μαθήματα, μπορείτε να μεταβείτε στο Μάθημα για προχωρημένους HTML και CSS, το οποίο περιλαμβάνει σχεδίαση που ανταποκρίνεται, jQuery και πολλά άλλα.

Συμπέρασμα: Αυτό το σεμινάριο έχει μια ελαφρώς διαφορετική προσέγγιση στις άλλες προτάσεις που αναφέρονται εδώ. Με μια πολύ πιο εμπεριστατωμένη εξήγηση, θα περάσετε περισσότερο χρόνο από ό, τι θα εφαρμόσετε όσα έχετε μάθει. Παρόλο που αυτό μπορεί να ακούγεται βαρετό για μερικούς, υπάρχουν εδώ μερικά πολύτιμα μαθήματα που παρέχουν το πλαίσιο και την καλύτερη κατανόηση του τρόπου λειτουργίας αυτών των γλωσσών.

Τι παίρνετε;

Τώρα ήρθε η ώρα να ακούσετε από εσάς. Υπάρχουν online σεμινάρια ανάπτυξης ιστού που θα συνιστούσατε; Τι πιστεύετε ότι είναι το επόμενο βήμα μετά από να δοκιμάσετε αυτά τα online μαθήματα; Ενημερώστε μας στα σχόλια.

Image Credit: hackNY.org

In this article