Basic-HTML-learning

GitHub

Languages

Editors

Resources

I am trying to put what I have learnt into this little web build project, starting from basic HTML tags, elements and CSS attributes. I also put comments within my code to help me learn. Being able to see the output of my code and experience progress motivates me to continue to learn coding. A lot of my effort will be going into building my learning notes besides my project. Writing down notes help me tremendously in my learning.

Project

Html-learning Repository
Learning Notes
GitHub Page
GitHub Wiki
HTML Build Project
HTML Build Project - c

Learning Notes Pages

HTML Basics Notes
CSS Basics Notes
Markdown Notes
Editor Notes

Table of Content

Basic-HTML-learning

Table of contents generated with markdown-toc

Progress

HTML Basics

h1-h6, comment, href, #, target, body, div, html, img, alt, ul, ol, li, form, action, label, value, name, radio, checkbox, input, text, button, submit, placeholder, required, br, align

Coolest thing I learnt: form element with submit button

  <form action="/url-where-to-submit-form-data">
    <input type="text" value="textbox" placeholder="Text here" required> <!--required attribute, required before submit-->
    <button type="submit">Submit</button> <!--submit button!!!-->
  </form>

Things I struggled with: writing in correct HTML structure, understanding the line spacing in certain elements and keeping child of element organised using correct indentation

  <!doctype HTML>
  <html>
    <head>
      <title>title</title>
      <style>/*CSS*/</style>
    </head>
    <body>
      <h1>header</h1>
      <main>
        <p>content</p>
      </main>
    </body>
    <footer>footer</footer>
  </html>

CSS Basics

style, color: color_name, rgb value, margin, class, margin, border-color, border-width, border-style, border-radius, font-size, font-family: FAMILY_NAME, GENERIC_NAME;, img {height:;width:;}, background-color

Coolest thing I learnt: CSS class attribute, Google-font import

  /*CSS style class attribute*/
  .class-value {
    color: rgb(80,80,80);
    margin: 0;
    font-size: 15px;
    font-family: "Consolas", monaco, monospace;
  }

Treasure discovery: meta responsive web development - setting viewport
Credit to w3schools

  <!--meta wonder for mobile devices experience-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Things I struggled with: keeping the class attribute tidy, knowing which tags to apply class attribute, utilise the many available attributes

Markdown

code box, dropdowns, table of content [TOC], horizontal line, shield.io badge

Coolest thing I learn: Table of Contents

Table of Contents
=================
* [Topic](#class-name)
<a href="class-name">Topic</a>

Treasure discovery: shied.io badge

<!--https://shields.io/-->
![name](https://img.shields.io/static/v1?label=<label>&message=<message>&color=<color>&logo=<name>)

Things I struggled with: understanding markdown syntax, markdown spacing and line break, working between md syntax and html [what work and what doesn’t work], discovering the affects and relation of md syntax and html, keeping codes tidy and well structured.

Editors and settings

Extenions, settings, fonts, themes, lint, live-servers, previews, json, shortcuts

Coolest Thing I learnt: Using both Atom and VS Code, applying extensions, local live-server, shortcuts to stage, commit, and push. Using terminal.

Things I struggled with: Dealing with settings in VS Code extensions, Atom packages and configurations, using json files, ruby files, for custom configs. Using lint. Following the documentations and instructions, using terminal commands. It has been a significant struggle for a beginner. Glad to finally manage to setup linter for both VS Code and Atom and was able to configure the rules, after many late evenings. Example to configure and ignore specific lint rule in markdown:

{
    "MD033": false,
    "MD014": false
}

GitHub

Repository, GitHub Page, GitHub Markdown, Wiki, Issue, Issue template, GitHub Desktop, GitHub Doc, GitHub with Editors (push and pull), branch, fork, merge

Coolest Thing I learnt: Basic customisation of GitHub page, add internal links to other markdown notes I have in the repository. Building my own web-build project and documenting what I have learnt. Discovering the power of GitHub.

Example of basic customisation on GitHub page, see pages-themes minimal by parkr:

remote_theme: pages-themes/minimal@v0.2.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one
title: html-learning
logo: assets/img/logo_3.png
description: Basic HTML, CSS learning with a test web building project to implement what I learnt.
show_downloads: true
google_analytics:

Example of creating internal links (relative links) to other markdown (md) notes in repository with markdown, see stackoverflow GitHub Blog Relative Links:

[HTML Basics Notes](/html-learning/learning-notes/HTML-Basics-notes.html)  
[CSS Basics Notes](/html-learning/learning-notes/CSS-Basic-notes.html)  
[Markdown Notes](/html-learning/learning-notes/Markdown-notes.html)  
[Editor Notes](/html-learning/learning-notes/Editor-notes.html)  

Things I struggled with: Using GitHub Markdown, understanding releases and packages, actions, projects, workflow and docker. GitHub Doc does help with its amazing documentation.