FreeCodeCamp’s New Look

I know I haven’t posted in a while but I’m still here! I recently got some work that is not web development related and I’ve also been participating in Inktober and preparing for NaNoWriMo which has made me pretty busy.

I decided to sit down and finish my JavaScript lessons on FreeCodeCamp recently and found I was unable to because the site was not working properly. When I tried again an hour or so later, I realized this was not just a random error and went looking for an explanation. It turns out FreeCodeCamp was overhauling their website and some features were not working (namely, being able to actually log in).

Obviously sites change over time and there is often going to be a point where a new look or functionality is required, and this may include downtime. According to freeCodeCamp, login functionality was unavailable for three days, but I feel like it was a bit longer than that. I am torn between understanding that this is a free resource which relies on donations, and thinking that a platform that teaches web development should be able to facilitate a smoother transition. I did find an article that explains what happened though, and it turns out their lack of funding was ultimately the culprit.

But anyway, the new site. I’ll be honest: I don’t like the way it looks. When I first saw it back when logging in was not working properly, I thought the CSS was just not being applied properly. But no, that’s just how it looks apparently.

I can’t say I’ve ever been in love with how the site looked, but then green is not one of my favorite colors and that was the previous theme. And again: I understand, it’s a free resource. But the old design was better. I feel the font used makes the site look messy somehow. The old design was ‘cleaner’. I think that’s the word I’m looking for.

Ultimately, the content is still there, and they have added a few new lessons. I can only tell because there are now incomplete lessons in the sections I had previously finished.

I’ll continue to use the website of course and it is still an excellent resource even compared to some paid websites. I just can’t believe they somehow managed to make the website look worse than it did before.

Udemy – The Modern JavaScript Bootcamp (2019)

So I haven’t posted here for a while. I think I actually was burning myself out a little with the amount of studying I was trying to cram into every day (including weekends). I took it easy for the last few weeks and focused on my new website instead, which can be found here if you are interested. It is based on creative writing and, more recently, my attempt at learning to draw.

I decided I really needed some more help with JavaScript. I just struggle with it more than any other programming language I’ve tried, and I also find I learn better with a structured course. So I decided to buy The Modern JavaScript Bootcamp course from Udemy, as well as a React course which I will post about when I do it. Udemy really is a great place to find cheap courses, since there is almost always a sale where you only have to pay $10-$12.

It took me a a couple of weeks to finish at the pace I went. I struggled a little but I feel I did learn a lot. Did this succeed in making JavaScript finally stick in my mind? I’m not sure yet, but I do feel my freeCodeCamp progress has been a little easier since, so maybe.

My only issues with the course are that there are a few spelling mistakes in the videos. Sometimes they’re only in comments, and ultimately this isn’t a spelling course, but things like that annoy me. Kind of like when people put apostrophes in plurals. Also, in the to do app we make as part of the course, the instructor calls the items to do ‘todos’ and they should be ‘chores’ or ‘items’ or something that’s an actual word. But if these are my only complaints then obviously this is a great course, and I would recommend it to anyone who is looking to learn JavaScript.

You will make three small JavaScript web apps throughout the course: a note taking app, a to do app and a hangman game. I really enjoy project-based learning as I feel I learn best that way.

I do think this course would be easier if you already have some basic HTML knowledge, but ultimately I think most people would get along just fine even if they don’t know anything about web development before starting.

Now, onto React!

How to Move to a Self-Hosted WordPress Site

I have a few blogs that I’ve been working on recently and I decided I wanted to try a self-hosted option for my writing blog. There were a few reasons for this:

  1. I wanted a domain. Yes, those are also available through WordPress.com, but it was initially my primary reason for wanting to pursue a paid hosting plan.
  2. I wanted to make sure I would have a lot of options for customizing my website. You have to pay for the Business plan to install plugins if you stick with WordPress.com and it’s a lot cheaper to just get a self-hosted option which allows you to install them too. With all the free plugins available to self-hosted websites, there are many forms of customization and functionality easily available to you.
  3. I may want to monetize one day. I don’t expect to get rich or anything. But everything I’ve read says that you have many more options with a self-hosted site.

