De samenwerking op GitHub is gestart!

Afgelopen maandag hebben we, zoals eerder aangegeven, afgesproken wat wat voor project we gaan doen. Het is een nieuwsbrief geworden. Het voordeel is dat een nieuwsbrief, om technische redenen, alleen HTML en CSS mag bevatten. Andere code wordt simpelweg niet geaccepteerd door de meeste mail clients.

Het gaat alleen om de opmaak van de nieuwsbrief. De andere zaken, zoals het vastleggen van abonnees en mailinglists kunnen we later nog doen.

We hebben ook afgesproken dat ik de opzet ga doen en het HTML werk. Het eerste wat ik gedaan heb is informatie op internet opzoeken over ‘nieuwsbrieven’. Dan bedoel ik natuurlijk vooral de technische kant. Inhoudelijk weet ik, als marketeer, er gelukkig al het nodige van. Op een site als Stack Overflow is ook veel code te vinden, die als voorbeeld kan dienen.

Ik heb besloten om de nieuwsbrief leesbaar te maken voor zoveel mogelijk mail clients, dus ik bouw de nieuwsbrief met tabellen. Tabellen geven voor mij toch nog een redelijk professioneel gevoel, maar zijn eenvoudig van opzet. Wat natuurlijk ook voor mijn eigen leerproces geen gekke gedachte is ­čśë

In Visual Studio Code heb ik de HTML-code geschreven. Tijdens het schrijven heb ik deze code ook steeds getest in Firefox, Edge en Chrome. Onderaan deze post vind je de code.

Alleen nog de code en bijbehorende plaatje op GitHub zetten. Wat ik hier doe weet ik nog niet precies. Ik maak gewoon een nieuwe repository aan in GitHub en volg de aanwijzingen.

Het komt er op neer dat ik in de terminal van windows ga. Ik gebruik hiervoor Git BASH om direct in een meer Linux geori├źnteerde omgeving te komen.

Daarna is het de volgende commando’s (stap 4 kopieer ik uit de aanwijzingen van GitHub) invoeren:

1) type git init
2) type git add -A
3) type git commit -m ‘initial commit’
4) copy paste first link from the git instructions (git remote add origin ….)
5) type in terminal git push -u origin master

Nu staat alles in GitHub en kunnen de leden van het projectteam er aan werken. Hoe dat gaat laat ik nog weten.

De nieuwsbrief is te zien op mijn eigen GitHub pages en wel hier.

Omdat ik nu mijn eigen GitHub pages heb kan ik gelijk ook de repositories van Cheatsheet en Dasmoto op de pages publiceren. Ik weet niet of ik nu de juiste termen gebruik, maar goed dat zal ik nog wel leren.

Ben jij ook enthousiast over deze blog laat dan even een berichtje achter en/of deel deze post.

Ik ga weer verder met JavaScript: Arrays, Loops and Objects!

Hieronder vind je de HTML-code voor de nieuwsbrief.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>PhrozHex First Newsletter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
    <tr>
     <td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
        <img src="images/mail.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
     </td>
    </tr>
    <tr>
        <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
            <table border="1" cellpadding="0" cellspacing="0" width="100%">
             <tr>
              <td>
               Welcome to the first issue of the PhrozHex newsletter
              </td>
             </tr>
             <tr>
              <td style="padding: 20px 0 30px 0;">
               In this and future newsletters we will inform you about all the achievements of the Codecademy students <strong>Hex25</strong> and <strong>Phrozbug</strong>
               We hope you like our content.
               We are still working on our skills, so these newsletters will get better and better in the future.
              </td>
             </tr>
             <tr>
              <td>
                <table border="1" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                     <td width="260" valign="top">
                      Hex25

                      Hi my name is Hex25 and I........
                     </td>
                     <td style="font-size: 0; line-height: 0;" width="20">
                       
                     </td>
                     <td width="260" valign="top">
                      Phrozbug

                      Hi my name is Phrozbug and I.....
                     </td>
                    </tr>
                   </table>
              </td>
             </tr>
            </table>
           </td>
    </tr>
    <tr>
     <td  bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
        <table border="1" cellpadding="0" cellspacing="0" width="100%">
            <tr>
             <td>
              Column 1
             </td>
             <td>
              Column 2
             </td>
            </tr>
           </table>
     </td>
    </tr>
   </table>
   

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *