Mockups for Portfolio Website: How to add project screenshots onto digital devices for FREE

Sonia — Wed, 13 Jan 2021 21:26:15 +0000

Hello friends!

I'm in a particularly good mood this evening after I finally discovered an even EASIER way to mockup projects without Photoshop or Figma.

(No shade to Figma, but I like things done quickly sometimes and the options on there can be overwhelming when I don't use it often enough!)

Mockups are models or replicas of well... anything really. BUT in the world of UX, UI and software development:

A mockup is a model of a design or device, used largely for product presentational purposes. It's a way for designers, engineers and you (yes, you!) to show off what your design will actually look like when it's launched out into the real world.

You may have heard of Figma, Placeit, Artboard.Studio,
Vexels, WoFox, MockupsJar aaaand others that the industry swears by to Generate Mockups, but I personally like how easy smartmockups is to use.

Here's a working example of one of my creations:

le instructions

Take a screenshot of your project in Mac and iPhone format (Chrome has a toggle device toolbar to switch between devices in the inspector panel)
Search on smartmockups.com for the type of device you'd like (there's a lot of free options!)
Upload your photos and arrange as required.
Download their premium (paid) and non-premium (FREE!) versions of the image.

And voila!

Colt Steele's The Web Developer Bootcamp 2021- HTML5 Forms and Form Validation

Sonia — Tue, 12 Jan 2021 17:34:56 +0000

I've graduated from HTML to CSS in Colt Steele's 'The Web Developer Bootcamp 2021' .

A comprehensive course he recently launched at the beginning of the new year, the online dev community and the adroit Udemy community have been buzzing over the complete overhaul.. and frankly? I can see why.

Colt is an in-person instructor in the Seattle Bay area, and me being a bootcamp grad and software development teaching assistant, I was curious to see how his online material faired. I'll be detailing my key learnings for each section on dev.to and would be interested to hear your thoughts! #begentle

Colt's course boasts a humble 63 hours on-demand video, 47 articles, 122 downloadable resources, 62 coding exercises, and the standard certificate of completion.

As most of us already are well aware, 63 hours of on-demand videos and tutorials doesn't necessarily equate to exactly 63 hours of studying. This is a behemoth course. I can't speak for everyone, but it takes perhaps a day or two to understand a 25 minute video introducing a new concept.

And that's perfectly okay! Everyone learns at their own pace, and I'm the pedantic type that needs to understand every nut and bolt before I can move onto the next topic.

I enrolled in Colt's course for a number of reasons, but largely to revise topics I was already comfortable with in lockdown, while learning old concepts that I wasn't very comfortable with yet (Hello, JavaScript, my old friend!)

I began taking notes on the course on github - feel free to check it out, I'll endeavour to commit to it regularly.

HTML Forms

I completed the HTML portion of the course in one sitting- 10% of the course done! *pats self on back *

BUT I came to the embarrassing realisation I hadn't paid much attention to forms aside from acknowledging we all use them in practically every app we've come across to input personal information.

The verbatim definition taken from MDN:

"The HTML <form> element represents a document section containing interactive controls for submitting information."

Forms are a collection of HTML elements for users to input values. They are for information collecting.

HTML form tags:

The <form> element is the container tag for a range of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

A simple search can be from a form- it fires across a HTTP request to a server to retrieve results for the search.

The action attribute- specifies WHERE (usually servers) the form data should be sent.
The method attribute specifies which HTTP method is being used, eg the GET method.
<form action="/query" method="get"></form>

The label tag is considered important for accessibility. It comes with the for attribute, which needs to match the id attribute of the input.

<label for="inputID">Your Name</label>

Common input types

Type is where the magic happens- specifying a `type' can dramatically alter the input's behaviour and appearance.

<input type="text"></input>
- types include:
  - time
  - text
  - password
  - color
  - number

The placeholder attribute - this is the initial text specifying (and prompting) the user in what they should include in the input.

Here's a fairly basic, ugly form for you to admire:

{% codepen https://codepen.io/soniaweb/pen/BaLqWra %}

HTML5 Form Validations

HTML5 has some built in browser validations on the frontend that we can make work to our advantage.

The required attribute: this is a boolean attribute. When present, it marks the input field as mandatory to complete.
minlength, maxlength attributes - defines the minimum/maximum number of characters permitted before submission.
min, max attributes - specifies the min/max values in an input
type="email" - expects a certain format/pattern -
defines a field for an e-mail address and automatically validates assuming it is a correctly formatted email address.
type="url" - expects a url formatted/patterned input before validation.

And that about wraps it up without boring everyone- I often overlooked the importance of forms and thanks to lockdown revision, I possess an appreciation for them now. Hopefully it's the start of a beautiful friendship.

Further Resources:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
https://www.tutorialspoint.com/html/html_forms.htm
https://www.youtube.com/watch?v=fNcJuPIZ2WE