Hurricane Lane a no-show, but nice 3-day weekend for coding!

With Hurricane Lane approaching, sitting around eating snacks, I fully intended to work on Python all weekend. However after spending a day figuring out how to install Python on my paid hosting server, I began to feel that a Flask web app at this stage in my learning, was like swatting a fly with a tank. I just need a basic, simple project to get going and to start the portfolio ball rolling, so to speak.

So I started searching for how to build a web app. I came across Sketch, then realized it was only for Mac OS. Since I'm not buying a Mac just to run one program, I started searching for alternatives. I found Adobe dx, but it doesn't run on Win 7 (yes, I am running Win 7, downgraded a new Kabylake
laptop because I cannot STAND Win 10). A bit more searching turned up the lovely Figma web tool.

Wireframing in Figma

Figma is awesome, very easy to use and very fast. But after making a few wireframes, I had no idea how to code them. A search for "how to code a wireframe" brought me to Jesse Showalter's series, "Design & Code a Responsive Landing Page from Start to Finish". I thought it best to start from the first video. He pretty much did everything I had just done in Figma, only he used Sketch.

BUT ...video number 6 sure escalated things quick!!
 6 - Design & Code a Responsive Landing Page from Start to Finish | Setting Up Your Dev Environment

So the next day, I decided to watch it again, paused it, watched it, paused it MANY times to follow along and decipher what he was talking about.

I already had node and npm installed. Jesse uses GitHub but lately I'm trying out GitLab instead. It seems you can use GitHub Desktop with a GitLAB repository; just go to your GitLab project page and select "Create personal access token", then copy-paste that https URL into GitHub desktop under the Clone tab.

Installing Gulp and Sass was also super-simple, and Jesse has the framework all set up and ready to use so it's easy to follow along after deleting the previous project-specific code.

Gulp watches things and refreshes your browser for you!

Anyway, here's the quick page I ended up building by following Jesse's tutorial up to video number 8. I'll probably add some JavaScript later and do a few more different pages. He goes really fast and you have to pause occasionally to see the tiny menus/tabs and figure out what folder he is working in, but I HIGHLY recommend the series -- just hit pause and take your time!

先週 レーン 台風 が近づいて , おやつ食べることばっかりして 週末中に Python勉強しよう と 決定しました。 しかし、 うちの 勝ってる ドメイン に Pythonを インストール することを1日間 頑張って, 昇進者によってFlask はちょっとやり過ぎ で , もうちょっと基本的な プロジェクトで スタートしますっと 決めた 。

 それで オンライン で ウェブ アプリ の作り方 を探した 。スケッチとやっぱりあるけど MacOSだけ で使える 。 1つのアプリのためだけ Macを買うつもりない ので 、違うやつを探して 、アドベ DX もあった 。けれども Windows 7 の バージョン は無い (Windows10、は 大嫌いので ダウングレード した 新しい ラップトップ を使ってる )。 そして Figma と言う すばらしい ウェブ サービス 見つかった 。

 ワイヤーフレーム のページ を数枚作って、ワイヤーフレームを どうやってコーディングするの か を 調べて , ジェシー・ショワルターという人 のYouTube 「 ランディングページの デザインと コード、 初めから 最後まで 」

 が出た。 最初モビリオから スタートして , 彼は 私が Figmaでやったことすべて できたけど 違うのは スケッチを使っただだ。

しかし。。。 6番目のビリオンは 大変難しくなった ！

 少し休んで 次の日にもう一回見て, 彼が 何用話しいるか わかるように ポーズして , そしてみて , そして 何回も ポーズした。

Node と npm はもインストール されてた 。ジェシーさんは githubを使ってるけど 私は最近GitLabを 使っている。 GitHubデスクトップ トゥーソフト を Gitラボ といっしょに 使えることができる。Gitラボ の ページに行って、 "Create personal access token" を選んで そのhttps の URL を GitHubデスクトップ > クローン というタブ の中に コピペ する 。

Gulp (ガルプ)とSass(サース)をインストールするのはすごい簡単で 、ジェシーさんはその ファイルの準備してくれた ので スムーズで フォローすることができる。

 この ベリオシリーズを 8番目 まで 見ながら このページ ができた。あとで時間があればJavaScript など 入れると思う。 ジェシーの レディオ はちょっと 早けどよくポーズして 時間とって 頑張ってみてください 。