wa-02

[wa-02]

I love W3schools!

I have posted about w3schools before in this blog but i honestly can’t say it enough. It is one of the most helpful websites I have found through my struggle that I’ll try call a ‘journey’. It has help and tutorials on everything regarding coding/programming.

So I started coding my first website from scratch and my mind went blank as soon as I started. I thought I was in for a world of trouble, but I went onto w3schools and low and behold it even has tutorials and help on starting a website from scratch. So after quick refresher I was ready to go.

I find myself using this referring back to this specific tutorial quite a bit during my coding process and it helps me every time. Not only has it given me help on issues I can’t seem to fix myself but it has also given me new ideas on what I can add to make my website seem a bit more professional and less basic.

[wa-02]

My Sketched Wireframes!

Sometimes I like to take a break from the computer, take my eyes off of coding and pick up a pencil. I drew my wireframes website brief as I wanted to see a physical copy clearly before me and not just on a screen. 

Wireframes are very important in WebDesign as they are your structure and layout, the foundation of your website. They are usually black and white and don’t have any design related features within them, they are basically just a blueprint of your website.

Using wireframes is an important communication tool in any web design project. It not only gives the designer a chance to see the structure of their website but also allows them to portray this structure to their client without any distraction of design elements or other features of the website such as colour and font.

It’s a simple but very important step in a any web design project and shouldn’t be skipped! 

[wa-02]

Building a Website Brief!

I have to build a brief for my ‘hero’ or someone that has inspired me in my life. I ave never done brief but I found this article on Elementor website that gives you the perfect help to getting started. It almost breaks down the brief into a series a questions that when answered you basically have your brief done!

It was amazing help and it broke down everything and allowed me to prepare my site well i advance of starting to work on it. I used this article as help for my brief by going through each of the 10 points that the author makes and fitting them to my web design. Breaking down my brief into these ten parts allowed me to be able to expand on each point quite a lot, enough to almost go over the word count for my assignment.

This article was great find and a great help for my brief and i recommend having a look at it if you’re a beginner doing a brief fr yourself.

[wa-02]

Organising your Content/Code

In the majority of my early pieces of work I was only really using <div>s to organise my web pages/code. for me it was just the easiest way to do and I never thought to try anything else. My lecturer posted this article to our class forum and after reading it I can see how wrong I was to only use the <div> tags. 

This article is very clearly laid out and it gives you clear examples of the different ways to organise your code. The interactive examples allows you to see exactly what the code is and how it is clearly being applied on the webpage. It shows and explains how structuring your content the right way is highly beneficial during and after your work progress. Not only does it keep your code clear and legible but makes it easy to go back and fix errors if there is any.

It has definitely shown me different ways to code and how I should be using it in the future. I will definitely be trying to incorporate Grid and flex box in to future projects with my <div>s :)

[wa-02]

Ahh Youtube, my saviour when it comes to coding. As I am still a beginner and not very good, actually first of all I am not a good typer let alone coding! But I am slowly improving and I am enjoying it more the more I improve, but youtube is my saving grace. For a beginner youtube has unlimited tutorials from many different channels. You can find many different levels of tutorials being taught from experienced programmers who were beginners like me at one point.

These youtube tutorial are fantastic and have helped me whenever I have issues with my work, it’s sometimes as easy as typing in the exact issue you have wrong and youtube has a solution. 

So as a beginner myself I highly recommend using youtube if you can't find a solution to your problems with coding. There is something there for people of all levels.

Some youtube channels that I used: 

https://www.youtube.com/channel/UCs6nmQViDpUw0nuIx9c_WvA

https://www.youtube.com/user/gotreehouse

[wa-02]

Struggles with FILEZILLA!!

Filezilla is an open-source, cross platform FTP programme. It is a software used to transfer files over the internet. You can also update, download, delete and edit files on a remote server. 

But it’s not as easy as that, at least for me it wasn’t. If I didn’t have step by step videos showing me how to use it then I would’ve struggled to comprehend it. It took me a while to download Wordpress through Filezilla and don’t get me started on adding features to my websites on Wordpress. Every time I seemed to get one thing right, another thing went wrong. If files hadn’t failed to transfer over then it was that there was not enough space or that I accidentally added it to the wrong folder. Either way there always seemed to be an issue. 

But in the end it all worked out and I was able to do the work I needed to through Filezilla. I found that once I got the hang of it then things seemed to fall into place. So I recommend that if you’re using Filezilla just take it slow and it should work out.   

[wa-02]

https://www.nimbusthemes.com/how-to-customize-your-wordpress-website-with-css-the-right-way/

Learning about WordPress.

