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
Takeaway: Leave fonts and colours alone until everything else is working.
How to choose colours
Adobe colour explore
fontpair
Font pairings
Lots of fun on the last day with my first @airtable and @softr_io site.
Hugely thankful for @jen4web's fabulous #airpets email course:
I've learnt so much web dev in a such a short time ... and all with with #NoCode
Favicons, font-pairs and favourite colours.
Having so much frontend fun with
@airtable and @softr_io site in
@jen4web's #airpets email course
it turned out to be a #nocode day.
I created my first site with @softr_io in @jen4web's #airpets email course.
Plus where to use (and not to use) HTML blockquote and q tags.
Airpets
New subdomain! Airpets
Day 96 - Airtable - #100DaysOfCode
I just created my first base in @airtable
in @jen4web's #airpets email course.
And explored uses of the HTML address tag, Airtable and Softr.
Airtable
Softr
I got #30DaysofHTML email course FREE from @jen4web on @Gumroad:
Review: 🚮 🚧 🏗️
Emoji study.
Emoji gist
Emojipedia
"Front-end developers have to deal with non-trivial areas of complexity such as font rendering, search engine optimizations, accessibility standards, web security (e.g., SSL, OAuth2, XSS), image optimizations... ... network performance, HTML email, browser performance, JavaScript performance, HTML, CSS, and DOM rendering, and divergent JavaScript runtimes."
I just completed "Introduction to CSS" by
@jen4web on @FrontendMasters!
Bootcamp CSS
Nav Bar link states: CodePen
Results of SkillCrush quiz 'Is tech right for you?'
Creative Visionary.
Learned a bit about CSS viewport sizing: Responsively Designing with Viewport Units
Three Web-developer portfolios:
Eina Onting | Vancouver Front End Developer
Emily Ridge • Galway based Freelance Web Designer & Developer
Successful Front-end Development | Ian Lunn - Front-end Developer
Responsive Design with Aquent Gymnasium.
Read article: Responsive Web Design, A List Apart.
Homework: Find three Web Design Portfolio's to explore on different 'mobile' devices.
Boxes, floats, image alts ... fonts, colours, gradients.
Absorbing exercise with FrontendMasters Bootcamp.
Balancing activity, focus, concentration.
"The ability to perform deep work is becoming increasingly rare at exactly the same time it is becoming increasingly valuable.."
~Cal Newport
The Complete Guide to Deep Work
Some chunky radii and borders to experiment with how the boxes respond
to different sizing with the box model. Everything is pointing to the negative space.
Incantation:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Updated coding journey WebLog.
Horizontal navigation bar styling
CodePen
Made a thing for some cheatsheets.
CodePen
Always clear after you float.
.clearfix::after { content: ""; clear: both; display: table; }
Frontend Masters bootcamp.
VS Code lags everything so using NotePad++ again.
... palettes, validation and link states are just some of the things covered, then a CSS update for the bootcamp book project.
CodePen
Properties and values exercise.
VS Code and fonts then15 mins of styling web page.
[CodePen}(https://codepen.io/gipsi/pen/dyNKdNy?editors=1100)
Finished up HTML section of bootcamp.
Exercise included links, images, blockquote and citation tags.
And the necessity of using cheatsheets.
Frontend masters HTML cheatsheet
Bootcamp hobbies page
Using Emmet and Tidy2 with NotePad++.
Chrome browser, Google search, Nu HTML and GitHub.
Adding to website structure semantically with lists and navigation.
First day of exercises in bootcamp done.
Made GitHub repo to track progress.
Step by step guide to becoming a modern frontend developer.
Setting up Visual Studio Code preferences and extensions ready for:
Frontend Masters BootCamp GitHub
Frontend Masters BootCamp Website
I earned the Responsive Web Design certification.
@freeCodeCamp
Achievement and projects list: Responsive Web Design certificate
Best browsers for web development are standard Chrome and Firefox on PC or Mac. There are many tools to test and ensure support and consistent rendering in ever so many browsers. I explored some options and gave BrowserStack a spin with an OpenSource project.
Activity: BrowserStack
Journeying with Frontend Masters.
Activity: Internet fundamentals
This took some persistence trying to figure out why the skip links wouldn't work, but got there eventually.
Activity: 
🐛
The #FreeCodeCamp technical documentation project that turned into .... 🐛 Easter Bug hunt 🐛
11/16 tests passed, then I lost the test suite.
Next: debugging. #FreeCodeCamp
Activity: FreeCodeCamp Technical documentation project
Third #FreeCodeCamp Responsive Web Design project passed all tests. #HTML #CSS
Activity: Yogi Matters
Survey form | FreeCodeCamp project
Activity: @CodePen
Read through the brief for FreeCodeCamp's second Responsive Web Design project.
10/10 for the first #FreeCodeCamp Responsive Web Design Project 🎉
Tribute Page - Aldo Leopold - FreeCodeCamp Project
After reading user stories and tests to pass I set up a folder with html and css files and basic code on my local machine to practice ready for the first project in this track on CodePen.
Tabulated tools and resources section of Weblog in MarkDown then exploring the flexibility of columns, rows and gaps with completion of FreecodeCamp's CSS Grid exercises.
Resource: Markdown table generator
Achievement: 
Read: CSS Tricks Equal Width Columns in CSS Grid are Kinda Weird
Positioning, justifying, aligning boxes (cells) and sizing gaps.
Enjoying #FreeCodeCamp's clear, concise Responsive Web Design track plus many articles to read.
FreeCodeCamp article: An Introduction to CSS Grid Layout (with Examples)
Feeling like Alice down The Rabbit Hole after shrinking, growing and rearranging items to complete FreeCodeCamp's CSS Flexbox section of Responsive Web Design track.
Achievement: 
Read: Smashing Magazine's Compete Guide to Accssible Front-end Components
Challenges to do: CSS Flexbox
FreeCodeCamp: Flexbox Common Use Cases
Moving pastel coloured<div> boxes starting with {display: flex;}.
Flexbox terminology diagram from official W3C specification.
FreeCodeCamp: The Ultimate CSS Flex Cheatsheet (with animated diagrams!)
Some more #FreeCodeCamp exercises including media queries and viewport sizing.
Achievement: 
Completed #FreeCodeCamp's Applied Accessibility exercises in the Responsive Web Design track. Useful explanations about the way semantic tags work with screen readers. Exploring online colour contrast checkers.
Achievement: 
Completed #FreeCodeCamp 's Applied Visual Design section of the Responsive Web Design track with colours, transforms and animations in CSS.
Achievement: 
Activity: FreeCodeCamp, Responsive Web Design
Read: Agile - Wikipedia
Read: What Being a Musician Taught Me About Being a Programmer via @DZoneInc
For the last day of W3C/EdX HTML And CSS fundamentals I forked: Flexbox Holy Grail - Header Footer Fixed Height (and made it responsive).
Course: HTML5 and CSS Fundamentals
Adding example code to a web page. Handles JavaScript, CSS, HTML, and PHP. @webSemanticsUK
Activity: Test drive Prism Reference: displaying-code-in-web-pages
Having got the gist of relevant tags I was glad to find this all about tables #FreeCodeCamp page and tinker with a list of table generating tools.
Reference: html-tables-all-there-is-to-know-about
A whole area of html I have given a rather wide berth is now getting some focus. Things are starting to go where I think they will. Remembered useful reference tool.
Headings, rows, columns and cells.
<table border=2>
<tr>
<td headers="Attribute">Attribute</td>
<td headers="Description">Description</td>
<td headers="Usage">Usage</td>
</tr>
<tr>
<td>src</td>
<td>Used to specify the URL of the image</td>
<td>src=“images/test.png"</td>
</tr>
</tr>
<tr>
<td>alt</td>
<td>Used to specify replacement text for the image</td>
<td>alt=“Test image for HTML5 course”</td>
</tr>
</table>
Activity: Chakra visualisation Read: MDN Web Docs
Managing complexity.
Read: Separation of Concerns Wikipedia
Activity:
Hurrying through debugging and CSS precedence with edX to finish Module 4 and meet the deadline next week. Will come back to Microsoft's tutorial on DevTools.
Read/activity: DevTools for beginners
A few things I didn't know about CodePen.
How to use CodePen to speed up your front-end development.
Read: Imaginary Cloud
Activity: Chakra visualisation
CSS box model + lists, borders, shadows and animations, styling details and summary tags.
Tinkering with CSS - fonts, images and lists.
Activity: Old Book Stack
Playing around with basic syntax and properties.
Digging deeper into web UI development with CSS Mine.
Read: Typography justification
Activity: use CSS
Updated project with skip links and semantic tags.
Activity:
My 3 Favourite Recipes CodePen
Read: List of CSS properties, both proposed and standard
The future of style
... and media queries and downloads.
Remember to always be learning.
Activity: Hyperlink notes CodePen
Their alt text, title text, size, positioning, opacity, and whether to code the HTML or CSS when considering informative or decorative purposes.
Activity: My day
Both considered generic elements that don't have any meaning. But <div> is a block level element while <span> is an inline element.
Read: Span and Div - Wikipedia
#100DaysofCode
Handling images in HTML5.
An alt decision tree 🌲
Read: W3C ® Alt decision tree
... and other Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
HTML markup exercises using meaningful elements for comprehensive reading and automated scanning.
Exploring developer tools in Lunascape Phoebe and it's dev tools in particular, list of web browsers in general.
Read: Lunascape browser
List of Web browsers Wikipedia
Among other things I read a poem on CodePen ..
When day comes we step out of the shade, aflame and unafraid The new dawn blooms as we free it For there is always light, if only we're brave enough to see it If only we're brave enough to be it
- Amanda Gorman
Separate content from style for meaning, structure and automated processing.
On current project updated all the <i>tags to <em> and all the
<b> tags to <strong>. And validated.
Exploring commonly used but lesser known tags
The <details> tag is very cool.
Read: W3C HTML5: Edition for Web Authors
"A handbook of sorts, but [..] something more messy and at the same time more "useful" we would say: a book about the more complex and deeply entangled set of relations between writing, coding and thinking."
"The argument the book follows is that computational culture is not just a trendy topic to study to improve problem-solving and analytical skills, or a way to understand more about what is happening with computational processes, but is a means to engage with programming to question existing technological paradigms and further create changes in the technical system. We therefore consider programming to be a dynamic cultural practice and phenomenon, a way of thinking and doing in the world, and a means of understanding some of the complex procedures that underwrite and constitute our lived realities, in order to act upon those realities."
Read: https://gitlab.com/aesthetic-programming/book
.. Google knows to be true.
Read: aboutus/google/philosophy
According to the HTML specification:
The presence of a boolean attribute on an element represents the “true” value, and the absence of the attribute represents the “false” value.
Yet note:
The values “true” and “false” are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
Read: The 25 Boolean Attributes of HTML
W3c and EdX, HTML and CSS fundamentals, Module 1 ended with the start of a new project on CodePen. CodePen - Recipes
HTML exercise using different tags and "line oriented" format to constructing a Web Page that's a poetry quotation and a list of alternative meanings of the same word, shareable with CodePen - Poem.
Read: Line-oriented programming language, programming languages that interpret the end of line to be the end of an instruction or statement.
- Case sensitive matters (except when it doesn't).
- White space is ignored (except when it's not).
- Quotation marks are not part of a string (except when they are).
- The important thing is to look good.
Read: Read the Docs
- Style guides
- Checkers
- Semantics
- Reduce markup
- Separation of concerns
Learning from others mistakes.
Read: The ninety-nine rule, Wikipedia
It is not enough to simply declare your encoding at the top of the web page. You have to ensure that your editor saves the file in UTF-8 also.
If a browser is unable to detect the character encoding used in a page, the content may be unreadable.
What is encoding? W3c
Read: MDN Web Docs
Today a W3cx guided tour round Visual Studio Code with some good tips for editing HTML, keyboard shortcuts, tag highlighting and how to find and install extensions. Went on to explore documentation and more features, customising the appearance to my own preference.
Read: VS Code Docs
Captain Anonymous on CodePen to practice, then fun browse around lots of fabulous Pens.
Read: Pens on CodePen Stand Still Stay Silent
Followed W3Cx HTML5.0x HTML5 and CSS Fundamentals module about tools. Had a play with online code editor, The 'New' JS Bin
Read: The Return and The Refactor, JS Bin Blog - Remy Sharp
An hour of Git refreshment.
Developer Beginner- For associates new to contributing code, configuration, or other files to GitHub repositories.
Read: Culture Engineering by Ben Straub
Some revision of the basics.
I'm taking HTML5 and CSS Fundamentals online with @edxonline
W3Cx, HTML5 and CSS Fundamentals
Read: I just don’t want to be a software developer anymore by Melissa McEwen
Studying roadmap.
FreeCodeCamp, Web Developer Roadmap 2021
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 
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.