<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Michelle</title>
    <description>The latest articles on Forem by Michelle (@michelledeveloper).</description>
    <link>https://forem.com/michelledeveloper</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F444683%2Fc0d9927d-f1ed-43fb-aa53-af4c137f34a1.jpg</url>
      <title>Forem: Michelle</title>
      <link>https://forem.com/michelledeveloper</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/michelledeveloper"/>
    <language>en</language>
    <item>
      <title>How to migrate emails from GoDaddy to Google Workspace with different domains</title>
      <dc:creator>Michelle</dc:creator>
      <pubDate>Sun, 15 Jan 2023 21:16:47 +0000</pubDate>
      <link>https://forem.com/michelledeveloper/how-to-migrate-emails-from-godaddy-to-google-workspace-with-different-domains-1kb</link>
      <guid>https://forem.com/michelledeveloper/how-to-migrate-emails-from-godaddy-to-google-workspace-with-different-domains-1kb</guid>
      <description>&lt;p&gt;So I decided to do a list of the steps I did to migrate the emails because I had to really look for quite a bit and several different resources to get it right. &lt;/p&gt;

&lt;h2&gt;
  
  
  Before The Migration
&lt;/h2&gt;

&lt;p&gt;Optionally you can download your most important emails with the app Thunderbird. GoDaddy offers the option to download all your data - but I find it really slow. It's not necessary as with this tutorial you won't lose any data but you can never be too careful.&lt;br&gt;
Make the user accounts in Google Admin. Be sure to Activate the Gmail for the domain. You can do this in Domains and click on Activate Gmail.&lt;/p&gt;

&lt;h2&gt;
  
  
  Migrating
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Get the list of mails and passwords. You can just change the passwords of every account if you wish so.&lt;/li&gt;
&lt;li&gt;In Google Admin, be sure that you have the roles needed to manage users and data migration. &lt;/li&gt;
&lt;li&gt;In Google Admin, click on the dropdown @Account and select Data Migration.&lt;/li&gt;
&lt;li&gt;Click on Migration Source, select Other IMAP server. Email will be selected by default just make sure it is.&lt;/li&gt;
&lt;li&gt;In connection protocol select IMAP and write the IMAP server address (imap.secureserver.net for GoDaddy webmail)&lt;/li&gt;
&lt;li&gt;Write the credentials for one of the email accounts of GoDaddy. Ok, here I recommend you to look for the oldest account you have with GoDaddy.&lt;/li&gt;
&lt;li&gt;Select length of the migration above. This is why I recommended to look for the oldest account, enter the mail and look for the oldest mail received or sent. Click custom and start from there. You can select any date though.&lt;/li&gt;
&lt;li&gt;In the data migration dashboard select the option Add User and migrate any user account. Write the credentials of the GoDaddy Email Account and the user in Google Workspace you want to migrate the mails to. Click start.&lt;/li&gt;
&lt;li&gt;Check if everything ran correctly. Now you can add all the accounts you want individually or with a csv file using the following format:
, , 
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now, this tutorial is when you have two different domains. You probably are changing domains and might want to have a grace period where your clients can keep sending you emails to your GoDaddy email to avoid losing any information.&lt;/p&gt;

&lt;h2&gt;
  
  
  Connecting the domains
&lt;/h2&gt;

&lt;p&gt;Remember the parts of an email: username@domain &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Add your GoDaddy domain as second domain. Follow the instructions given by Google. But if you are writing the same exact usernames then you can add it as alias.
Ok, so here it's a bit tricky. Google will automatically make your users an alternative email with the second domain with the username. Let's say:
&lt;a href="mailto:user1@exampleGW.com"&gt;user1@exampleGW.com&lt;/a&gt; → &lt;a href="mailto:user1@exampleGD.com"&gt;user1@exampleGD.com&lt;/a&gt;
We are leaving it as second domain to be able to write custom emails with the GoDaddy domain.
&lt;a href="mailto:user1@exampleGW.com"&gt;user1@exampleGW.com&lt;/a&gt; → &lt;a href="mailto:usernameposition@exampleGD.com"&gt;usernameposition@exampleGD.com&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Add the aliases you need in your Google Admin home, select Create an alternate email address.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Extras
&lt;/h2&gt;

