It's a very simple blog site, but we all start somewhere and I'm proud of myself of what I have managed to achieve in such a short amount of time, starting from scratch essentially. I just finished this now and my head hurts so I thought writing my experiences as a blog post here would be a nice way to calm down.

Django... what's that?

I had heard of Django before, but had no idea what it was. I can't even remember where I heard it or why I should care about it. But a quick Google search allowed me to discover that some pretty dope sites are made using Django:

• Disqus
• Instagram
• Pinterest
• NASA
• Spotify
• Youtube
• Eventbrite

To name just a few (check out the sources for more). As soon as I saw these names, that instantly made me think this is something I want to learn. I've always wondered how those websites were made so I thought it'd be cool to essentially get a behind the scenes look on how they work.

Learning Django from scratch

After a few more Google searches, I came across a documentation-type tutorial on Djangogirls. I'm not a girl but it was free and seemed pretty thorough at first glance so I thought let me just follow through with it.

The project was to make a simple blog site using Django and Python.

I followed the tutorial carefully over two days and followed along by making my own project as per the instructions. With every bit of code that I was asked to run or type, I would manually type them out rather than copy and paste them because I think it helps with learning if you actually do it yourself.

Plus you actually make mistakes and then learn how to format the syntax of stuff correctly. I think that if you just blindly copy and paste then you don't have a clue what's going on and you will get stuck very quickly when you run into errors.

I will say that halfway through the guide I started becoming a little bit lost and there was a point in the CSS section where I literally got so many errors:

It is very frustrating when you get errors, especially when you've done exactly what it said and have checked like 10 times but still have no idea what's going on.

Thing is, I started this tutorial to learn Django. I didn't realise it would involve also Python and HTML and CSS and Git and PythonAnywhere along the way. I have never learned HTML or CSS before but have learned a little bit of the basics of Python and Git.

I followed along anyway because the guide was pretty good in explaining stuff and I kind of enjoyed the challenge. All those errors in the CSS part literally did my head in though and I was so ready to quit but somehow I managed to fix the errors and the site worked in my localhost. It was very exciting!

Not going to lie, after the CSS part I was literally so lost and I didn't understand what was going on but I followed along anyway. I had also never used PythonAnywhere before so that was a new learning experience as well.

Frustrations

Ok so I'm fairly new to programming but have experienced enough errors to realise that errors are a given. Like errors are expected. No errors along the way means you did something wrong. I don't even approach things without expecting errors anymore. They are still annoying, but actually, the more errors you see, the more you learn. And some errors are actually helpful and tell you what's wrong. Or many errors are actually on Stackoverflow with a nice solution.

The annoying ones are where you literally can't figure it out and you're kind of stuck and don't know what to do. Yes, I don't have the confidence to post on Stackoverflow yet, mainly because I haven't build up enough programming knowledge to even understand some of the answers. And also there's a whole ettiquette on how to ask questions on Stackoverflow, which kind of seems scary for now. But I'll get to it one day!

Also, for some reason my live site on PythonAnywhere looks different to my localhost one:

Check it out: abhiyanbeta.pythonanywhere.com

The tutorial did try to explain, but I think I was in the "head hurts" phase so I kind of didn't pay much attention to it. Also the site does not have a SSL certificate so says "Not Secure". One of my pet peeves! Unfortunately the tutorial didn't mention how to fix that so oh well.

Have I mentioned my many CSS errors enough times? Well my CSS file also didn't work so the fonts and colours I picked didn't show up. Whatever I did, the site wouldn't refresh and update the CSS styling. And then randomly it worked at one point, then stopped working again. Very annoying as I had no idea what was going on so I just left it how it is. Doesn't look the nicest, but it is still something.

Conclusions

Yes the project was very very simple and I didn't make the next YouTube website, but it was such a relief to actually see it working after so many errors and headaches. So I would say it was a successful first project, considering how I was going to completely just give up at one point, and I learned many things along the way including Django, HTML, CSS and PythonAnywhere.

While I still don't fully understand how everything works, it was a good starting point to understand how websites actually work and I can only further build on my knowledge from here!

Source

1. https://www.netguru.com/blog/top-django-apps
2. https://ddi-dev.com/blog/programming/top-sites-built-django-framework/
3. https://tutorial.djangogirls.org/en/

HTML tag

When writing in HTML, we must first introduce this by using the tags. Everything we want to write goes in between:

<html>

<CONTENT GOES HERE>

</html>

Head

The information in the head is not displayed on screen. For example, it may contain the webpage title:

  <head>
    <title>Abhiyan's Django project</title>
  </head>

Body

Contains everything else displayed as part of the web page. Note the div tags which divides sections.

  <body>
    <div>
      <h1>Hello there</h1>
    </div>
  </body>

Basic HTML

Here is my first webpage written in HTML!

