#100DaysofCode – Weeks 10 – 12

laptop-1149412_1280.jpg

Week 10 saw me get more into CSS, learning about variables (which I never knew was a thing), and the basics of applied visual design. Despite me being irked about its recent and sudden addition, Free Code Camp’s new Applied Visual Design section was pretty interesting. As it turns out, with CSS3, not only can you do the usual manipulation of HTML to make fonts bigger, coloured, etc, but you can also use CSS to animate elements within a web page (eg. beating hearts, bouncing balls, twinkling stars) by simply adding a few shapes together, and altering their size, position, and/or colour over a set time.

In week 11 I moved on to learning about website accessibility. This was a little less coding, a bit more theory, but introduced concepts required by websites to allow them to be better accessed by people with visual impairments and the like. I did, however, get to learn some new HTML5 markup that I’d not read about before, such as the tags <main>, <header>, <footer>, etc.

Following on from that, I got back into a bit more CSS code, and covered a couple of new responsive layouts that came with CSS3 that I didn’t know existed, namely the CCS Flexbox and CSS Grid. Much like most of CSS, this was pretty simple to learn, and I may have to go back over my previous Responsive Web Design Projects, and various coding practicals, and incorporate their use in place of the slightly more cumbersome .col-md-* grid classes.

In week 12 I began tackling FreeCodeCamp’s newly added Responsive Web Design Projects. Thankfully, there were only three added to this section. What I’m not so thrilled about is that they removed the checkboxes from beside the ‘user stories’ (i.e. the bits you need to ensure are included in the project to pass). Their presence made keeping track of what you needed to do easier, now I have to make comments everywhere in my code to make sure I don’t miss anything out.

That aside, I managed to finish the projects without too much fuss (although containers and grids gave me a bit of grief) and as well as a generic ‘form’ and a ‘technical document page’ I created a ‘product landing page‘, which I adapted for my novel (hey, I’m a struggling author, I need to self-promote whenever I can!).

That all done, I accidentally stumbled on the section where I could mark off my projects as complete and get my certificate for the Developer Certification section.

Responsive Web Design Projects Certificate

With that achievement successfully in the bag, I could no longer put off the inevitable, and I returned to the newly expanded Javascript section to wage war on the redesigned console. It does not go well. I’ve said it before, but I miss the previous functionality of the ‘return’ statement that came with FreeCodeCamp’s old coding console, and the alternative (using F12 and the console.log statement) is just muddling.

I doubt I’ll get any more certificates before the end of my challenge, since the Javascript curriculum has expanded dramatically, and my work-through of the sections has been curtailed considerably by the new console. However, I’m sure I’ll keep working on coding during my free time (just not every day, especially when I start my second year of uni study) and maybe one day I’ll get another certificate.

Advertisements

#100DaysofCode – Weeks 7 – 9

business-1839876_1280.jpgThe last few weeks have seen me carrying on my daily coding challenge.

In week 7, I finished off Free Code Camp’s Intermediate Front End Development Projects, with the last project being another API-based one; pulling in information from Twitch to load a list of online streamers. Again, getting my JSON function to work was a nightmare, and again, I had to resort to using someone else’s code for the basis of my script. However, unlike with my Wiki search engine, the initial coding I’d written wasn’t too far off what needed to be done. I wanted to loop through an array, and push a person’s name, then their online/offline information, into another array. But no matter what I did, I just couldn’t get the two things to happen simultaneously, and correctly. I’d either get a list of people’s names, followed by their info, or I’d get the people listed next to their info, but their names would be listed as ‘undefined’. In the end, it turned out that all I needed in my for-loop was the word ‘let’ at the beginning, which let the function retain the memory of its position in the array long enough for it to extract the info I needed. Jobs a good’un!

For the rest of week 7, and heading into week 8, I made headway on Free Code Camp’s Intermediate Algorithm Scripting problems. I took a rather haphazard approach to completing the tasks, as I couldn’t work all of them out straight off the bat, so I picked and completed the easier ones, with plans to come back to the more convoluted ones later. One I had no choice but to use someone else’s code, namely the one calculating the lowest common multiplier between numbers, not because the coding confused me, but the actual maths did. I’d made a promising start, and had made a program that calculated the lowest common multiplier between two numbers that worked fine, only to find the question wanted the lowest common multiplier between a range of numbers. I just couldn’t figure out the maths for that, let alone write code for it, so I had to take the easy way out.