A few reasons I was wavering:

  1. I was worried about losing my likes, comments and followers. I didn’t have many to begin with but I wanted to keep what I had.
  2. It’s more work. Even though I went with hosting that provides a one-click WordPress install, there is still a lot of stuff you have to set up yourself which is all taken care of for you on WordPress.com.

Bluehost

After doing a lot of research I decided to go with Bluehost. They currently offer a plan where you can pay $2.95 a month for 3 years (I believe it went up to $3.95 for 2 and $4.95 for 1) which will then go up to $8 on renewal. This includes free domain name registration, 50gb of space and an SSL (Let’s Encrypt, which is free anyway). Even after adding domain privacy for $.99 a month, this was a really good deal compared to many of the other options out there.

The only downside to Bluehost I have seen is that some people feel it is slow. I don’t plan on ever having a lot of images or anything on my website and it probably won’t get very big anyway so I am not too worried about that. And everywhere I look they are recommended. They have an option to upgrade too if my site gets big enough and I like knowing that’s available.

Moving Your Content

So after you have purchased hosting and a domain name and installed WordPress, you will want to move all your content from your WordPress.com blog over to your new site. This is really easy to do. I followed the guide here and had no problems.

My comments were moved as well, but not my likes or my followers. My likes apparently cannot be moved so all my posts look even sadder than before since now no one likes them. But there was something I could do about my six followers.

Keeping Your Followers

You need to install the Jetpack plugin to integrate certain WordPress.com features. It was already installed on my site and I just had to activate it. This lets you do a lot of useful things, such as displaying your website on the WordPress.com reader (to varying degrees, it’s better with the paid version). It also lets you migrate your followers to your new site. I followed this guide and it was easy. My followers were moved in minutes but if you actually have a decent amount then it could take a while. You will be emailed once the migration process begins and when it ends.

You’ll then probably want to make sure you have a way for WordPress.com users to follow your blog, just as they can do here. To make this possible I added a Follow button using this guide.

Domain and SSL Issues

Initially I thought I had a problem, because my domain worked, but all of my content took me to the temporary hosting domain. That was last night when I created the website. But this morning it was all working fine so it’s just something that takes time.

My domain was still resolving when I went to bed so the SSL wasn’t working, but this morning I checked and it said it was active. But when I viewed my website it was showing as not secure. After some research I found that I could go to the secure or ‘https’ version of my website directly, but if I did not specifically write that in the address bar I’d end up at the unsecured site. Not good.

So, of course there was a guide for that. By following along I was able to make sure anyone going to my site will end up on the secured version.

Google Analytics

I had a message at the top of my screen telling me to set up Google Analytics so I went and did that. This is a way you can see who is visiting your website, how they got there, their location and age if available, etc. You can also see how your Google Ad campaigns are doing if you are running them. I’m not even going to try and monetize at the moment and I don’t know how useful this is to me but I used this guide to set it up anyway, since it’s free. You just need a Google account.

SEO

I’ve been reading a lot about SEO (Search Engine Optimization) since I began blogging. I’m definitely not an expert but I’ve come to learn a few things. One of which was that a site is going to rank better with a custom domain, leading me to consider starting this whole process to begin with.

I already knew about Google Search Console, which lets you view search traffic and any possible SEO problems with your pages. So I knew I wanted to use that. I installed the Yoast SEO plugin which I had already read about as being useful before this. I used this guide and once again… yes, it was easy.

Conclusion

There are many guides out there about this, but I didn’t find all the information I needed together so I’m hoping linking everything I used here is helpful to someone.

In case it wasn’t obvious, everything I mentioned here is free, aside from the hosting itself of course. Many of the plugins I’m using have paid options, but they aren’t really necessary for the small blog I’m currently running. If you would like to check it out, you can find it here. It’s mostly about writing but also will have some other stuff like gaming and music. I’m still setting up a few things but it is functional now. At least, I’m 99.9% sure it is so if you see a problem please let me know!

Choosing a Programming Language

One of the main questions prospective programmers ask is ‘what language should I learn first?’ There is no right or wrong answer here, merely points you should consider to help you make the best decision for your current situation.

