Μάθετε HTML και CSS με αυτά τα βήματα βήμα προς βήμα

Διαφήμιση

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ποια είναι η γνώμη σας;

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

Πιστωτική εικόνα: hackNY.org