Week 9 saw my day-streak finally broken, thanks to Free Code Camp’s site undergoing a complete overhaul and being offline for a day. When it came back up, I found that the Javascript terminal had been completely revamped, and no longer had the ‘return’ functionality that allowed me previously to troubleshoot my script as I went. Someone pointed out I could do similar using F12 and console.log, but it just wasn’t the same. Additionally, I found new sections added to the modules I’d already worked through and marked off as complete. Frustrated, I bounced, and headed back over to Codecademy to learn the basics of SQL, which was the last programming language I needed to give a once-over before the second year of university starts in Sept/Oct. As it turns out, SQL is a lot less scary than I was thinking it was going to be. Unfortunately, Codecademy doesn’t cover a rather important bit of information, namely where/how tables are stored. Here’s hoping my uni course covers that.

With that done, I’ve headed back to Free Code Camp, and will spend the rest of my 100 days going over the new sections, trying to get the JS terminal to work (hopefully by then they may have reintegrated the return function again), and perhaps moving onto the ‘advanced’ sections if I have time.

#100DaysOfCode – Week 6 (and a bit)

business-2717066_1280.jpgThis week has been all about heartbreak and intermediate front end development projects.

First up, the heartbreak! As I reported last week, the housemartins had returned, and had finally settled into their old nest. Then, just days later, I opened my curtains to find blood on the end of the guttering, and their nest missing a sizable chunk out of its front.

I have no idea if mum and dad are both alive, though one, maybe two housemartins have been spotted flying through the clouds of midges that hang out in the back garden, so there’s hope. I’m genuinely gutted for them! I was fully expecting them to raise two clutches this year; now, maybe not even one. The culprit is unknown, but could either be a woodpecker (they’ll rip through a wooden birdhouse to get at fledgelings, so a muddy wall is no deterrent to them) or magpies (there’s a large family that live in the hedgerow). Nature, why you gotta be so cruel?

My coding this week has, likewise, had its ups and downs. The first two Free Code Camp projects I tackled were relatively easy, and in just a couple of days apiece I created a random ocean quotes generator and a weather app. They’re a bit rough-and-ready, but they work, and that’s the important right now. The third project, however, gave me major issues. It’s a Wikipedia search engine that pulls in entries from the main site based on user-entered search terms. I created the random article button no problems, but actually getting the programme to load a list of Wiki pages stymied, as Wikipedia’s help page on its API was being rather fast and loose with the term ‘help’. In the end, I resorted to copying working code from someone else, then modifying it by adding my own ‘click-to-search’ button. It’s not 100%, because if you type too fast into the search box, it gets confused (that’s the fault of the code I copied over, not me mucking about with it), but overall it works.

Man, I’m hating on JASON right now, and I still have one more project to go. Although, in my defence, Free Code Camp’s coverage of JASON topic was pretty quick and simplistic, so it’s no wonder I’m confused half the time.

#100DaysOfCode – Week 5

Code4

Neither noisy house martins, nor the hottest May Day Bank Holiday on record, could stem my coding tide, and the start of week 5 saw me covering the basics of JSON APIs & Ajax with Free Code Camp, after which, I had a little detour to Codecademy to learn the basics of PHP.

In actuality, Codecademy’s PHP course has been discontinued, and if you go straight to their website, it’s not findable. However, they’ve not actually deleted it fully, and Google remembers all (unless EU law dictates otherwise). So when I did a search for free PHP courses, Google threw it up. It doesn’t completely work, as whenever you finish off a section of the course it only registers as 1% complete, but you still get the badges associated with completing each section, and the course code itself still works.

Honestly, I had no idea what PHP was about, having never touched it before, but it turns out it’s relatively simple. Basically, it’s like the love-child of HTML and JavaScript, and instead of writing all your JS code in script tags at the top of your page, you can pop it in the <?php ?> tags anywhere in your HTML code, and it can generate numbers, create lists, and add text directly to the web page. In many ways, it’s simpler than JS, except objects, which are a bit more convoluted when it comes to creating them.

Overall, I feel as if I’ve got the hang of basic PHP, so I’ll be ready for my Open University module in Web Technologies come Autumn. I still need to go over the basics of SQL, but I think I’ll go back to Free Code Camp and do a couple of their Intermediate Front End Development Projects first, just to mix things up a bit.

And what do I mean by noisy house martins? Well, the little, feathered, crap-machines that built a nest over the window of my room last year returned in late April, and have finally settled down to nest, and boy, do they like to argue with each other….

This is 12 hours a day, 7 days a week! How I missed them!

#100DaysOfCode – Weeks 3 & 4

Code3

My #100DaysofCode Challenge has been going on unabated. I’ve been doing about 2 hours every weekday, then fitting a one-hour quickie in on Saturday and Sunday.