• [1-4] Opening HTML tag and title of the webpage
• [6-9] Introducing the body, H1 title
• [11-14] H2 and H3 subtitles
• [16-22] Line breaks and paragraph tags in the body
• [24-27] Some quick formatting in italics and bold
• [29-31] Link
• [33-43] Lists and closing tags

<html>
  <head>
    <title>Abhiyan's Django project</title>
  </head>

  <body>
    <div>
      <h1>Hello there</h1>
    </div>

    <div>
      <h2>This is my first Django project, how exciting!</h2>
      <h3>Indeed, very exciting!</h3>
    </div>

    <div>
      <p>Hi there!</p>
      <br>
      <p>These div tags define a section of the page.</p>
      <br>
      <p>And these br tags create a break (no closing tag).</p>
    </div>

    <div>
      <p>It works! Isn't that <em>very</em> cool?</p>
      <p>It works! Isn't that <strong>very</strong> cool?</p>
    </div>

    <div>
      <p>Visit Google by clicking <a href="https://google.com">here</a></p>
    </div>

    <div>
      <p>Go to the shop and buy:</p>
      <ul>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Banana bread</li>
      </ul>
    </div>
  </body>

</html>

Preview

Here's what the above HTML code looks like:

Source

1. https://tutorial.djangogirls.org/en/html/

Install git

Install git from the official website: https://git-scm.com

Authenticating git

We need to set up our Github username and password. Once git is installed, set it up using these commands on Terminal:

git config --global user.name <Github username>
git config --global user.email <Github email>

When prompted, type in your password and hit enter.

To check which user credentials are currently logged in:

git config user.name
git config user.email 

Basic command line

• Creating a directory: mkdir <folder_name>
• Creating a file: touch <filename.txt>
• Deleting a file: rm <filename.txt>
• Deleting an empty directory: rmdir <folder_name>
• Delete a directory with all files inside it: rm -rf <folder_name>

Initialise git

Change directory into your project folder and initialise git as follows:

git init

Quick diagram of how git works

Staging

To see which files are in the staging area:

git status

To add a specific file to the staging area:

git add <filename.txt>

Adding files

To add files to the staging area, there are a few different commands depending on what you want to do.

To stage all changes (including new files, modifications and deletions):

git add -A

To stage only new files and modifications (not deletions):

git add .

To stage only modifications and deletions (not new files):

git add -u

By the way:

• git add -A is the same as git add --all
• git add -u is the same as git add --update

The . means the current directory:

Commit

To commit the files in your staging area:

git commit

Source and more info

1. https://dev.to/tracycss/git-and-github-for-beginners-po3 (incomplete)
2. https://stackoverflow.com/questions/572549/difference-between-git-add-a-and-git-add

Formatting text

You can format text into italics, bold, bold italics and strikethrough. Markdown doesn't have the ability to underline.

Bullet points

You can use either of three characters to make bullet points using markdown. In a new line just type *, + or - followed by a space to make a bullet point.

Inline code

To create inline code block like this, just wrapping your code between two of these ` characters.

Code block

To insert a code block using markdown, place your code between two sets of ``` characters. On the top line, you can specify the language to get the colouring, as shown below.

If you don't specify the code language, you don't get the colour formatting.

Dividers

You can divide sections by using three asterisks in a row which makes a divider.

Dropdowns

This one is my favourite! You can collapse text inside a dropdown by using the snippet shown below:

Headings

This is useful for formatting your documents nicely, just use the corresponding number of hashtags to define the heading level. You can go up to Heading 6.

Images

You can insert images by following the syntax below. The text inside the square brackets serves as alt text, which appears when you hover over the image.

Quotes

You can insert quotes in markdown using the > character on a new line, as shown below.

Tables

Here is the syntax to make a table in markdown. Use the | and - characters as shown below. Notice how you don't have to format it nicely in markdown but it will still work!

If you want, you can also format it nicely.

In the second table below, column 2 is centre aligned and column 3 is right alined by using colons as shown.

Todo

You can create a todo or a checklist in markdown by using the syntax below.

Links

You can insert inline links in markdown by following the syntax below. The text that is visible is inside the square brackets and the URL is inside the curly brackets.

That's it for now, if you have any more tips and tricks in markdown, let me know.

I would like to credit these sources below which have been helpful for me in learning markdown.

Sources

1. https://www.markdownguide.org/cheat-sheet/
2. https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

To insert pieces of code inline just like so, wrap the code between ` and ` characters.

To insert longer blocks of code, wrap them between ``` and ``` characters.

Example:

<pre><code class="javascript">function test() {
    console.log(&quot;Hello World&quot;);
}</code></pre>

for i in range(1, 10):
    print(i)
else:
    print("Loop finished.")

Links

To insert links, select the text you would like to make into a hyperlink and click the paper clip icon. Insert the link.

I am currently working on localhost.

I'll try to commit these changes using git and see if it works.