2022
learning JavaScript
practicing HTML and CSS
“If I waited for perfection… I would never write a word.” ~ Margaret Attwood
30 08 2022 ~ Tuesday
Learning Eleventy from scratch.
I have a terminal and Node v 16.14.2
Starting from Scratch Lesson 1 intro
Another True story
It’s gonna be A Human Future
06 06 2022 ~ Monday
Be the browser’s mentor, not its micromanager.
How to build exellent websites. by Andy Bell
CSS practice Glitch remix
True story
CSS is Awesome CodePen
30 05 2022 ~ Monday
BBC’s Global Experience language GEL
Design pattern how-to’s.
Understanding users.
7 principles to help create great digital experiences for children.
How to design for children
09 05 2022 ~ Monday
CSS grid calendar.
Some basic boxes: calendargrid
02 05 2022 ~ Monday
Why is front end development so hard?
Useful answer to the question: quora
13 03 2022 ~ Monday clock
08 03 2022 ~ Tuesday
Proceeding to set up an 11ty site. Started: 14:00 UK winter time. By 18:40 the shiny new site said Hi! Browsersync serving the index.html file and README.md from: _site. Woohoo localhost:8080! The command line instuction to make the html file hadn’t worked kept giving ‘< was unexpected at this time’ error, so made the file in VS code in the browser instead. Rest of the evening figuring what to do next.. perused lots of starter projects, reasons for using a styleguide, and a poem.
And then, some Sanity.
29 02 2022 ~ ! Not secure Flora 🇺🇦
22 02 2022 ~ Tuesday
Found an online book and read some reminders of reasons to Learn JavaScript w3docs
” There are at least three perfect things about JavaScript:
- It supports complete integration with CSS and HTML.
- It provides straightforward ways of doing simple things.
-
It is supported by almost all the major browsers and is performed by default. “
Resources:
MDN JavaScript
Frontend Masters Bootcamp
FreeCodeCamp JavaScript Algorithms and Data Structures
w3docs Learn JavaScript
Digital Ocean How To Code in JavaScript
W3schools JavaScript Tutorial
I think when you have a lot of jumbled up ideas they come together slowly over a period of several years ~ Tim Berners-Lee
Welcome to GitHub Pages
How this site works
You can use the editor on GitHub to maintain and preview content for the website in Markdown files.
Whenever you commit to this repository, GitHub Pages will run Jekyll to rebuild the pages in your site, from the content in your Markdown files.
Markdown
Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
Syntax highlighted code block
# Header 1
## Header 2
### Header 3
- Bulleted
- List
1. Numbered
2. List
**Bold** and _Italic_ and `Code` text
[Link](url) and 
For more details see GitHub Flavored Markdown.
Jekyll Themes
Your Pages site will use the layout and styles from the Jekyll theme you have selected in your repository settings. The name of this theme is saved in the Jekyll _config.yml configuration file.
Support or Contact
Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.
2021 Archive (HTML and CSS)
When I publicly committed to another #100DaysofCode
Where your focus goes your energy flows. 🦋 🐛
From Monday 17th May 2021 to Tuesday 24th August 2021
#100DaysofCode @ka11away’s Official Site
#30DaysofHTML Learning with Jen email course
#150DaysofHTML Deep dive with Schalk Neethling email course
Frontend Masters Bootcamp
Udacity Classroom
A live calendar for June
June 22nd 2021
Day 36 - A bit of Git - #100DaysOfCode
A deeper dive and rummage into Git concepts prompted by this thread …
The most important GIT CONCEPTS
— Iren Gataullina (@IrenSayWhen) June 14, 2021
Stop copy-pasting, start Understanding
- THREAD -
June 21st 2021
Day 35 - HTML challenge - #100DaysofCode
Had a second try at this challenge using lots of < abbr> and < dfn> tags.
Rather more than would usually be neccessary as clarified by helpful feedback from Jen Kramer:
< abbr> is for abbreviations, acronyms, and initialisms. Let’s say we’re talking about HTML. All the element tells us is what HTML stands for:
< abbr title=”Hypertext Markup Language”>HTML< /abbr>
< dfn> does the definition. Often that goes beyond the abbreviation (hopefully!):
< p>< dfn id=”html”>< abbr title=”Hypertext Markup Language”>HTML< /abbr>, the Hypertext Markup Language,</dfn> describes the structure of web documents, identifying parts of the document like headings, lists, and links.< /p>
< p>However, < a href=”#html”>HTML< /a> is limited in its appearance and functionality.< /p>
So here we’ve defined HTML early in the document. Later, if we want to refer to the definition, we link to it.
Should we put a around that second instance of HTML?… it depends. If we were pages into a book and we’d not used HTML in that time, perhaps so. If we’re a paragraph later, probably not.
So – should people be defined? Maybe, but probably not in the sense of a dictionary entry. I love your link to Michelle Obama’s Wikipedia entry, for example. If you don’t know who she is, you can read about her. But that’s just a plain old link. You can’t look her up in Webster’s dictionary. 😁
This has been a very useful exercise and lesson in how much and how flexibly text can be enriched with HTML.
#30DaysofHTML Day 3: ‘Who Said What From Where’
@CodePen
June 20th 2021
Day 34 - Observing - #100DaysofCode
June 19th 2021
Day 33 - Thinking - #100DaysofCode
June 18th 2021
Day 32 - React - #100DaysofCode
Created React App - my-new-app.
Getting comfortable with Create React App
June 17th 2021
Day 31 - npx - #100DaysofCode
Creating React App my-new-app.
Getting “web-vitals” missing error (even though it seems to be there).
Possible missing bits due to slow internet.
June 16th 2021
Day 30 -
- #100DaysOfCode
June 15th 2021
Day 29 -
- #100DaysOfCode
June 14th 2021
Day 28 -
- #100DaysOfCode
June 13th 2021
Day 27 -
- #100DaysOfCode
June 12th 2021
Day 26 -
- #100DaysOfCode
June 11th 2021
Day 25 - GitHub - #100DaysOfCode
June 10th 2021
Day 24 - calendar - #100DaysOfCode
June 9th 2021
Day 23 - create-react-app - #100DaysOfCode
my-app
Many errors concerning versions.
Some StackOverflow possible solutions
June 8th 2021
Day 22 - < dfn> - #100daysofcode
Defining terms.
#30daysofhtml CodePen challenge Day 4
June 7th 2021
Day 21 -< address>, < blockquote>, < q>, < cite> and cite - #100daysofcode
First the cite challenge: to modify yesterdays blockquote exercise in light of new information about the different rules governing this feature which can be an attribute or an element.
Who said what from where challenge: a practical review of things learnt so far.
#30daysofhtml CodePen challenge 1 Day 3
#30daysofhtml CodePen challenge 2 Day 3
June 6th 2021
Day 20 - Practice! - #100daysofcode
Believing impossible things.
<blockquote> and <q> #30daysofhtml
#30daysofhtml CodePen challenge Day 2
June 5th 2021
Day 19 - Coding Challenges - #100DaysOfCode
Some time today to backtrack and work through the #30daysofhtml challenges on CodePen starting with <address>.
#30daysofhtml CodePen challenge Day 1
June 4th 2021
Day 18 - HTML elements and attributes - #100daysofcode
Link attributes: type, referrerpolicy, as, disabled, imagesrcset, and imagesizes.
Elements:<strong>, <mark>, <cite>, <s>, <del> and <ins>.
Practice pen
Day 11 - #150daysofhtml Wrapping up attributes and link element
Day 11 - #30daysofhtml Marking up edits and drawing attention with elements
June 3rd 2021
Day 17 - <address> quiz - #100DaysofCode
I got 🌟8/8 in the #30DaysofHTML Day 1 quiz yay! 🙌
Day 1 #30DaysofHTML <address> examples pen
June 2nd 2021
Day 16 - <sup> and <sub> - #100daysofcode
A #30daysofhtml challenge!
☕☕☕
Day 10 - #30daysofhtml Challenge Pen
Day 10 - #30daysofhtml <sup> and <sub>
Day 10 - #150DaysofHTML The link element integrity attribute
June 1st 2021
Day 15 - Long words, rel and a calendar - #100daysofcode
What to do about sesquipedalianism? <wbr> !
More rel attribute keywords on the link element.
A live calendar for June
Day 9 - #30daysofhtml <wbr>
Day 9 - #150Daysofhtml Concluding rel
May 31
Day 15 <small>, link rel and Resource Hints
The <small> print then ….
link rel and Resource Hints - improving user experience and accessibility through performace.
and … WIP …
HTML + CSS semantic calendar project.
#30daysofhtml - Day 8 <small>
#150daysofhtml - Day 8 link rel
May 30th 2021
Day 14 <abbr> and <link/>
What does that TLA* mean? 🤔💡🤭
Plus so many more things to learn about </link> element and the magical browsers 🧙♂️🧙♀️
#30daysofhtml - Day 7 <abbr>
#150daysofhtml - Day 7 The </link> element part 3
May 29th 2021
Day 13 <summary > and the link element part 2.
#30daysofhtml - Day 6 <details> and <summary>
#150daysofhtml - Day 6 The <link href=”“/> element part 2
May 28th 2021
Day 12 description lists and the link element.
#30daysofhtml - Day 5 <dl><dt><dd>
#150daysofhtml - Day 5 The <link href=”style/main.css”/> element
May 27th 2021
Day 11
#30daysofhtml - Day 4 <dfn>
#150daysofhtml - Day 4 The <base> element
May 26th 2021
Day 10
#30daysofhtml - Day 3 <cite>
#150daysofhtml - Day 3 The <title> element
May 25th 2021
Day 9
Getting to know …
The official HTML5 boilerplate
HTML, accessibility, and CSS layout and architecture expert Manuel Matuzovic’s own HTML Boilerplate walkthrough
Day 2
#30daysofhtml - Day 2 - <blockquote> and <q> - not for indentation or conversation.
#150daysofhtml - Day 2 - <head> contains metadata - data about data.
May 24 2021
Day 8
Day 1 - Restart - #100DaysofCode
#30daysofhtml - Day 1 - <address> tag
#150daysofhtml - Day 1 - <html class=”no-js” lang=”en”>
With #30daysofhtml email course
and a subscription to #150daysofhtml
More about the lang attribute on the <html> element
The lang attribute: browsers telling lies, telling sweet little lies
blog post by Manuel Matuzovic.
May 23 2021
Day 7 - Web Divelopment - #100DaysOfCode
Learning how to write HTML properly.
22nd May
Day 6 - Googled CSS - #100DaysOfCode
I created a Google Developer Profile!
#DevBadges
21st May
Day 5 - CodeLog - #100daysofcode
Getting in the mood to make a new GitHub pages 100 days of code log by making an octocat.
20th May
Day 4 - Front End Focus - #100daysofcode
Learned a bit more about image resizing and DOM events then played a coding fantasy game to practice the flex box and had a look at Google’s free CSS course.
19th May
Day 3 - Don’t Make Me Think - #100daysofcode #UX
Read chapter 4 - Animal, Vegetable or Mineral, a free sample of @skrug’s book
and thought about making choices mindless in relation to my current landing page project.
Dont Make Me Think Chapter 4 sample pages
Then played 20 Questions
18th May
Day 2 - Networks - #100daysofcode
Crafting an HTML and CSS landing page
“The self is a cumulative network because its history persists.”
~The networked self
17th May
Day 1 - Fonts and favicons - #100DaysOfCode
FontSquirrel helped me make a web font kit. Next a http://favicon.cc and flex box Holy Grail CSS.
Trying to understand what stuff does …
Font Squirrel Web font generator
Favicon generator creator Favicon.cc
How to Become a Great Front-End Engineervia
@philwalton
| Tools | Resources |
|— |— |
| | |
| JS Bin | CodePen |
| JS Fiddle | NotePad++ |
| VS Code | Atom |
| FreeCodeCamp | DevDocs browser |
| Can I Use | BrowserStack |
| Tortoise Git | W3C ® Developer Tools |
| W3C ® Web Accessibility Tutorials | List of CSS properties, both proposed and standard | |
| The future of style | CSS reference MDN |
| The Elements of Typographic Style Applied to the Web | MDN Web Docs |
| CSS Mine: Dig into Web UI Development | Luminosity Colour Contrast Ratio Analyser |
| Contrast-ratio | DevTools for beginners |
| Tables Generator | html-tables-all-there-is-to-know-about |
| Test drive Prism | displaying-code-in-web-pages |
| Smashing Magazine | FreeCodeCamp News |
| CSS Tricks | Nameboy | |
| Internet Fundamentals | Frontend Masters BootCamp |
| Interneting is hard | HTML elements reference |
| W3 HTML Validator | Nu HTML Checker |
| Frontend developer roadmap | Markup World |
| Frontend masters HTML cheatsheet | The Complete Guide to Deep Work |
| CSS Reference trove | Emojipedia |
| Airtable | Softr |
| Airpets email course | fontpair
Welcome to GitHub Pages
“The amateur software engineer is always in search of magic.” - Grady Booch via Programming Wisdom @CodeWisdom on Twitter 12:37 PM - 12 Oct 2018
How this site works
You can use the editor on GitHub to maintain and preview content for the website in Markdown files.
Whenever you commit to this repository, GitHub Pages will run Jekyll to rebuild the pages in your site, from the content in your Markdown files.
Markdown
Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
Syntax highlighted code block
# Header 1
## Header 2
### Header 3
- Bulleted
- List
1. Numbered
2. List
**Bold** and _Italic_ and `Code` text
[Link](url) and 
For more details see GitHub Flavored Markdown.
Jekyll Themes
Your Pages site will use the layout and styles from the Jekyll theme you have selected in your repository settings. The name of this theme is saved in the Jekyll _config.yml configuration file.
Support or Contact
Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.