- Recently published project - Multimedia Content
- Tools being used :
- HTML5
- CSS3, Getting started with Bootstrap
- Javascript
- Helpful Resources :
- freeCodeCamp learning platform
- freeCodeCamp blogpost - Automate and Improve Web development workflow
- MDN Docs - Getting Started with the web
- Bootstrap
- SuperCats
- Build website using HTML, CSS & JS
- Publish website using GitHub
- DevJournal
- Work in progress
- Simple idea for a personal webpage
- MyGoogle
- Simplified version of Google homepage
- Part of CS50 Web Dev part1-project
- Add animation of Google logo
- Built in record-time with Codeium's help
- Multimedia content
- Embed video content with poster and subtitles
- Style page in grid format
- Build navigation menu (as in devjournal) between different topics
- Mockup
- Build a mockup site of the original Pulse webpage
- Strong focus on learning from In-Browser DevTools
- Useful resources from FrontEndPractice
Basic website interactivity with Javascript
- They aid in the interaction between HTML conent and CSS styles and collecting, generating/manipulating audio and/or video content.
- Amongst a different categories of APIs, following are the ones we used.
- Builds interaction by addressing specific elements in
index.htmlsuch as,- on_click Events for alerts, swapping content
- Modify headers, paragraphs
- Locally stores the user input on their browser
- Allows access and displaying the content using DOM API
GIT Orphan Branch
- A Git branch, in general, is used for developing a feature or resolving a bug, so a project progresses without lag.
- A Git Orphan branch provides the possibility to start from zero, i.e., not share any commit history with either the main branch or any other branches.
- Hence a perfect setup for hosting a static github page!
- Thanks to the short snippet from DEV Community blog
- They are used for :
- static websites,
- static parts of major project like a thesis,
- to host an open-source part of a commercial software
$ git checkout --orphan newbranch :'to create and move to created orphan branch -"newbranch"' $ git rm directory/* :'to remove non-essential directory from "newbranch" including the files OR' $ git rm -rf . :'forced and recursive removal of all files in the current directory' : 'different ways to create a file' $ touch README.md : 'only creates a README' $ echo newFile.txt : 'only creates a newFile' $ cat > anyFile.txt : 'creates and can start appending right away' :'generally used after git commit' $ git fetch origin :'to identify if any changes in upstream(remote branch)' $ git diff HEAD @{u} --name-only :'to check which files will be changed on the next pull' $ git pull --rebase newbranch :'to fetch changes from remote repo, rebase current branch on top of fetched branch. NOT recommended, Do your research'Publishing static website using GitHub Pages
- Websites which are read-only, and the content does not change based on the user activity
- This website is build from pre-built component files (HTML, CSS, JS) stored on a web server, in our case GitHub Pages.
- Check Hubspot blogpost more info.
- There are many services as mentioned in MDN Web Docs
- A free reliable source would be GitHub Pages
- The process is as simple as hosting a repo and following the instructions to deploy the website.
- However, there are also certain details, which I learned the hard-way.
- IF the
index.htmlfile is accomodated withstyles.cssandmain.jsfiles, then it is mandatory to add.nojekyllfile in the same directory as theindex.html. This step renders the static website without looking for_config.ymlto define the Jekyll theme. - Filepaths must begin with directory name, NEVER a "/"
- Keep image formats uniform, i.e., either all images are in
.jpgor.pngformat, not both. - Filepaths inside
.cssfile must begin from the root directory.