Θέλετε να μάθετε να δημιουργείτε ιστότοπους; Δοκιμάστε το δωρεάν μάθημα συντριβής HTML & CSS

Είμαι ενθουσιασμένος που μοιράζομαι αυτό το τετράωρο μάθημα σε HTML και CSS μαζί σας (<- link to course).

Εάν είστε περίεργοι για την ανάπτυξη ιστού, αλλά δεν ξέρετε από πού να ξεκινήσετε, αυτό είναι το τέλειο μάθημα για εσάς!

Δεν υπάρχουν απολύτως προϋποθέσεις για αυτό και δεν χρειάζεται καν να εγκαταστήσετε έναν επεξεργαστή κώδικα! Ο Scrimba θα σας καλύψει εκεί.

Ο εκπαιδευτής του μαθήματος είναι ο λαμπρός Kevin Powell. Είναι μεγάλος θαυμαστής CSS, πολύ δημοφιλής εκπαιδευτής στο YouTube και διδάσκει επίσης HTML και CSS στις αίθουσες διδασκαλίας. Με άλλα λόγια, είστε σε καλά χέρια.

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

Μόλις ολοκληρώσετε αυτό το μάθημα και είστε έτοιμοι για περισσότερες προκλήσεις, μπορείτε επίσης να δείτε το bootcamp σχεδιασμού ιστοσελίδων που ανταποκρίνεται στον Kevin. Πρόκειται για ένα τεράστιο μάθημα 15 ωρών που σας διδάσκει προηγμένο CSS και πώς να δημιουργήσετε ανταποκριτικούς ιστότοπους σε επαγγελματικό επίπεδο.

Αλλά για τώρα, ας ρίξουμε μια πιο προσεκτική ματιά στα μαθήματα στο εισαγωγικό μάθημα.

1. Εισαγωγή

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

2. Τι είναι HTML και CSS;

Στο δεύτερο καστ, ο Κέβιν μας εισάγει σε HTML και CSS, τι σημαίνουν αυτά τα ακρωνύμια και πώς συνδέονται στενά τόσο το HTML όσο και το CSS.

3. Βασική ορολογία και σύνταξη

Ο Κέβιν χρησιμοποιεί ένα βιβλίο ως παράδειγμα για το πώς λειτουργεί η σήμανση HTML και εισάγει έννοιες όπως elementsκαι tagsκαι πώς να τις χρησιμοποιήσει.

4. Ας γράψουμε λίγο HTML!

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

   My first website   

My very first webpage

Websites are built with HTML

HTML is a markup language that tells the browser what everything is

They also use CSS

I can't wait to start learning CSS!

5. strongκαιemphasis

Μπορούμε να χρησιμοποιήσουμε για να προσθέσουμε έμφαση στο κείμενό μας και να προσθέσουμε σημασία .

6. Ονομασία και οργάνωση αρχείων

Σε αυτό το μέρος, ο Kevin μας διδάσκει μερικές καλές πρακτικές σχετικά με την ονομασία αρχείων και παρέχει καλές συμβουλές σχετικά με τον τρόπο οργάνωσης των αρχείων μας.

7. Άγκυρες και χαρακτηριστικά

Μπορούμε να χρησιμοποιήσουμε το στοιχείο αγκύρωσης για σύνδεση σε διαφορετική τοποθεσία στην ίδια σελίδα ή σε άλλη σελίδα. Για να πούμε πού να συνδέσουμε, χρησιμοποιούμε attributes, και για άγκυρες, είναι href.

Link to Scrimba 

8. Εισαγωγή στο CSS

Ο Kevin μας εισάγει στη σύνταξη CSS και στην έννοια των ιδιοτήτων και των τιμών στο CSS. Με τη χρήση της property: valueσύνταξης μπορούμε να σχεδιάσουμε τις ιστοσελίδες μας και να εισαγάγουμε ενσωματωμένο στυλ για να κάνουμε τα μεμονωμένα στοιχεία να φαίνονται καλά στη σελίδα.

9. Βασικά CSS

Σε αυτό το βίντεο, θα μάθουμε για το μέγεθος της γραμματοσειράς, τα χρώματα, τα χρώματα φόντου και την ευθυγράμμιση κειμένου. Κέβιν, θα μας εισαγάγει σε τέσσερις διαφορετικούς τρόπους καθορισμού χρωμάτων στο CSS, χρησιμοποιώντας λέξεις-κλειδιά, hex, rgbκαι hslαξίες.

10. Χρόνος εξάσκησης!

Εντάξει, ώρα για κάποια ατομική πρακτική. Ο Κέβιν μας θέτει ένα καθήκον να δημιουργήσουμε μια σελίδα για τον εαυτό μας και να μας θέσει κάποιες προκλήσεις HTML / CSS.

11. Ανακεφαλαιώστε μέχρι αυτό το σημείο

Σε αυτό το καστ, προχωράμε γρήγορα σε ό, τι έχουμε μάθει για HTML και CSS μέχρι αυτό το σημείο. Η επανάληψη είναι η μητέρα της μάθησης!

