web制作｜ぴよたろ

学習開始から3週間でポートフォリオ制作をした手順

みなさんこんにちは。　へく（＠heku_777）です！いきなりですがあなたはポートフォリオを作成したことがありますか？・ポートフォリオ制作は今の自分にはできない...。・ポートフォリオを制作したいけどまず何から始めよう...。・ポートフォリオはまだ制作する必要がないのではないか。おそらく多くの方が上記のようにポートフォリオ制作に大きな壁を感じていると思います。この記事ではその壁をぶち壊すことができるように、ポートフォリオ作成のメリットや手順、参考とな

Webデザイナーの採用担当をして好印象だった未経験応募者のポートフォリオ

こんにちは、こばやす(@kobayas_s)です。以前「デザイナーの採用担当した私が良いと思ったポートフォリオ」というテーマで採用担当者目線で記事を書いたところ多くの反響を頂きました。また実際に採用担当をされている方からも多く助言を頂く事があったので、もう少し深堀りした記事を書こうと思いました。以上の記事は「基礎はOK」レベルの内容です。この記事では前回書いた内容に触れつつも、採用担当者から見て「気になる人、採用対象にしたい人」と言われるためにグレードアップしたポートフ

850

【無料練習素材】あなたはできる？模写コーディング腕試し！

✔︎対象レベル・Progate HTML/CSSコースは終えた方・Progate初めて模写コーディングにトライする方・優しめなサイト模写で腕試ししたい方こんにちは。オンラインWebスクール「デイトラ」を運営している東京フリーランス（@TokyoFreelance）です🗼 今回はデイトラの「Web制作コース」から、無料の模写コーディング素材として課題の一部を出題します！早速本題ですが、このキャプチャの通りに、模写コーディングできますか？キャプチャはPC版しか

SVGでCSSアニメーション

illustratorの練習にモーツァルトのアイコンを作ったところ、「これアニメーションさせたら良いかんじでは」と思いやってみました。 CSSだけでできるので、ぜひご参考ください〜🙌 できたものはじめにカラフルな線が印象的なアイコンができたので、ラインを描いていくようなアニメーション（ドローアニメーションというのかな？）にしていきます。最初に見かけた方法はvivusというSVGアニメーションのJavascriptライブラリ。簡単に手書き風？アニメーションができそ

【※駆け出しコーダー必須】現役Webコーダー達が伝える!導入すべきChrome拡張機能10選

大変好評頂いておりますが、このnoteは永久に全て無料で公開します。はじめにぼくはフリーで働いている際、様々なコーディング案件にも携わらせていただき、様々な現役Webコーダーの方達とも交流させていただきました。その中で、約20人近くの現役Webコーダー達に聞いて分かった、現役WebコーダーがオススメするChrome拡張機能を自身の経験も踏まえて、コーディングする人に特化したドンゾコ自身も導入し活用している「圧倒的にオススメの10選」に纏め上げました。もしまだC

【今更きけない】フロントエンドとかバックエンドとかってなに？

フリーエンジニアの岳です。 Web開発などのご依頼があったときのやりとりなどで、「フロントって、どこの部分を指すのですか？」と時々きかれることがあるのですが、少なくともITに関わる人なら大雑把にでも理解しておいたほうがいいんじゃないかなーと思っています。正確な定義は必要ない（というか、ないかも？）のですが、みなさんは答えられますか？結論を述べると、フロントエンド：いわゆる「見た目」の部分バックエンド：データ管理といった「見えない」部分になります。

僕がCSSを書く際に必ず意識している CSSのコーディングルール30条

初の有料noteです。僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。（※2019.12.22追記）こちらのnoteですが、リリースから一週間経たずして売り上げが1000部に届きまし

500

SlackのUXライティングの考え方

2020年1月に行われた Design Matters Tokyo のセッションでUXライティングについて学んだので記事にまとめます。 Slack社でUXライティングに取り組んでいるアンドリューさんのお話で、実際にUXライティングするワークショップも体験したので共有したいと思います。 Slack社のアンドリューさん UXライティングとはUXライティングとは、ソフトウェアやインターフェースを言葉で対話可能にすることを目的としたコピーです。ユーザーの行動フローを理解し、専門

Sublimetext3にSassとCompassを導入してみた。

そもそもSassってなんだかよく分からなかったのですが、業界界隈では便利だ！という声がたくさん上がっていたのでとりま頑張って使えるようにしてみました。正直なところSassをCompassでコンパイル出来るようになるまで洒落抜きにかなりつまづきました・・・会社のMacOS 10.8.5ではCompassがすんなりインストールできなくて難しかったです、有益な情報を発信してるブロガーの皆様のおかげでなんとかインストールできた感じです。忘備録も兼ねて、インストールまでつま

僕がおすすめするVSCodeのプラグインまとめ

Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されま

100

Ruby、Railsの勉強ことはじめ

普段はフロントエンドエンジニアとしてお仕事をしているため、サーバーサイドの知識がないわたし。フロントエンドでお仕事する上でサーバーサイドの設計が理解できないと、全体設計の話がわからない😫 Express（Node.js）で簡単なTODOリストのAPI作ってみたり、Firebase（mBaaS）でDatabaseやStrage機能使ってみたけど、サーバーサイドへの理解は深まらない・・😫 ということで、自分でREST APIを作るべくRubyを勉強してみることにしました

はじめてのRailsチュートリアル（3章）

前回の続きです！本章は主にテストについて学びます🤗 学習の覚書なので、ところどころ日本語が変かもしれません。。プロジェクトを作成しHerokuへデプロイrails newして先ずはデプロイしていきます。 herokuへpushしようとしたら下記エラーが。最初から躓いてがっくり。 remote: ! Failed to install gems via Bundler.remote: ! Detected sqlite3 gem which is

はじめてのRailsチュートリアル（１章）

前回のnoteに書いた通り、progateでRuby・Railsコースを完走したのでRailsチュートリアルやっていきたいと思います！ローカル環境でRails動かせるのわくわく。環境構築Railsチュートリアルを見るとIDE（Cloud9）をおすすめされます。確かにお手軽ではありますが、使い慣れたVSCodeを使いたいのでローカルに環境構築することに。こちらの記事がとてもわかりやすかったです！😊rbenvを使ってRubyをインストールしました。過去にHomebrew

はじめてのRailsチュートリアル（2章）

前回の続きです。2章やっていき！💪 始めてまず驚いたのがscaffold機能です。 $ rails generate scaffold User name:string email:string progateしたときは「 rails g model User name:string email:string」だったので、scaffoldって何？！というかんじ Usersリソースをscaffoldで生成したことで、ユーザーページが出来ている！？・・そういう機能のようで

web制作

記事一覧