Most people will probably tell you that one of the easiest languages to start with is Python, and I agree. It is very high level—meaning it’s further removed from machine language and closer to English—and it just makes sense. Many people think of it as a simple scripting language but it is actually extremely versatile and is often used in data science and as the back end for websites. You can even make games with Python if you want.

But maybe you don’t feel you have time to start learning a language that may not match up with your end goals. If you want to start applying for programming jobs as soon as possible, then you should first look at what is available in your area. It may not make much sense for you to start learning PHP when there aren’t many jobs requiring that language.

You may also just want to learn a language quickly so that you can create a project you’ve been thinking of. Although programming languages are versatile and there is a lot of overlap in what they can do, there are usually some areas where certain languages excel.

Automation

Maybe you just want to automate some tasks at work to make your job easier. Python is a great language to begin with for this, and there is even a free online book available that focuses on this topic called Automate the Boring Stuff.

Web Development

If you are interested in creating websites then I suggest you first learn HTML and CSS. These are not programming languages but they are crucial to web development and they will not take you long to learn. After that, you should move on to JavaScript. This is all you really need to get started if you intend to focus on the front end.

If you think you would like to concentrate more on back end development, then after learning HTML and CSS you have a few options. It’s a good idea to learn at least some JavaScript, which is a solid choice for the back end too and a good default if you are not sure what you want. But there are many other languages that can be used here including PHP, Java, Ruby, C# and Python.

Games

I know that wanting to create your own game is a pretty big reason for learning programming. I’d like to make one myself one day. The languages that are most often used for game development are C++, C# and Java.

System Software

If you are interested in programming system software—think operating systems and web browsers—then you should learn C or C++. These are more difficult to learn, especially as a first language, but if you become competent in either then it will help you a lot when you go on to learn other languages.

Mobile Development

If you want to develop for Android, you should start by learning Java (which has no relation to JavaScript).

If you want to develop for iOS, then you should learn Objective-C followed by Swift.

In recent years other languages have released tools to develop mobile applications, such as JavaScript’s React Native, so there may be other options out there.

Data Science

Data science seems to be very popular these days. Maybe you really just want to learn programming so that you can work with data and statistics. You will likely benefit most from learning Python, which has many libraries to help analyze and visualize data. When you’re confident with your Python skills you may like to learn R too.

Conclusion

If you are still not sure, check out this infographic.

Still can’t decide? Then start with Python. As you learn, you will come to discover the kinds of projects you enjoy working on. And once you know Python, you’ll find it easier to learn another programming language.

My Text Editor of Choice: Visual Studio Code

I’ve used a few different text editors and IDEs (Integrated Development Environments) since I first began learning web development. The first text editor I used (not counting Notepad) was Notepad++. It’s what I used all throughout my first web development courses. It is very basic but I stuck with it for a while because it was what I knew, and for some reason it didn’t occur to me that there may be something better out there.

Then I began attending university, where we used a variety of different programs: BlueJ for Java, then later Visual Studio when we were learning C++. BlueJ is made for beginners and it shows, but I did like using Visual Studio for a while. Then some friends told me I should use Eclipse, and others told me I should use NetBeans, so I tried both and NetBeans became my IDE of choice for a while. I was primarily coding in Java at the time.

Now that I’m trying to focus on web development I’ve begun using Visual Studio Code, a text editor that has a lot of similar functionality to an IDE, especially when there are so many useful extensions available. I have to say that I really like it. I particularly enjoy how easy it is to push updates to Github using the integrated Git functionality. It stopped me from having to actually learn the proper commands for quite some time! (I don’t actually recommend you use these shortcuts until you are familiar with using Git via the command prompt.)

One thing I find particularly useful for web development is the fact I can use Emmet, which is already integrated into Visual Studio Code, to easily create HTML. For example, if I want to start a new HTML file, all I have to write is ! followed by the tab key. This will create the HTML boilerplate which gets tedious to type out by hand after a while. You can also create HTML tags by just writing the tag name and selecting the one you want from the drop-down list that appears. For example if I type ‘div’ I can change that into a set of div tags in this way. There are many other things you can do with Emmet but to be honest this is all I’ve been doing with it at this point. If you’re interested in reading more about Emmet then you can check out the documentation.

