EmmaOKeeffeWA

[emmaokeeffewa]

Blog 12

It was our last web authoring class this week and Gemma had some great advice and tips on how we can all start working as freelance web developers. It was great to get some advice from someone who knows the industry well and she gave us a plethora of resources to get up started. After looking at all of our resources I thought it might be nice to see if I could find any more helpful tips and I found this article called How to Start Freelancing as a Web Developer: All You Need to Know. The article does have a lot of information about cost or salary amounts but since it’s an american article it only considers the american market. What I really like about this article though, was that it included a month by month action plan on how to get started which I think is a really good idea to use as a motivational tool.

If at every month you set a goal you are more likely to achieve it then by trying to do a bit of everything at once. Just by doing this module we can skip Months 1-3 and Gemma did touch on Javascript so we have a little head start on month 4.

A tip that I hadn’t considered before that again, Gemma also discussed, was finding a niche to work within. This is a great idea as you can really research and focus on what gaps there are in the market rather than trying to compete in an area that’s already over saturated. Some really great tips today and overall a great semester!

[emmaokeeffewa]

Blog 11

As I continue to create my design brief for my final assignment I wanted to look into some of the best homepage designs out there and came across an article that not only goes through some well designed homepages but it also has a list of points in what makes a “good” website and they are really helpful for putting together the brief. From the get go the tips are really helpful as the first one is about making sure your website clearly lets the user know “Who I am, what I do, and/or what can you (the visitor) do here.” The answers for this in terms of my assignment are “A website tribute to Ruth Bader Ginsberg, Give users info about Ruth Bader Ginsberg and why I admire her lastly you can consume content for the former reason”.

I was surprised that the tip to optimize your website for multiple devices wasn’t higher as it was fourth and I do think it’s extremely important in what makes a website “good”. This will be something I will try to keep in the back of my mind throughout the assignment and even went ahead and created mockups for my website in both desktop and mobile views. The only tip that doesn’t apply to my website assignment is that the homepage shouldn’t always be static and although that may be true this isn’t applicable to my assignment at the moment but maybe if I decide to use it for my portfolio it could be a neat way of showcasing multiple designs for the same website.

[emmaokeeffewa]

Blog 10

As we have been given our final assignment specification and part of it is creating a design brief with wireframes, I wanted to see what other wireframe tools are available out there. One of the articles I came across was this one on Hubspot - 11 Best Wireframe Tools for Your Website Design [2021 Guide]. There are two tools on the list that I have some experience in and they are Figma and Balsamiq. For me these two tools are really good but I liked using them for separate things. With Balsamiq I liked the look of the almost hand drawing look the wireframe templates had which I think is a really nice way of displaying the layout of your website. With Figma it’s much better for customisation and creating more in depth designs. In my current job our designers use figma so the designs I’m asked to implement are very specific down to the spacing, colours and fonts. It gives very little margin of error for the front end developer so that the well thought out and researched design flow can be achieved exactly how the designer wishes.

Although I haven’t really any knowledge of the feature, Figma also allows for plugins to be used for things such as accessibility colour contrast checkers. The biggest reason I have used Figma more now is that you can have 3 projects for free before you have to upgrade to their monthly plan for unlimited projects. With Balsamiq you can have a 30 day free trial but then for just two projects the price jumps to $90 per annum. For aspiring designers this cost is unreasonable and hence why I stopped using it.

AdobeXD was first on the list and it’s a tool I hope to learn more about using as we have gained a lot of knowledge in other modules using programs in the Adobe suite throughout the semester. I have heard it has amazing prototyping capabilities and the price doesn’t seem as unreasonable as Balsamiq. Since we have received the full Adobe suite for free for the duration of the course I hope to make use of it when learning how to use this tool.

[emmaokeeffewa]

Blog 9

Since we have been creating WordPress websites, I wanted to explore some of the other Content Management Systems available. While reading some of the comparisons between WordPress and Squarespace, I came across a point that although WordPress has so many great choices of themes you need to be careful of only using themes from a reputable source. This was something I hadn’t thought of and although I used a theme from WordPress.org I thought it would be a good idea to research it some more. This led me to an article called How to Detect Malicious Code or Malware on WordPress Themes which I thought was really useful and something all developers using Wordpress should be aware of.

Not only does the article explain why you should be wary of using themes downloaded from pirate websites but it also goes through some common issues you may experience if your theme has been infected with malware. Some of them included a sudden white screen, malware warnings flashing, WordPress .htaccess hijack and lots of pop ups and redirects. The article also outlines ways you can check themes for malware before you use them besides the obvious one of only using one's on WordPress Repositories. One of the handy tools was the online scanner tool, Virus Total which allows you to get a full scan of the theme before it’s even unzipped and installed on your WordPress website. This will be so helpful if I decide to continue working with WordPress.