&lt;p&gt;If you have forwards in GoDaddy you can add them as aliases or with Google Groups. But you can actually make a Google Space where you can assign mails in between the group and have access to several other functions that will make work easier. &lt;/p&gt;

</description>
      <category>softwareengineering</category>
      <category>productivity</category>
      <category>microservices</category>
      <category>scalability</category>
    </item>
    <item>
      <title>How to dynamically change a background color with Vue?</title>
      <dc:creator>Michelle</dc:creator>
      <pubDate>Fri, 08 Jul 2022 19:47:00 +0000</pubDate>
      <link>https://forem.com/michelledeveloper/how-to-dynamically-change-a-background-color-with-vue-4dne</link>
      <guid>https://forem.com/michelledeveloper/how-to-dynamically-change-a-background-color-with-vue-4dne</guid>
      <description>&lt;p&gt;Hey babes! The easiest way to understand a bit of how to dynamically change things with Vue is with something as big as a full background color change. This project will use a Vue instance as it is the simplest way to start with Vue.&lt;/p&gt;

&lt;p&gt;First let’s start with our index.html:&lt;/p&gt;

&lt;h2&gt;
  
  
  Create HTML:
&lt;/h2&gt;

&lt;p&gt;We make the basic structure (! or html5 - in VSCode).&lt;br&gt;
Then we add a div with the id=”app”. This is where our Vue instance will be mounted.&lt;br&gt;
Then we add the scripts. We will use the Vue CDN (&lt;code&gt;&amp;lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"&amp;gt;&amp;lt;/script&amp;gt;&lt;/code&gt;) and then we link our own script.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;

&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;"X-UA-Compatible"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"IE=edge"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"style.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;BG Change&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id = &lt;/span&gt;&lt;span class="s"&gt;"app"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;  

     &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;  
     &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
       &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"script.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;  
   &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;  
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  Create JS:
&lt;/h2&gt;

&lt;p&gt;Now we will create our instance.&lt;br&gt;
All we need is to make the variable as a new Vue and then give it where we will mount the instance in our html. We called our div app previously so that’s what we will write.&lt;br&gt;
As data, we will only need the variable bgColor and we assign it the color white in hex.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Vue&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;el&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#app&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;
        &lt;span class="na"&gt;bgColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#ffffff&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  Now we go back to our HTML:
&lt;/h2&gt;

&lt;p&gt;We now add another div to have the background in it, we will bind the style with our variable bgColor. Note how the attribute style has a colon before, it is the shortcut for v-bind. Inside style we { }, and we use camelCase for the terms that have - dashes in it. We put a simple h1 with the typical “Hello World!” and then our label and color input to change the color.&lt;br&gt;
Inputs, select, textareas and other components are the only that should use v-model, otherwise use v-bind. &lt;br&gt;
Our color selector is an input so we use v-model without variable bgColor.&lt;br&gt;
I also added the variable in the :style of the input to avoid getting that ugly border but you can ignore it if you want.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;

&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id = &lt;/span&gt;&lt;span class="s"&gt;"app"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;  
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"full-height "&lt;/span&gt; &lt;span class="na"&gt;:style=&lt;/span&gt;&lt;span class="s"&gt;"{backgroundColor: bgColor }"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Hello World!&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;label&lt;/span&gt; &lt;span class="na"&gt;for=&lt;/span&gt;&lt;span class="s"&gt;"head"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Background Color
            &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"color"&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"head"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"head"&lt;/span&gt;
            &lt;span class="na"&gt;:value=&lt;/span&gt;&lt;span class="s"&gt;"bgColor"&lt;/span&gt; &lt;span class="na"&gt;v-model=&lt;/span&gt;&lt;span class="s"&gt;"bgColor"&lt;/span&gt; &lt;span class="na"&gt;:style=&lt;/span&gt;&lt;span class="s"&gt;"{backgroundColor: bgColor, borderColor: bgColor }"&lt;/span&gt; &lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
             &lt;span class="nt"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  CSS:
&lt;/h2&gt;

&lt;p&gt;As an extra you can also add CSS to the html with the link and add the following code to get it fully centered.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;

&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.full-height&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;min-height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100vh&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;flex-direction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;column&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8np67ui1adm20iwg7f4p.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8np67ui1adm20iwg7f4p.gif" alt="final page"&gt;&lt;/a&gt;&lt;br&gt;
At the end you will end up getting something like this! I tried to explain a bit of how you can do it dynamically and at the same time explain a tad of Vue.&lt;/p&gt;

&lt;p&gt;For more information you can go read the Vue Documentation:&lt;br&gt;
&lt;a href="https://vuejs.org/guide/essentials/application.html#the-application-instance" rel="noopener noreferrer"&gt;Vue Instance&lt;/a&gt;&lt;br&gt;
&lt;a href="https://vuejs.org/guide/introduction.html" rel="noopener noreferrer"&gt;Vue Docs&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>vue</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Introduction to Web Development: HTML + CSS + Javascript</title>
      <dc:creator>Michelle</dc:creator>
      <pubDate>Fri, 01 Jul 2022 20:37:52 +0000</pubDate>
      <link>https://forem.com/michelledeveloper/introduction-to-web-development-html-css-javascript-a84</link>
      <guid>https://forem.com/michelledeveloper/introduction-to-web-development-html-css-javascript-a84</guid>
      <description>&lt;p&gt;Hey babes! The easiest way to start programming is perhaps with web design. Well, maybe not but it’s the easiest to follow without hitting some sort of learner plateau.&lt;/p&gt;

&lt;p&gt;Let’s start by saying two truths and one lie:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;HTML is short for HyperText Markup Language and with it we write the content of our page&lt;/li&gt;
&lt;li&gt;CSS (Cascading Style Sheets) are used to make the design of our page&lt;/li&gt;
&lt;li&gt;Javascript comes from java is the script or where the programming happens of our page
Well it’s half a lie. Javascript doesn’t come from Java but it started on the idea of the old Java applets that were used before in browsers. The half truth comes from the fact that Javascript is the only one from these three in which you actually code.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;At the end I will write some courses, pages and videos you can look for so you can actually immerse yourself in this. &lt;br&gt;
What you will need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A code editor&lt;/li&gt;
&lt;li&gt;Browser&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For code editor I recommend using Visual Studio Code for the extensions you can add.&lt;/p&gt;

&lt;h2&gt;
  
  
  HTML:
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fcDi3kjw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oced2839tgi4ole1d2k8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fcDi3kjw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oced2839tgi4ole1d2k8.png" alt="Simple html" width="800" height="334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Most tags open and close in html. This is the basic template of how a html doc looks like.&lt;/p&gt;

&lt;p&gt;Create a file named index.html, if you are using Visual Studio Code you can use the Emmet Abbreviation ! to create it.&lt;/p&gt;

&lt;p&gt;Let’s add a Heading 1 tag &lt;code&gt;&amp;lt;h1&amp;gt;&amp;lt;/h1&amp;gt;&lt;/code&gt; to be able to see the css.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Tpmn46-c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxhfzi8a7q27to7a5kzw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Tpmn46-c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxhfzi8a7q27to7a5kzw.png" alt="h1" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let’s open it. You can open your html by clicking in Your Files and opening it with a browser or with a server. Visual Studio Code has an extension called Live Server by Ritwick Dey that you can use to open it.&lt;br&gt;
To be able to see the changes you might have to save and refresh your page in the browser. But you will have this page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GADL4MBj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9aw0sasda9lzg1fhkgw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GADL4MBj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9aw0sasda9lzg1fhkgw.png" alt="page" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  CSS
&lt;/h2&gt;

&lt;p&gt;Now let’s add a simple design.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8m0Uvaut--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jj8gnh8gohox11543b0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8m0Uvaut--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jj8gnh8gohox11543b0.png" alt="css" width="800" height="750"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can use tags like body, classes (.[name_of_your_class]), ids (#[name_of_your_id]), and general selectors like * to call what you want to style. Then you open and close curly brackets {} with the style you want to give them.&lt;/p&gt;

&lt;p&gt;For your page to use the style, you have to connect them with &lt;code&gt;&amp;lt;link/&amp;gt;&lt;/code&gt;. Link is a self-closing HTML tag.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h3kl5q9a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aum28yjqugkw2xevp5ls.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h3kl5q9a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aum28yjqugkw2xevp5ls.png" alt="css link" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The code above will look like this in your browser.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YFUxmQJH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7ph5zhuuumoskkv68v3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YFUxmQJH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7ph5zhuuumoskkv68v3.png" alt="page with css" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Javascript
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kuc472g6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6pzvkvd9d5gjjmpvb1a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kuc472g6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6pzvkvd9d5gjjmpvb1a.png" alt="js" width="800" height="302"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In javascript you will code. Clicks, hovers, and keys you click are events that work on top of the document. You can select the part of the document you want (element) by getElementBy[...]. In this case we will only add an event to the whole document that will be triggered when you click any part of the page. We create a new element that has the phrase Welcome! And then we append it (add it to the end) of our body in html.&lt;/p&gt;

&lt;p&gt;We then add it to our html with the tag . This will go either before the ending of the body tag or in the head with a defer option. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vdrZI_Ka--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/httksmteha9x9jlgzyai.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vdrZI_Ka--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/httksmteha9x9jlgzyai.png" alt="js in html" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you click your page it will add the new text.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---HrSeFhB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lov871p0gvtrazvy0dv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---HrSeFhB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lov871p0gvtrazvy0dv.png" alt="page with js" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now you have your first page! It’s easy if you go step by step and understand why everything happens!&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources to learn more
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.freecodecamp.org/learn/"&gt;https://www.freecodecamp.org/learn/&lt;/a&gt; - Responsive Web Design for html + css&lt;br&gt;
&lt;a href="https://learnjavascript.online/"&gt;https://learnjavascript.online/&lt;/a&gt; - Interactive learning for javascript&lt;br&gt;
&lt;a href="https://mikkegoes.com/javascript-projects-for-beginners/"&gt;https://mikkegoes.com/javascript-projects-for-beginners/&lt;/a&gt; - Do projects instead of learning javascript theory&lt;br&gt;
&lt;a href="https://www.w3schools.com/html/default.asp"&gt;https://www.w3schools.com/html/default.asp&lt;/a&gt; - HTML documentation&lt;br&gt;
&lt;a href="https://www.w3schools.com/css/default.asp"&gt;https://www.w3schools.com/css/default.asp&lt;/a&gt; - CSS documentation&lt;br&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"&gt;https://developer.mozilla.org/en-US/docs/Web/JavaScript&lt;/a&gt; - Javascript Documentation&lt;br&gt;
&lt;a href="https://javascript.info/"&gt;https://javascript.info/&lt;/a&gt; -  Javascript Documentation&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>javascript</category>
      <category>html</category>
    </item>
    <item>
      <title>Introduction: Hello World!</title>
      <dc:creator>Michelle</dc:creator>
      <pubDate>Fri, 01 Jul 2022 18:17:31 +0000</pubDate>
      <link>https://forem.com/michelledeveloper/introduction-hello-world-1go6</link>
      <guid>https://forem.com/michelledeveloper/introduction-hello-world-1go6</guid>
      <description>&lt;p&gt;Hey babes! I made this blog thinking about how hard it really is to be a successful woman in technology. Starting out in tech is hard and to suffer from the social stigma and the gender inequality as well is simply maddening. &lt;br&gt;
This blog won’t be exactly linear but I will try to make some roadmaps on how to navigate it in the easiest and most comfortable way. I hope this blog guides you in how to become ‘that girl’ that is simply on top of everything. I’m still in the way to become that girl myself and would love to share this journey with you. Let’s start!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>introduction</category>
      <category>womenintech</category>
    </item>
  </channel>
</rss>