Extensions

I use a number of extensions, some of which I’d rather not try and code without. I use HTML, CSS, JavaScript and Python so the extensions I use are centered around them.

  • Bracket Colorizer – One of my biggest problems with JavaScript is how many sets of brackets you sometimes end up with. Bracket Colorizer makes it easy to see which sets of brackets go together by color coding them. I feel this is a must-have.
  • ESLint – This can auto format your code and will also tell you if there are any linting errors, which could be bugs or stylistic errors among other things.
  • JavaScript (ES6) Code Snippets – This makes it easier to do many things in JavaScript, and since I hate JavaScript I love using this. All you need to do it type a few letters representing the snippet you want and press tab to have it written out for you.
  • Open-In-Browser – Lets you easily view an HTML document in your browser using a shortcut.
  • Python – Obviously I have the Python extension, which provides a range of features to make coding with Python easier such as debugging and formatting.
  • Dracula Official – This definitely isn’t a must have. This is the theme I’m currently using and I just wanted to make sure everyone’s aware that there are many different themes you can apply to your editor using extensions.

These aren’t necessarily all of the best extensions, just the ones I find useful at the moment. I’m sure at some point I’ll find others I like, especially if I learn other languages or start having to actually use Git with other people.

What is CSS?

If you are unfamiliar with HTML then I recommend you read my ‘What is HTML?’ post first.

CSS stands for Cascading Style Sheets and it is a style sheet language that displays how the HTML elements on a page should be displayed. CSS, as the name suggests, dictates the style of the web page–the layout, the colors, the fonts, etc. It was designed so that the structure and visual appearance of web pages could be separate, which has a few benefits. For one, it’s easier to make changes to the website later on, and for another, using a separate CSS stylesheet makes it easy to apply the same style to multiple pages within a website without repeating the same lines.

History

CSS was first proposed in 1994 and there have been a few versions since the. The current version is CSS3, of which the earliest drafts were published in 1999. There are also a few newer modules such as Grid and Flexbox which are sometimes collectively referred to as CSS4, though this term is not official.

Selectors and Declarations

A selector refers to the HTML element you want to apply a style to. There is a wide range of types of selectors that you may end up using if you become a web developer, but for now we’ll just look at the most basic form.

After the selector come all the styles you want to apply to the targeted element, enclosed by curly braces. This part is known as the declaration block and each style within is a declaration.

The selector and the declaration block make up a CSS rule-set. Here is an example of a simple CSS rule-set which targets the paragraph element and sets the background color to purple and the margin to 20 pixels:

p {
    background-color: purple;
    margin: 20px;
}

The ‘p’ is the selector and all that follows is the declaration block. You can apply as many styles as you want in this way.

How to Include Styles

There are three different ways you can include CSS in your website.

Inline

This is when you add styles as an attribute of an HTML element. To add CSS so that a particular paragraph is colored red, for example, you would write this:

<p style="color:red;">I'm a red paragraph!</p>

This is not ideal as it means that if you want to have multiple red paragraphs you’ll have to add the attribute to each one. And then what happens if you want to change the color? You’d have to look for every red paragraph in your HTML and change them all individually.

Internal

An internal style, also known as embedded, is included in the head section of your HTML document. All style information for that particular page is included within style tags, for example:

<style>
    p {
        color: red;
    }
    h1 {
        font-weight: bold;
    }
</style>

This will make all paragraph elements on the page red, and all level one headings bold.

This is a better solution than using inline styles but you will still have to change the CSS on every page whenever you make an update. Additionally, if your website is large and multiple pages need the same styles, it’s a waste to be including all of this CSS on all of them.

External

External style sheets are what you are likely to use the most. Here the CSS is written in an entirely separate file with a .css extension. Then the HTML page just has to reference it in the head section like this:

<link rel="stylesheet" type="text/css" href="style.css">

When using an external stylesheet, you can write your CSS as usual but this time you don’t use the style tags.

