CodePen Συμβουλές και βέλτιστη πρακτική

Όταν εργάζεστε στην FCC, θα υπάρξουν χρόνοι όταν δημιουργείτε τα δικά σας έργα με το CodePen. Οι καπετάνιοι επιθυμούν να μοιραστούν αυτά τα έργα στο φόρουμ Free Camp Camp για να λάβουν σχόλια από άλλους Campers.

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

Πάρτε τον υπνόσακο και τα marshmallows σας. Ω, και μην ξεχάσετε να πάρετε το Yeti Cooler πίσω από εκείνη την αρκούδα που τον έκλεψε ενώ κοιμόσασταν! Πάμε σε μια πεζοπορία για να μάθουμε μερικά πράγματα.

Οργάνωση του κώδικα σας στο CodePen

Όταν εργάζομαι με το CodePen για πρώτη φορά θυμάμαι να έχω όλο τον κώδικα μου στην ενότητα HTML του Pen μου. Ακριβώς όπως στην παρακάτω εικόνα έχω το περιεχόμενο HTML, CSS και όλα σε ένα σημείο.

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

Μπορείτε να ανοίξετε αυτό το στυλό σε άλλη καρτέλα πατώντας εδώ. Αυτό θα σας επιτρέψει να παίξετε με τον κώδικα και να ακολουθήσετε.

Ας αφαιρέσουμε μερικά πράγματα

Δεν χρειαζόμαστε αυτά τα κομμάτια κώδικα επειδή το CodePen τα εισάγει αυτόματα στο έργο μας.

Ακολουθήστε τα παρακάτω βήματα για να τοποθετήσετε σωστά το περιεχόμενο του κεφαλιού σας όπου πρέπει να πάτε στο CodePen.

Ας μετακινήσουμε τα μετα-περιεχόμενα και τις γραμματοσειρές του Google στο στοιχείο Stuff For του CodePen.

Ακολουθεί ένα στιγμιότυπο του κώδικα μεταξύ των ετικετών κεφαλής. Θα πρέπει μόνο να μετακινήσετε τον κωδικό που έχω με έντονους χαρακτήρες.


 
  Bootstrap Theme Εταιρική Σελίδα </ title>
 <meta charset = "utf-8">
 <meta name = "viewport" content = "πλάτος = πλάτος συσκευής, αρχική κλίμακα = 1">
 <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <link href = "http://fonts.googleapis.com/css?family=Montserrat" rel = "stylesheet" type = "text / css">
 <link href = "http://fonts.googleapis.com/css?family=Lato" rel = "style sheet" τύπος = "κείμενο / css">
 </body></html>