We were provided with this article in class and after reading it I am even more interested in learning about WordPress. Learning a new school can be daunting and nerve-racking. I am quite curious to see how it works and what it is like compared to straight code. Ho wit may benefit or hinder you.

This article tells you how to customize WordPress with CSS, it brings you through it step by step. The layout is clear and the imagery showing you the steps make it easy to understand. I would recommend anyone using WordPress for the first time to check it out.

This article has peaked my interest and I am looking forward to use my previously learned knowledge of CSS to use with WordPress.

[wa-02]

Finished Website!!

Wow what a feeling! Such a relief finishing your first bit of proper coding and seeing that green tick on the HTML validator. The weight and stress that has been lifted feels great. I knew that if I fixed the issue from my last post about my image being too big and overlapping the footer that I stood a good chance of figuring the rest out.

It’s amazing how fixing one issue no matter how big or small makes everything fall into place. After I fixed this I was able to carry on with my CSS and style the rest of my website. It was actually fairly easy after that. by splitting most of the website into components and giving them classes, I was able to style with ease while not making many mistakes. The only other difficulty I had was making my links to other websites look normal. This was easy once I added the class feature into the href code. So all in all it was tough but rewarding experience for me and I somewhat look forward to my next exercise.

[wa-02]

Mistakes of Website Coding.....

So far it’s been pretty tough. Every time I get something right, something else messes up, I constantly have my head in my hands with frustration. At the same time, I am pleasantly surprised that I was able to write this much code for my first time.

As you can see in the first image, I have the layout pretty well done, except for where you see the arrow labelled 1 that my text hasn’t aligned to the left or fallen under my image. Also that my image at arrow 2 is coming over my footer. For the life of me I can't seem to figure out how to change this and I know that if I fix one, that it could easily fix the other issue as well. 

The 2nd image is unfortunately the results of me attempting to fix the issue. My image has now become so big that it swallows up the whole website. I have attempted using <div> tags, putting it into different class to the other image. Trying to size and place it in my CSS, but so far it hasn’t worked. So the only thing I can think to do is take a break and try again tomorrow. :)

[wa-02]

Creating a website!!

This is my first attempt at creating a website as one of my assignments. Is it tough? Yes it is! Stressful too! I am finding myself sitting at my computer for quite a while most days trying to figure everything out. If it wasn’t for W3Schools I would be so lost. I have found so many useful tips and tricks that have made it easy for me to figure out my mistakes. Using this website alongside a HTML validator I can easily pinpoint and correct my errors.

I have almost got my first page down. The header and footer are completed and I am now adding in an image and biography of myself. One main issue I had with the header was linking the home page to my name. I couldn’t figure out how to do it without have a separate link underneath the word. But in most cases Google is your best friend. So after I searched for a while I was able to find the solution using both my notes and W3Schools website. Once completed it all seemed so simple. But it never seems to be the first time. Now i just have to keep going and hopefully complete the assignment soon. :)

[wa-02]

I wrote some CODE!!

In fact I wrote it quite a while ago, I just never got around to uploading it. But as far as I can tell (what the HTML Validator said) it’s correct. So I’m quite happy with myself. The relief of getting that green tick made it all worth it.

The basic ones were quite easy, getting the template and title was fairly straight forward, nothing too difficult. Where I really struggled was with <p> and <div> tags. I wanted to have words one line after each other, and for the life of me I couldn’t figure out that the <div> tags cannot go inside the <p> tags. What a beginners move right? Well it took me a while to figure this out and quite a few google searches.

Thankfully I came across a post in Stackoverflow. I’m sure anyone that has written some form of code has come across it. I find it’s similar to a reddit forum for coding / somewhere to find work opportunities.

Here’s a link to where i found the solution to my issues:

https://stackoverflow.com/questions/8397852/why-cant-the-p-tag-contain-a-div-tag-inside-it

[wa-02]

WRITING CODE.....

Where do I start? Pfft it’s tough. I’m a complete beginner and to be honest I struggle to get to started and to get to grips with it. For me it just seems so daunting. It’s scary isn’t?

I keep trying to get going but just can’t seem to get the hang of it. But I am here to share my struggles and to also use this platform as way to vent my issues and maybe get some feedback. I’ve began trying to comprehend HTML, just the basics to start with. Buts it’s completely foreign to me, a whole new language to learn from scratch. The more I write the scarier it seems. So far I’ve been using Visual Studio Code. I’m able to write a title, copy a body of text, split it into paragraphs and change the sizing of certain parts. Though even these simple tasks took me a while to do and stresses me out a bit. I do have to say that it was quite rewarding when it actually went right. The satisfaction I got from it was pretty good. So I think I’ll still continue to work at it and share my progress here.