Now if you need to make a stylistic change on your website–let’s say, you’ve decided you want your navigation bar to have a different background color–you only have to change one line of CSS and it will be applied to all pages that are linked to your style sheet.

Learn More

If you’re interested in learning how to write CSS, check out the W3 Schools website to get started. You can also refer to the web development section of my resources list where I’ve linked some courses which will teach you CSS, among other things.

Sources

What is HTML?

HTML stands for Hypertext Markup Language, which I know doesn’t really tell you anything, but I’d be remiss if I didn’t tell you what those letters stand for. It is not a programming language (it is a markup language), but many people still refer to it as such. It defines the structure of a web page and tells the browser what to display using HTML elements. These elements carry meaning, such as whether this line should be a heading or that bunch of text a list. All web pages use at least some HTML and if you decide to study web development, HTML is probably the first language you’ll learn.

History

The first version of HTML was written in 1993 and since then the language has undergone many changes through multiple versions. The current version is known as HTML5, officially released in 2014 though available for years before that. HTML5 is an important update for a few reasons. It includes graphic elements and elements which allow video and audio content to play in browsers. Previously this was achieved using third-party software such as Adobe Flash, which was not available on all platforms.

Elements

HTML elements are the items that make up a web page. These are headings, paragraphs, images, forms, and just about anything else you see. They are all displayed using tags, represented by greater and lesser than signs. For example, here is how you would write a paragraph in HTML:

<p>Hi, I'm a paragraph!</p>

The <p> part is referred to as the opening tag, and the </p> is the closing tag. The text in between is the only part that will be displayed on the web page and is known at the content.

Some elements are considered ‘self-closing’ because they have no content and do not need a separate closing tag. For example, a ‘break’ element looks like this:

<br>

That’s all! This creates a line break after another HTML element, which can be useful when you do not want to use the <p> tags. A line break has no content; all the information it needs is in the tag itself, so it is self-closing.

Attributes

All HTML elements can include attributes within their opening tag which provide additional information to the browser. Most attributes come in name/value pairs. Some elements have mandatory attributes such as the image element:

<img src="image_name.jpg" alt="image description">

The ‘src’ attribute tells the browser where to find the image to be displayed; the given filename is the value. The ‘alt’ attribute describes the image in the event the user is using a screen reader or is otherwise unable to view the image itself. There are also optional tags that can be added to describe the height or width, among other things.

Every HTML element has a separate list of attributes that can be applied, but there are global attributes which can be added to any element. One of these is the ‘style’ attribute added which allows you to change various visual elements such as the color, font weight and background color. However, as you’ll see in the upcoming CSS post this is not the best way to achieve such effects.

Learn More

If you’re interested in learning how to write HTML, check out the W3 Schools website which is a great place to start. You can also refer to the web development section of my resources list where I’ve linked some courses which will teach you HTML, among other things.

Sources

The Odin Project – Etch A Sketch

This is the project I’ve most recently completed as part of the Odin Project’s full stack JavaScript path. It was actually fun, perhaps because it’s kind of like a game.

I’m definitely not qualified to write a JavaScript tutorial but I’ll give you an overview of how I completed this project. The requirements are listed here.

CSS Grid

I began by creating the grid itself. I used CSS Grid, though there are other ways it can be done according to the project page. Initially the grid was set to 16 x 16 squares. In my HTML file I made a div with the id ‘grid’. Then in my JavaScript file I put it into a variable like this:

const grid = document.querySelector("#grid");

I used CSS to set the display to ‘grid’ and set a width and height.

Then I created a function that set the gridTemplateRows and gridTemplateColumns to repeat 16 times and take up ‘1fr’ of space. ‘1fr’ here means 1 fraction of the available space. So – as far as I know – if all parts are equal to ‘1fr’ then they will always be equal no matter how many there are. I knew this would be important for later when variable rows and columns needed to be accounted for.

This function then runs a for loop for the area of the grid. This is what makes the actual grid items. Each time it runs through it creates a div, gives it the class ‘gridBox’ and adds it to the grid. The loop looks like this:

for (let i = 0; i < size * size; i++) {
    let div = document.createElement("div");
    div.classList.add("gridBox");
    grid.appendChild(div);

Adding An Event Listener

The class ‘gridBox’ is used to create an event listener for every grid square, so that whenever the mouse goes over a square, it changes the color. This is done by adding a class to the classList; this class simply sets the background color to a pretty purple/magenta gradient. Here’s my event listener code:

gridBoxes = document.querySelectorAll(".gridBox");
gridBoxes.forEach((gridBox) => {
    gridBox.addEventListener("mouseover", (e) => {
        gridBox.classList.add("active");
    });
});

I did try changing the classList.add to classList.toggle so that if you went over the same square again it would remove the color, but I decided I liked it better this way.

Finishing Touches

Once I had the 16 x 16 grid working, it was fairly simple to make the size a number chosen by the user. Upon loading the page the user is asked the number of columns/rows they would like and then this number is stored in a variable, which is used to generate the grid.

Initially I just had a reset button which asked the user how many boxes they wanted this time and cleared the grid. But then my husband was like, “why can’t you just have a reset button that clears the grid and lets you keep the same size and add another button for changing the size?” This was simple enough to do so I added the other button to appease him.

Final Project

You can view my Etch A Sketch on GitHub pages here and the code is here. It’s not fancy but it works! I should mention that I know the grid itself does not resize so if your screen is small then you may have to scroll. This was something I did play with but I was having trouble making the variable rows/columns work properly with a responsive box. It wasn’t in the project description as a requirement so I left it as it is.

I’d also advise you not to choose a crazy number for the size. I think I put in 400 once and my browser couldn’t handle it. 100 is a pretty safe upper limit.

Please don’t think this is an example of good code either; I don’t think it’s bad but it’s likely not optimal.

I’m currently still working through the freeCodeCamp JavaScript section. Soon I’ll be up to the projects and then I can post about it!

Static Website Hosting: GoDaddy vs Netlify

I just wanted to share a recent experience I had with GoDaddy and why I’d advise you to not pick them for hosting your websites.

Backstory

A few years ago, my sister-in-law started a preschool which she runs out of her house. It’s small – she only has about 6 students in the class. She signed up for GoDaddy and was using their website builder to create a site but having trouble, so she contacted me (which I wish she’d done before choosing a hosting provider). I took a look at their website builder and it was terrible. So I made her website from scratch, based on the design she’d been trying to create. She ended up paying $144 for hosting for 3 years which included a free domain and email. I can’t say that I know this was a good deal at the time, but I think it was.

I redid her site a few weeks ago to make it more mobile friendly and to practice more with Bootstrap. She was really happy with how it looks. I signed up with Google Search Console to try and work more on the SEO aspect of things, since I knew her website didn’t rank particularly well. I should also mention here that in her case, it’s not a big deal. She isn’t trying to reach the whole country or anything and she is very social and so a lot of her customers come through networking. This was something I was just trying to do in order to learn.

There was, however, one thing that was bothering me. She didn’t have an SSL certificate so her website showed as not being secure. This website is completely static and very simple – no one submits anything on there or logins in or anything – but it bugged me all the same and I was thinking I’d like to fix it. I realize this is also something that affects Google search rankings.

GoDaddy Renewal Experience

A few days ago, my sister-in-law tried to update her credit card details on GoDaddy because her renewal date was coming up. She was encountering an error so she called them. She then called me to merge the call because the man she was talking to was telling her it was going to cost over $500 for five years hosting, which was quite a change from what she’d paid previously.

What did this amount include? Well, for starters, it included an SSL certificate and anti-malware protection, which are currently on sale for $64 and $67 a year as add-ons to her current hosting if purchased from GoDaddy. Since I was already thinking about securing her site, I did initially think that maybe it was a good deal.

I need to mention here that while this phone call was taking place, I didn’t have a good idea of how much hosting or SSL certificates should cost. I didn’t know if this was a good deal or not and I wasn’t able to effectively research while talking to this guy on the phone.

He said that he was giving her a discount and I did see later that the plan he was selling her was usually $15 a month – so yes, that’s quite a discount. I’ll also point out here that upon this later review I saw that the plan was called GoCentral Business Plus and was far more than she needed – something he had to have realized while talking to us. She would have been fine with the cheaper $6/month version of this plan.

Then came the real catch – the new plan does not let you upload your website files. Instead you have to use their website builder. I don’t know why they have this restriction. I was immediately against it, but he pointed out that this was a better deal for my sister-in-law, who isn’t really in a position to spend extra money if she can help it. He was right, too – to renew her original hosting and get the SSL and anti-malware she’d have to pay more than the plan he was offering. I was pretty upset, having just redone her website. She was too. Additionally, I was pretty sure there had to be a better deal elsewhere.

This guy kept talking about all the extra people she’d be able to reach and how the website builder’s interface was super easy and she’d be able to upload photos herself whenever she wants. She said she has a Facebook page for that; the website is more a basic source of information for prospective customers.We stressed the fact that hers is a very small business and her website very simple. She doesn’t need a lot of extra functionality. He was determined to sell her this plan though, regardless of the doubts both she and I had.

The plan also comes with a year of Office 365 email for free. He said the current email she was using was being phased out because it was very old (POP3) and there were lots of issues with it. But the Office 365 was going to cost $60 a year after the free trial which seemed a bit much on top of what else she was paying. (Note: although I’m sure the number he gave was $60, I could not find an email plan on the GoDaddy site that cost that exact amount. There was a $24/year one and a $48/year one).

Ultimately, he said that we could get a refund within 45 days if we didn’t like it. That was the only thing that made us go through with it.

I logged into the GoDaddy account and took a brief look at the website builder. It was an improvement on the one I’d tried using before – in fact, I could probably make a decent-looking site with it – but I couldn’t customize it enough. I needed full control. And, of course, I’d just redone her site, from scratch.

New Hosting

I got to researching right away. I found many cheaper hosting plans, but I was unsure how many also forced you to use a website builder or WordPress (not that I’m against WordPress in general but we just wanted to put up the static website I’d made).

My husband came home from work and joined in the research. He said his sister should get an Office 365 email but that was the only good thing he had to say about the GoDaddy encounter. He was looking at Siteground for hosting, which people seem to like a lot. But although their basic hosting was only $4 a month, it went up to $12 when renewing. That seems to be a common issue with hosting providers. I do realize that this isn’t necessarily expensive in the grand scheme of hosting but when the site we’re talking about is static and only 5 pages then it seemed too much.

I was investigating free options, which I’ve always been skeptical about. I knew that GitHub pages lets you use a custom domain and I wondered if they also let you secure your websites. It turns out it’s possible – only recently though I gather, from all the articles saying it wasn’t. It looked like it may be a bit complicated to set up with a custom domain though.

Then I came across Netlify. People said good things about it, and I figured I had nothing to lose by just signing up and checking it out, it being free and all.

I was able to upload the website just by dragging and dropping the file to the Netlify dashboard. Then it immediately worked on the link they provided. Well, that was easy! You can also link to a Git repository and upload your files that way.

Then we had to point the domain to the new location. There were instructions provided by Netlify regarding what to change in the DNS record. My husband did that part though since he does that kind of thing a lot at work. He said it was easy (and he didn’t mean it was just easy for him). Although we were told it could take 24 hours to work, the website was working on the new domain almost instantly. We added a Let’s Encrypt certificate through Netlify – also free – and then we were done. So easy, and the free plan covers what is needed for this particular website.

As for the email, my husband handled that. He settled on a $4/month plan which is limited – as in, it’s web-only – but it’s enough for his sister’s purposes. Now we just have to move her emails over, which we’ll do today. Then we get to email that GoDaddy guy back and get my sister-in-law her refund!

We’ll probably transfer the domain to someone else too, but we’re just trying to handle everything else at the moment.

Conclusion

Main takeaway from this – a GoDaddy representative sold my sister-in-law a plan that she did not need or even really want. The plan she wanted included less bells and whistles but it was more expensive since it wasn’t discounted. Additionally, the man didn’t even mention that there were two cheaper versions of the plan he was trying to sell her, even though the cheapest one would have been all she needed. And he can’t feign ignorance here – we stressed multiple times how small her site was, how it was static, etc.

Aside from this there’s the fact that she’s received a lot of spam since signing up with them, where people were trying to get her to pay money for indexing her site with search engines and such. After she called me regarding the first few such emails I told her to just ignore anything that’s not directly from GoDaddy – and even then, talk to me about it before doing anything. She isn’t particularly internet-savvy.

If there are any issues getting the refund my sister-in-law was promised if she was unhappy, I’ll be sure to post about it!

FreeCodeCamp – Responsive Web Design

I completed this section of FreeCodeCamp about two months ago now, and I’ve been a bit slack trying to get through the next section which is all about JavaScript. So I thought maybe it would help to document my progress through the course after I finish each section. I think this will give me more motivation to finally get through the JavaScript part, because when I’m done I’ll be able to post all about it.

After you complete each section of FreeCodeCamp, you get a certificate. Some employers do like to see this kind of informal online certificate and FreeCodeCamp is probably known to many of them by now. Others won’t care. So I wouldn’t complete this specifically for the certificates. Complete the course for the knowledge you’ll gain.

You do also create a few projects at the end of each section, and these can be used in your portfolio. I struggle with finding project ideas that I care about, so this is a good way to get ideas and build something with the support of a community for if you get stuck. I plan on including links to all my own implementations of the projects here, no matter how bad I think they turned out.

Now onto the course. The Responsive Web Design part consists of eight sections.

Basic HTML and HTML5

This is exactly what it sounds like – a basic overview of HTML, including the new elements introduced in HTML5. Since I already knew HTML I went through this part very quickly, and I feel that even people who aren’t familiar with it are unlikely to struggle. Each lesson introduces a different element and is quick and simple to complete.

Basic CSS

Again, what it sounds like. You’ll learn the basic concepts of CSS and a few of the newer properties introduced in CSS3.

Although HTML is, I think, quite easy, CSS isn’t. It appears easy at first glance, but there is a lot more to it than changing colors and adding borders.

Applied Visual Design

Here you’ll learn more CSS. This section goes into more detail about the properties you can use to make your website more visually appealing. It also introduces the basic ways of positioning HTML elements using absolute and relative positioning and floating. This, to me, is where CSS can begin to get difficult. Having a good understanding of the box model will help.

Applied Accessibility

This section covers the ways you can make your website easier to navigate, especially for people who are vision-impaired. You will learn how you can make your website work better with screen readers, and how to choose color combinations that won’t make the site unusable for people who are colorblind.

Responsive Web Design Principles

This is a short section which tells you how to size your elements so that they will scale depending on the size of the screen. This is really important these days, since websites should work well on mobile devices, tablets and regular computer screens.

CSS Flexbox

Here you’ll learn how to use flexbox, a layout system which allows elements to shrink or grow to fill the space available to them. In theory, this allows you to make responsive layouts without having to use the floating and positioning you’ve covered so far.

My favorite use for flexbox is making footers sit at the bottom of a web page even if there’s very little content, something that’s harder than it sounds. If you’re interested, here’s an overview of how it can be done.

CSS Grid

This is another method of laying out web pages, this time using a two-dimensional grid. Compared to flexbox, I personally find grid a little awkward to use for a full page layout, but I think many people do use it for that purpose. I do find it great for things like image galleries or content that’s displayed in a tabular-type format but isn’t meant to be an actual table.

Responsive Web Design Projects

Here is where you’ll be given the specifications for the projects you need to complete before receiving your certificate. You will make:

You’ll use a test suite to ensure you’ve met all the requirements. The instructions given assume you’re using Codepen, but I created my projects in VS Code and uploaded them to Github. To make the test suite work you just have to put the script they give you into the body tag of your HTML document. It’s commented out in my projects but you can take a look if you are confused.

I didn’t bother trying to make the portfolio page more ‘real’ because I didn’t like the specifications I’d been given and didn’t want my actual portfolio to look like that. You probably shouldn’t have your intro line saying that you like purple on your real portfolio!

Now, onto the dreaded JavaScript!