[emmaokeeffewa]

Blog 8

Our class last week was introducing Wordpress and how we can get set up for our next assignment using the Content Management System. Part of the assignment is to add a plugin of our choice so I am investigating what plugins I would like to use and the one I think will be most useful for building my portfolio is a contact form plugin as it’s a very common tool included in websites these days. While researching what plugin I should use to this I came across this article 5 Best Contact Form Plugins for Wordpress compared. I didn’t realise I would be spoiled for choice which can be both great but also overwhelming when making a choice. This article at least allows me to narrow my search to 5 and guides me in what one will suit my needs.

The other part of our assignment was to create a child theme which we should then customise. Since we had videos on Moodle on how to install a parent theme and then create a child theme I was able to complete these steps with no issues. When it came to actually customising the theme itself I wasn’t sure where to start so I looked around and found a blog post on customising child themes with a few samples. It turns out I can just apply all my changes to my child css file which will override the parent css file. It might be a little tedious in figuring out the theme specific class or id names of the parent theme to override it’s styling but I can use the developer tools to figure this out.

[emmaokeeffewa]

Blog 7

During our lecture, Gemma brought up the point of adaptive vs responsive web design. This was something I never heard of as usually when I’ve heard people speaking about making a website suit different devices, they usually use the term responsive as if it’s a buzz word. It was news to me that it was actually a design principle and it has a sister called adaptive web design. It was interesting to hear the differences between the two.

Although we will be focusing on adaptive web design, for very good reasons, I still wanted to dive deeper into what are the differences and especially the pros and cons. Luckily, I came across this article that specifically goes through these advantages and disadvantages in a non biased way. It was fairly difficult to find an article that was not biased to one particular side. It is very interesting that people favour one over the other rather than understanding when the use cases are applicable to each one.

Adaptive

Responsive

The above pros and cons of each section were a great reference for me to use when deciding which methodology is best. From looking at the cons specifically, I agree with Gemma that adaptive is the best approach. Although there are disadvantages, such as more labour intensive and challenges with Search Engine Optimisation, I think the pros are worth the extra time and work to ensure an accessible and device optimised design. I find that most approaches that take more time usually mean an overall better end product as more care and thought are put into them.

[emmaokeeffewa]

Blog 6

Flexbox and Grid were the CSS topics of this week's lecture. I really enjoyed learning about these tools, especially after our assignment trying to use floats to layout items on a webpage. Using either a grid or flexbox would have been much better than trying to float right and left. One particular part that I found interesting was the use of the fr unit in the grid layout so that you can split each unit equally in the available space but you can also specify how that space is divided between them. A resource I found really helpful to visualize this is grid.layoutit.com which you can interactively change the fr unit for the grid-row or grid column and it will even show you the HTML and CSS is changes to according to your input so that it can be copied into your project which will certainly be helpful for any one who is learning this for the first time. There is also a link to CodePen which your changes will be imported to.

Another interactive way to help with learning, was practicing the fundamentals of flexbox through Flexbox Froggy. This is a game where you change the css to line the frog up with its lilypad. It starts off the justify-content property and goes through each value. Before you know it you are combining the different properties to line multiple frogs on to each of their own coloured lilypad. It’s such a simple game but a great way to make learning flexbox fun and there are a total of 24 levels too!

[emmaokeeffewa]

Blog 5

Since accessibility has been an important thing to keep in mind when building our websites I found a great tool that can be used to validate your website. The tool is the Accessibility Insights Tool by Microsoft. There’s both a desktop app and a browser extension which is really handy. There’s a fast pass feature and a full assessment. A lot of the checks are manual in the full assessment but I think it’s good to learn how to quickly identify some of these pitfalls so we can learn to code in a preventative manner. Doing this will reduce the amount of bugs that you might find when you put your web page through the assessment. Here is an example of one of the sections of the test that I did on my HTML and CSS website assignment. 

It was able to pick up the three headings I had on my webpage and what header type I had assigned it. Then it had a “How to test” area that gave me instructions on how to classify whether the headings it picked up were being used accordingly. In this case all three of my headings served as a descriptive label for the following content. 

This is definitely a very useful tool and it even covers colour contrasting to ensure websites are compliant for people who are either poor in vision or colour blind. Since the assignment required the use of only black, grey and white it wasn’t an issue but when building a more colourful website this feature will be super helpful.

[emmaokeeffewa]

Blog 4

