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!

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!

Front End vs Back End

These days, many websites are dynamic, meaning the data they display may differ depending on who is accessing the site or which search term they are using. Other websites are static, with content that is written directly in the HTML, so the pages will always look the same unless the developer makes a change.

While developing a static website is fairly straightforward, creating a dynamic website or application can involve multiple different programming languages, databases, APIs, frameworks, etc. The software has to run well on multiple platforms, taking into account different browsers and screen sizes. Typically, these responsibilities are divided into two categories: front end and back end.

Front End

Front end or client-side development covers the look and feel of the website and how users interact with it. There are two main aspects of the front end: development and design. Some companies split these into two different positions, while others lump them into one role.

Designers may use image editing software in order to create a picture of what the site should look like, and they may create wireframes which indicate how elements are displayed and how users may interact with them.

Developers will take these designs and form them into a functional front end. If the site is dynamic then this will be connected to the back end.

Front end developers primarily use HTML, CSS and JavaScript, and nowadays there are many libraries and frameworks they may use such as React and Angular.

Back End

Back end or server-side development involves everything that runs in the background to make the software function, such as communicating with the database and server.

If you’ve ever bought something online or created an account on a website then you’ve interacted with the back end. You can’t see it, but it’s crucial for processing and storing the data.

Back end developers primarily use one or more programming languages, which could be Python, Ruby or PHP, to name a few. Just like on the front end, there are frameworks that back end developers can use to make their jobs easier. Back end developers also need to have an understanding of databases, APIs and servers.

Full Stack

You may also have heard of a ‘full stack developer’. This refers to someone who works on both the front and back end of an application.

How to Choose

I’ve been thinking a lot lately about which of these is really right for me. I’ve been operating under the assumption that I’ll apply for a back end development job using Python, but I’ve never been 100% sure about that. I’m technically far more adept at front end. If someone gave me a design I have little doubt that, whatever it is, I could create it. The problem arises when I have to create the design myself. I’m just… not good at it.

The company I’m looking to apply to has design and development combined in their front end position, which is what initially made me feel it would not be suitable for me. I would have to learn React and maybe Angular, but I’m not too worried about my ability to do that and, in fact, I plan on learning them anyway. Another con here is I hate JavaScript and I’d be doing more of it if I got a front end position.

The back end position, however, requires strong Python skills and a basic understanding of Node.js. I have the latter, but ‘strong Python skills’ is a pretty broad requirement. Looking at the company’s website, it appears they do a lot of data science and machine learning stuff, which isn’t really the kind of thing I’m interested in. I’m generally not into math unless it’s for a game.

But I guess I felt that it would be easier to learn data science and algorithms than how to be artistic. I felt that being able to create good designs isn’t something that can be learned – some people are good at it, some aren’t.

But maybe I’m wrong.

Either way, I’ve been studying full stack web development for the most part, with a focus on Python/Django. I’m going to learn React soon and try and get a better handle on JavaScript in general because it always just feels like this total slog whenever I have to use it.

I might do some reading on design and see if it’s maybe something I can learn after all.

I’d also not thought too much about this before, but apparently being a web content writer is a thing. I mean, of course it is! But it’s just become obvious to me now. Often these positions require some HTML and CSS knowledge but are primarily about the writing. Many, many websites have horrible grammar and spelling and I know I can do better. Apostrophes do not belong in plurals, people! I’m going to keep an eye out for any such positions that I may be able to apply to but I’ll continue studying web development, of course.

Further Reading

Lack of Progress

I don’t have anything super exciting to share at the moment. I’m currently working on a series of posts that break down web development concepts in a way that anyone can understand, but the first one isn’t ready yet. I’m planning on them being very thorough.

I just wanted to post so that people don’t think I’m abandoning this blog, since I’ve been pretty consistent so far and I plan on remaining that way. Of course, I also think that most of the people who ‘like’ my posts don’t actually read them because I don’t get a corresponding number of views. But just in case someone cares, I haven’t given up!

I have kind of neglected my studies these past few days. In some ways, I had an excuse. It was my birthday on Friday, and my husband bought me the Witcher III, and I played it for most of the day, with the justification that it was my birthday.

We went out on Saturday for lunch and then did a little window shopping, and when we got back I found it very hard to focus on the JavaScript calculator I was supposed to be making. It looks awesome – just like a calculator! But it doesn’t do any calculator-y things yet. And even though I don’t think of it as being particularly hard, I am finding it really hard to just do it.

I couldn’t focus much on Sunday either, and we went out for my birthday dinner so I wasn’t home in the evening – which is when I feel I get my best work done. Not that I’m complaining about going out. We went to a German restaurant and it was awesome.

What’s weird is I’ve found it pretty easy to write my stories. I posted the second chapter of my Baldur’s Gate fan fiction and I don’t see any problems continuing writing that in a reasonable time frame.

But JavaScript? Just. Can’t. Focus.

I’m thinking of just doing some Python instead. I think that, in the long run, that will probably be more beneficial. But even that isn’t something that really excites me right now. I feel I need some kind of amazing project to really push me to improve my skills, but I can’t think of what that project should be. I like games, so I think about making one, but then I worry that it would be too far removed from what I’d be doing at my potential job. I mean, surely it would have some benefit, right?

I guess I always just go back to my husband’s reaction when I told him about the Roguelike game I was starting. He seemed skeptical about its usefulness as a learning project. And I haven’t worked on it since because it makes me feel guilty, like I’m working on the wrong thing.

Oh well, I’ll at least try to get a few coding challenges done today. That’s better than nothing, right?