12. Λίστες

Now, Kevin shows us how to create lists in HTML using

    for ordered lists and
      for unordered lists.

      
              
      1. List item one
      2. a second list item
      • bullet point
      • another bullet
      ol and ul tags rendered to show the difference between the two

      13. Images

      Images are self-closing and both are valid . Kevin also explains how to use src and alt attributes and how alt helps improve accessibility.

      14. Practice time!

      Alright, time for our second practice screencast. Kevin sets us a challenge to convert some markdown files to HTML/CSS webpage. No worries if you're not sure what markdown is because in this practice session Kevin will walk us through the completion of the task.

      15. Internal CSS

      In this chapter, Kevin introduces internal CSS, an alternative to writing inline CSS.

      Internal CSS is written in the same file as HTML, but within a separate tag

         All about Earth and Mars  h1 { font-size: 60px; } p { font-size: 24px; color: steelblue; }    

      Earth and Mars

      Earth and Mars are two planets within our solar system.

      Rendered code above with styles applied

      16. External CSS

      External CSS is another approach to managing CSS. This time Kevin shows us how we can extract CSS into a separate file and how to link CSS stylesheets to our HTML files with a tag

      17. Classes and IDs

      In this screencast, Kevin focuses on three types of selectors in CSS and when you might want to use which.

      /* Element selector */ a { color: darksalmon; } /* Class selector */ .intro { font-size: 24px; } /* ID selector */ #earth-title { color: lightgreen; } 

      18. Comments in HTML and CSS

      We can add comments in HTML:

        Comments!    

      Comments!

      And in CSS:

      /* TODO: change the color of the text to white */ body { background: #333; color: white; } /* Some more comments */ h1 { color: red; } 

      19. The only tags you need to know (for now)

      In this part of the course, Kevin reminds us that we don't need to know everything at this point and at this stage we really need to know only the following tags:

      h1 -> h6 p strong and em a ul, ol, li img 

      And it would be good if we can tell the difference between the following tags:

      header main section footer nav div 

      20. Intro to the box model

      It's now time to discover the box model.

      Most elements are block elements, which means they are 100% width of their parent and have a height of 0.

      This is a brilliant cast, where Kevin not just simply and succinctly explains how the box model works, but also saves us from the common pitfalls that even experienced developers fall into from time to time.

      21. Margin and Padding

      Up next are margins and paddings.

      Margins are used to control the position of an element relative to those around it, while padding is used to control the positioning of content inside our element.

      Kevin does a great job explaining many different ways padding and margins can be set in CSS.

      /* */ padding-top: 20px; padding-right: 30px; padding-bottom: 40px; padding-left: 50px; /* Shorthand version would be */ padding: 20px 30px 40px 50px; margin-top: 500px; margin-left: 100px; margin-right: 100px; margin-bottom: 10px; /* Shorthand version would be */ margin: 500px 100px 10px; 

      22. Borders

      The last piece in the box model - borders. Borders are added around your elements. And they can be set in a similar way to margins and padding.

      border-color: yellow; border-width: 20px; border-style: solid; /* Shorthand version would be */ border: solid yellow 20px; 

      23. Box model wrap up

      In this chapter, Kevin helps us review CSS box model and provides a nice visualisation for future reference.

      Visualisation of the CSS box model

      24. A basic layout

      We are now ready to create a very basic layout.

      Example of page layout

      Kevin will guide us through creating a page about dinosaurs, where we will be able to put everything we've learned so far to practice.

      25. A basic layout - centring an element on the page

      In this chapter, Kevin shows us how to centre the main element. It's not too difficult, but there are a few tricky bits to it.

      Example of page layout with centred main element

      26. Creating columns with flexbox

      We are doing pretty well, so far.

      Over these last cast, Kevin introduces a mini-capstone project to create this HTML layout from scratch.

      Capstone project layout, the task

      Oftentimes, a lot of designs use columns in the footer. In this cast, Kevin shows us how to use display: flex to create this neat layout.

      Zoomed in footer, implemented using flexbox columns

      27. Creating the layout from scratch - the HTML

      In this screencast, Kevin slices the design into manageable pieces and walks us through the HTML implementation.

      Capstone layout with highlighted boxes around sections of the layout

      In this screencast, we are creating the HTML markup.

      The layout is written in just HTML

      28. Creating the Layout - The CSS

      And in the final part of this course, we're writing CSS to create the final layout.

      Capstone project layout, finished

      29. What's next?

      You rock! poster

      If you reach all the way to this cast, then give your self a pat on the back. Congratulations on finishing the course! We've covered a LOT, and you have every reason to be proud of yourself.

      Where can you go from here? Kevin's first recommendation is to install a text editor. Any of them at this stage would be good and you can always change later. VS Code is very popular and for a good reason.

      You should also keep an eye on Kevin's upcoming advanced course on how to build responsive websites, so be sure to sign up for Kevin's newsletter.

      Happy coding :)

      Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.