Overall, things have been going well. I’ve worked through arrays, the basics of functions, Booleans, if/else/if-else statements, the switch statement (which is very handy to know), for/while loops, and objects. I struggled a bit on day 15, as my mind just didn’t want to focus, but I ploughed on regardless, and got through all the theory lessons.

After the theory came the practicals, in the form of basic algorithm scripting practicals. There were 16 overall, and I somehow managed to do all of them with only a little bit of help from Google for one of them. There is certainly something to be said about the feeling of accomplishment you get when you press ‘run’ and everything works.

I did get stymied by one practical, and in all honestly, I thought I was going to have to give up and just copy the answer. It took me nearly three days to get my function to work, whereas the other practicals generally took me less than an hour. In the end, it was one of those cases where you go, “oh, I wonder what will happen if I do this small line of code,” and suddenly everything worked. Typical!

Week 5 will see me finishing off the basic theory, then I’ll have to choose whether I carry on with Free Code Camp (and do the Intermediate Front End Development Projects), or take a detour to learn the basics of PHP in preparation for my Y2 uni module in Web Technologies. As usual, I’ll keep you posted.

#100DaysOfCode – Week 2

Code2

For my second week of the 100 days of code challenge, I began with the eportfolio projects. This ended up being a relatively simple task, but I did get stymied a couple of times. The first was when I tried to figure out a way to keep my menu (nav) bar fixed to the top of the page. One solution I found that was a possibility was data-spy=”affix”; however, it wouldn’t play ball. In the end, I found a different (working) solution by accident, while looking at padding and margin settings on W3Schools. There, further down the page, I found the command  ‘fixed-top’. Ureka!

The next problem came when I tried to get the menu items to highlight as I scrolled down the page. It wasn’t a necessary requirement for completing the project, but as the example portfolio had it, I tried to include it. Unfortunately, I didn’t have any luck trying to replicate the functionality. I found something called data-spy=”scroll”, but again, it did nothing. There is a possibility that data-spy is a JavaScript function, so as I hadn’t covered JS in the course yet, I abandoned the idea, and marked off my project as done.

With my basic portfolio complete, it was time to actually start re-learning JavaScript, and the rest of the week saw me covering variables, strings, and arrays, which are all fairly simple to grasp (though indexing arrays in arrays does give me a bit of a headache).

Overall, I seem to be getting along okay with Free Code Camp’s course, and I’m making good progress. Hopefully, things will continue this way during my next week! I’m also hoping that as things progress, I’ll have some proper projects to link to my portfolio, otherwise, I’m going to have to make up some websites to create myself.

#100DaysOfCode – Week 1

blur-1853305_1280.jpgMy first week of coding went off without a hitch (pretty much).

I worked through the introductory sections in Free Code Camp, which covered HTML, CSS, Bootstrap, and jQuery. I’ve done courses in all these languages before with Codecademy, but I’d forgotten quite a bit. HTML and CSS I had no issue with, but I’d forgotten Bootstrap was even a thing, and had forgotten everything about jQuery, so it was good to cover them again. I even learnt a few new bits and pieces, such as the ‘alt’ attribute in images, and how to import Google fonts.

When I once again got the hang of using these languages, I worked quickly through the practice lesson sections, and with only one minor, initial hiccup. I had long-forgotten where, in the jQuery ‘document ready function’, I was supposed to stick each new function, but that was partly Free Code Camp’s fault, as they didn’t explain it clearly, and a quick look at my old notes showed me why everything was going gaga.

jQuery ‘document ready function’
$(document).ready(function() {
});

jQuery functions goes here…
$(document).ready(function() {
$(“button”).addClass(“animated bounce”);
});

not here!
$(document).ready(function($(“button”).addClass(“animated bounce”);) {
});

Doh!

With the refresh done, it was time for the training wheels to come of, and to delve into Free Code Camp’s basic front end development projects. The first was a simple tribute page. Unsurprisingly, being the biologist that I am, I did one for the man, the legend, Sir David Attenborough.

Doing this page made me realise one thing; coding sucks me in! I had a problem with trying to centralise the image, and instead of just tackling it afresh the next day, I fretted about continuously during my two hours of exercising, and then spent my entire evening mucking about with the code.  So much for just an hour coding a day! In the end, I cheesed the code a bit, as I couldn’t get the photo caption font to wrap properly, so I stuck a <br> in it.

However, all this faffing meant for my second week I could begin the second project, which is an important one; a web portfolio. This is something I’ll need to display my abilities to future employees, so is something I’ll be taking more time over. I’ll let you know how it goes.