Starting from Scratch Lesson 1 intro

It's gonna be A Human Future

CSS practice Glitch remix

CSS is Awesome CodePen

Understanding users.

7 principles to help create great digital experiences for children.
How to design for children

CSS grid calendar.

Some basic boxes: calendargrid

Why is front end development so hard?

Useful answer to the question: quora

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.

Found an online book and read some reminders of reasons to Learn JavaScript w3docs

" There are at least three perfect things about JavaScript:

1. It supports complete integration with CSS and HTML.
2. It provides straightforward ways of doing simple things.
3. It is supported by almost all the major browsers and is performed by default. "

I think when you have a lot of jumbled up ideas they come together slowly over a period of several years ~ Tim Berners-Lee

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 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 ![Image](src)

For more details see GitHub Flavored Markdown.

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.

Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.

A deeper dive and rummage into Git concepts prompted by this thread ...

The most important GIT CONCEPTS

Stop copy-pasting, start Understanding

- THREAD -

— Iren Gataullina (@IrenSayWhen) June 14, 2021

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, 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

Created React App - my-new-app.

Getting comfortable with Create React App

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.

Node.js package runner

my-app

Many errors concerning versions.
Some StackOverflow possible solutions

Defining terms.

#30daysofhtml CodePen challenge Day 4

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

Believing impossible things.

<blockquote> and <q> #30daysofhtml

#30daysofhtml CodePen challenge Day 2

Some time today to backtrack and work through the #30daysofhtml challenges on CodePen starting with <address>.

#30daysofhtml CodePen challenge Day 1

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

I got 🌟8/8 in the #30DaysofHTML Day 1 quiz yay! 🙌

Day 1 #30DaysofHTML <address> examples pen

A #30daysofhtml challenge!

☕☕☕
Day 10 - #30daysofhtml Challenge Pen
Day 10 - #30daysofhtml <sup> and <sub>
Day 10 - #150DaysofHTML The link element integrity attribute

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

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

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

#30daysofhtml - Day 6 <details> and <summary>
#150daysofhtml - Day 6 The <link href=""/> element part 2

#30daysofhtml - Day 5 <dl><dt><dd>
#150daysofhtml - Day 5 The <link href="style/main.css"/> element

#30daysofhtml - Day 4 <dfn>
#150daysofhtml - Day 4 The <base> element

#30daysofhtml - Day 3 <cite>
#150daysofhtml - Day 3 The <title> element

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.

#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.

Learning how to write HTML properly.

#WebDivelopment

I created a Google Developer Profile!
#DevBadges

Day 5 - CodeLog - #100daysofcode
Getting in the mood to make a new GitHub pages 100 days of code log by making an octocat.

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.

Frontend Focus

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

Crafting an HTML and CSS landing page

"The self is a cumulative network because its history persists."
~The networked self

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

"The amateur software engineer is always in search of magic." - Grady Booch via Programming Wisdom @CodeWisdom on Twitter 12:37 PM - 12 Oct 2018

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 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 ![Image](src)

For more details see GitHub Flavored Markdown.

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.

Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.