Disclaimer: It took me about 2 weeks to overcome the learning curve associated with this whole web design thing. Everything documented here was the easiest thing I found to work for me.
The reason for this is it was hard to document things when I didn't know how to document. Everything documented in Week 1 and beyond is good to go though.
This page serves more as a guide to anyone with no experience and who wants to get started in the future.
Web design is not hard. However, anyone unfamiliar like myself needs to get the basics.
I started by going through this tutorial. This is a great tutorial that walks you through how to code in HTML with examples
and exercises along the way. The most important elements for the class is how to include adding text, images, videos, and links (to local files as well as web links) with styling and formatting.
After getting the foundations of HTML, you have 2 options:
1- start a site from scratch
2- download and modify a template to make it your own
I went with option 2. I downlaoded a template from here.
Whether you go for either option, you need to use a text editor. You can use something as simple as Notepad and write your code and save it as .HTML, or you can use something more specialized.
I went with Atom.
From here, you open the template of your choosing in Atom, and modify as you see fit. It's as simple as that.
Regarding file structure. I created a seperate HTML file corresponding to each page of my site; all files in the same folder. This includes the home page and each week's assignment page. I don't know if there's a better way
to do it, but this is simple enough and works for me. In addition to this, I created seperate folders for each week's assignments where I dump photos, videos, and files I wish to upload on my site.
This is web design in a nutshell.
After devoloping the page, the next step is to get it online, but more importantly, to be able to do maintain it, expand upon it, modify it efficiently! We do this using Git.
I went down a rabit hole on this. I use a windows OS, and Git seems to favor Linux and MacOS. To run Linux on Windows, it is possible, but with way too many hurdles. You
can download Ubunto and a bunch of other things that I won't get into and set up a virtual machine, but here is what I found to work easily.
Simply download Git for Windows here. Follow the installation prompts, and you should be all set. Git can then be accessed using Git Bash, but I
prefer using the Windows Command Prompt terminal (CMD).
The next step is to clone the class repository from the class website after creating your own directory there (using the site's GUI). They made it easy for us by including a clone button.
You can, but do not have to, generate ssh authentication. I did, so I cloned the ssh version.
To clone, on CMD, type: git clone "and paste the clone link here with no quotes"
This creates a local directory for the class site's repository. The directory you created in your name will be here. NOTE: Do NOT put a space in your directory name (ie OmarAlDajani, not Omar AlDajani).
In your folder, you can save your web folder and you should be all set to modify it here as you see fit.
To get it online and make your routine modifications, you need to do the following in CMD:
1- Go to the class repository's directory on your computer using the command CD (which stands for current directory or change directory). Typing "CD .." moves you up a folder, and "CD .\.FolderName\" into a
folder. Be aware that Windows and Linux do not appear to agree on / vs \. Typing CD followed by pressing the Tab key toggles through all the directories in the current directory with the correct syntax.
2- Perform a Git pull which will update your local copy of the class repository with everyone else's changes. This can be done with the following command in CMD: "Git pull".
3- Do a quick check that everything is ok with "Git status".
4- Add all your modifications (this is assuming you've already done your local modifications like modified an HTML file or added pictures) using "Git add .".
5- Check that all the files were added successfully using "Git status".
6- Commit you changes using "Git commit -m "you commit message(like updating site)"".
7- Check again with "Git status".
8- Push your local edits online with "Git push"!
Before doing all this, make sure you've compressed all images and videos so you don't blow up eveyone's storage. You can compress in any way you'd like, but I found ffmpeg to be
the most effective and easiest way to do things. This is done in CMD, going into the folder with the images and videos. Here are my most common commands:
To compress an image: ffmpeg -i .\ImageName.jpg -compression_level 100 .\ImageName.jpg
To compress a video with audio: ffmpeg -i VideoName.mp4 -vcodec libx264 -crf 25 -preset medium -vf scale=-2:1080 -acodec libmp3lame -q:a 4 -ar 48000 -ac 2 VideoName.mp4
To compress a video without audio: ffmpeg -i VideoName.mp4 -vcodec libx264 -b:v 1000k -vf scale=-2:1080 -an VideoName.mp4
These and other ffmpeg commands can be found on the class website's ffmpeg cheat sheet here.
That's version control in a nutshell. I perform these operations multiple times per week to upload any modifications to my site.
Final Project Brainstorm
I came into this class with no final project in mind. I was overwhelmed with the week's assignment of modeling a final project idea. I did not do it for two reasons:
1- I do not have an idea.
2- Even if I did, I do not know how to CAD.
I have been slowly picking up CAD using Fusion 360, but not enough to be able to draw out a project.
Instead, I'll be writing out my idea. The idea is this:
The Follow Me Stroller
Are you a dad? Is your child young enough to be pushed around in a stroller? Are you tired of pushing your baby around? Then have your baby follow you around instead!
I want to create a car like object, where my beautiful 2-year old daughter can sit in a seat, and have this car follow me around wherever I go. This car can have 3 or 4 wheels, a seat, and maybe handles
for my daughter to hold on to. It should have a motor to drive the wheels, and a battery to juice the electronics. The dad should either have a receiving sensor for the car to track and follow, or maybe it
can be connected to dad's phone through bluetooth. The car is then to maintain a specific distance away from dad, say 3-5 ft. If dad moves forward 1 step, it follows with the exact same
distance. If dad turns right/left, it turns right/left. If an obstacle puts more distance between dad and baby that the constant distance, then receiver in dad's hand or his phone should ring loudly.
I still don't know what type of sensor is best for this application. I still don't know all the components I will need. I still don't know how to draw this. There is a lot I don't know, but I'll
hopefully figure it out!