CSS can be a little tedious at first and sometimes I find it difficult to use CSS to put my content exactly the way I want it but Gemma’s tip to use the developer tools to real time edit my css in the browser so that I can see immediately the result and then add it to my CSS file as a permanent change.

We covered using css in our lecture this week so that we could begin putting decoration to our semantic HTML assignment. Since I already have experience with CSS there was not a ton of new information for me to learn but it’s always great to get a refresher. There are some really cool things about css which I found in this article. Some of the items on the list are super useful to know like the shorthand properties that allow you to set multiple values at once on a property such as margin e.g. margin: 0px 10px 10px 0px. I actually ended up using this feature in my project for setting different padding values in the footer. 

A less useful but still interesting thing you can do with CSS is change the colour of a text selector or on a web page by setting the background colour on the ::selection property. This means when the user highlights the text on the webpage that imports the stylesheet it will appear the colour you specified in the CSS file. Lastly another really useful feature of css is the calc() tool. The example in the article is to use the tool when you want to start content on a page after your 300px nav. Calc will allow you to set the content width to the size of the viewport minus the nav width e.g. width: calc(100vw - 300px);

[emmaokeeffewa]

Blog 3

In the lecture and lab this week, I think most people began to really understand the importance of using a semantic structure when writing HTML code. When researching readings I decided to read what the Mozilla developer guide had to say about semantics as well as its role in accessibility. There were some really interesting general points (I have included a snippet of them below) about good semantics, some of which I already knew from our lectures such as easier to develop with and good for Search Engine Optimization. 

I know first hand that non semantic HTML can be more difficult to read and make sense of but I thought it was interesting that they mentioned that if you do it consistently from the beginning then it doesn’t take any more time writing semantic than non semantic. In my experience, this is so true. I’ve taken just as long writing a website in non semantic and then usually put in more time trying to figure out how to make it more accessible to users. The awareness of why developers should put that small amount of effort at the beginning to largely benefit everyone in the long run, is so important. The more we drill this home the better and frankly I wish it had been more of an emphasis for me when I was learning HTML the first time. 

The other point I thought was very interesting was that it is better on mobile and this has honestly never crossed my mind that because of the reduced file size using semantic HTML code would mean better responsive experience to customers. It is funny to me that developers would choose to be “lazy” and write non semantic HTML when it will really save time in the long run trying to organize focus order for screen readers, understand their own spaghetti code, try and optimize the site for Search Engine and make it more responsive on mobile, when this could all be done in the beginning with no impact on initial coding time. 

[emmaokeeffewa]

Blog 2

The lecture this week focused on tables and links and how they should be used. Tables were straight forward enough but I wanted to see an example of this used in the real world so I went to a site that I use often enough that I know uses tables. I used inspect element on the ASOS size guide web page and I very clearly saw the example Gemma layed out in use on Asos. It utilises attributes like colspan to make the column headers like “Waist” to span over the two columns “Inches” and “CM”. I was expecting the HTML not to be as clean and clearly defined as Gemma’s example but I was wrong and Asos are very clearly hiring good web developers.

We also covered links and images which the lab was very useful for. I never realised which image type would be best for each use case. To be honest I usually gravitated towards using PNG formats but now knowing that SVG can be scaled up or down to any dimension without loss of quality I will be keeping this in mind for future projects.

It’s great to see when the use of images are being taught that there is still an emphasis on making websites accessible to others. Defining alternative text to images not only can help users when images aren’t working but users who need an accessible website can still enjoy your web pages without loss of context or information. The Web Accessibility Initiative (WAI) even goes as far to categorise images and defines how they should ideally be used and captioned in relation to best practice. 

[emmaokeeffewa]

Blog 1

Initially when we were informed that divs were a thing of the past in regards to web page structure I was a little confused but when I saw this image from www.javatpoint.com along with the W3 definitions, it suddenly made sense to me what this statement meant. A reason that came to mind of why these HTML elements are vital in modern day are that it gives screen readers a hierarchy to follow which is another win for making the Web more accessible to every single person. Having a standardized structure in HTML will truly ensure website code is clear and easy to understand as the website hierarchy won’t be hidden in a mass of divs.

The topic of our lecture this week was “HTML Elements/Lists”. This in conjunction with the lab gave the class a basis on how the structural elements of HTML works. Although I’m very familiar with HTML, it was interesting to hear that there has been quite a shift through the standardisation of it to HTML5. What I found the most interesting was that tags such as <strong> and <em> have been evolved to have meaning attached to them in the context of Accessibility and screen readers.

This inspired me to look at the other differences between HTML4 and HTML5. One of the most used resources I have used for understanding HTML has been W3.org and I found they have an informative section that would help me to understand these differences such as new attributes like header and footer are extremely helpful in defining structure for web pages.