Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 13, 2022 04:21 pm GMT

How to create a decent portfolio as a beginner?

Finally, after pouring blood and sweat on my portfolio, Ive finished it, and I got my sweet Responsive Web Design certificate from freeCodeCamp. This was my first time building something big. There were many important things I wish I knew before starting so my workflow was not a smooth experience at all. But it let me learn the hard way as I had to search countless times for things Im not familiar with. The valuable lessons I learned were too much to retain them all in my head and they all seemed to be jumbled. So, I decided to write them down and gladly share them with you all amazing human (and extraterrestrial) beings.

Step 1: Create a design

Why? Trust me, its bad to apply the styles on the spot then code them. The result will turn to a combination of chocolate and raisins or pineapples on pizza! (think of foods you dislike)

2_Create a design.png

Ive been there and have done that. Having a design to follow will make the coding part easier (or less hassle). By the way, I aim to be a front-end developer, so I highly prioritized design in my project. But if you dont have the same goal as mine and youre not into design then you can just skip the first three sub-steps. However, the knowledge is always available here for you to absorb.

Sub-step 1: Steal, good thief

Before anything else, seize the chance to steal like an artist!

3_steal_like_an_artist.png

This is what artists usually advise people when practicing to draw better. It means to look into other peoples works and copy them. But not totally! Take a part of it that you find good, then try to combine it with your style. I think this can also be applied in web design. Without looking at other peoples cool portfolios, I cant make a decent-okay-looking one. I found them mostly on CodePen, Dribble, Awwwards, and freeCodeCamp Forum. How can someone create output without ideas as input? Because ideas had to originate from something.

Sub-step 2: Create a meaningful personal logo

To officially start, thinking that its an actual personal portfolio is helpful. It made me realize that the webpages overall look would likely be based on my brand identity and Ive noticed this in amazing portfolios Ive taken as an inspiration. So, I created a logo that would represent myself. Creating a meaningful one can help us avoid providing superficial answers like I dont know why I added that, it just looks good. Heres my logo explanation:

jewelkeith_jk_logo.png

JK is my first name initials. The arrows in the background mean moving forward because my motto is I can move on greater things one step at a time. Its not seen clearly, but I customized the arrows colors starting from the right to slowly decrease or fade along to the left side. I styled this because I think it relates to my thought that every day is a new day to live; yesterdays are not to be dwelled in & should be taken as lessons. Also, I think it shows as progress. The thin line between the first and second rows of arrows (which is unclear too), means with moderation or balance because Im constantly trying hard to strike a balance between my work and life (like relationships and health). Finally, I chose the color yellow because according to the book Designing User Interfaces by Hype, it psychologically means enthusiastic and optimistic. These are adjectives that can describe me or how I am. Enthusiastic to learn more. Optimistic about my future.

Im not yet a professional designer or even a good one. I only used Canva (way simple than photoshop) as my design tool. But I think a practice of building logos, products, or whatever they may be with profound meaning is a start to creating substantial and amazing ones. By the way, Canva is friendly to non-designers or beginners. There are thousands of tutorials on Youtube. I find the Design with Canva channel to be the most useful. The creators are staff from Canva itself.

4_design_tool_canva.png

Sub-step 3: Use a design tool or method

One thing I wished for was learning Figma before I started building my project. The following main steps could have been done easier through a design tool dedicated to designing web pages. Ive created a public Youtube playlist where Ive compiled tutorial videos on how to use Figma from freeCodeCamp since they dont have one.

5_design_tool_figma.png

Figma is free to use unlike others and thats one of the reasons Im planning to study it. Anyway, in my case, I was short on time, and I had to show something as soon as possible to my parent. So, I just used Canva which was easy and simple for me to use. But, you can always go for the good old pencil and paper.

Sub-step 4: Apply the correct colors and typography

After having a logo, I easily knew which colors I can use on different designs I can apply to my webpage. Remember not to have a combination of colors that makes viewers squint while trying to look at your page.

6_correct_colors_typography_to_avoid_squinting.png

Next was typography. I chose Montserrat because I read an article entitled Top 10 Best Google Fonts So Far For 2021 by Nestify, saying its popular and easily readable. I didnt go for less-known fonts because they might not be always supported. Based on a blog, The Responsive Website Font Size Guidelines by Erik D. Kennedy, 16px is the minimum font size, but 18px is better as body text. Try to have a look at Mediums Website as an example.

Sub-step 5: Make a rough layout

Now, before starting to create the web design, please go over step two. Hastily jumping on web design before doing the sub-steps from step two was my biggest mistake. I got too excited to try designing and it actually turned out to be messy because I continuously add some things new that suddenly pop out in my head. But having a rough layout in mind is good to have. See how your content will be structured. Quick sketches will suffice to view the big picture of your possible layout. Keep in mind to be consistent though.

7_make_rough_layout.png

Step 2: Do other major preparations

Creating the right story about yourself and knowing about screen sizes and breakpoints is so important to miss. I promise the following will save you from making a gallon of coffee.

Sub-step 1: Create your flow of content

I created a content flow or how Ill introduce myself from beginning to the end of my portfolio. I made a draft talking about my projects, myself, skills, education, and contact. I couldnt have done it without my friend, Joshua Chu who is a Front-end Web Engineer working for two international companies at this moment. First, he taught me how to create an introduction. As you can see on my portfolio, I briefly introduced myself by talking about my position, the technologies Im currently learning, and what kind of projects Im interested in. It made me realize that this way potential employers can easily see who I am and what I do. He said that you can always call yourself a junior web developer rather than an aspiring one.

8_create_content_flow.png

Next, he told me to create projects, skills, education, and contact sections in order. Since I looked up other portfolios, I had an idea to add brief descriptions telling what my projects were all about and the languages I used to build them. Then I shortly talked about my skills informing potential non-tech clients since I also want to go freelancing. For the education section, I guided the visitors to go to my Class Central profile where I listed all of the learning resources I used. Class Central is an awesome site where you can find countless lists or collections of quality courses that offer free certificates, and this article is just one of the best they got: 1000+ Free Developer and IT Certifications by Rui Ma. There you can also create a list of the courses, degrees, books, videos, and websites you took for learning web development (or other relevant fields). Lastly, for the contact section, I tried my best to convince potential visitors to talk with me by using adjective words such as "meaningful" and "amazing" which I think creates more impact. I'm not the best writer though, but as a reader who encountered this style, the writer usually captures my attention and gets me.

Sub-step 2: Collect the SVG images

I thought adding illustrations to represent my texts was a good idea. I created most of them by combining free shapes and icons in Canva. Free to a point I can use them commercially based on their license conditions. If youre curious how I edited my display picture, I watched a tutorial from Design with Canva.

9_collect_svg_images.png

I converted all of my PNG images into SVG format because actual courses are talking about how they can help increase a websites performance. Anyway, I used the yellow waves background for the headings. I thought they make good dividers. I discovered it through Bretts WebGuide, a collection of his web tools and resources.

Remember that naming files should be done either in a camel-case (FileName) or with an underscore (file_name) to avoid confusion. There are other naming conventions too but these are the popular ones. Funny, because I mistakenly used both. After having all these as preparations, I went on making the pages layout for different screen sizes.

Sub-step 3: Know the possible breakpoints for media queries

Now, this is one of my huge mistakes. I didnt search and read about breakpoints for media queries. I treated my 13-inch laptop as the biggest screen size. I forgot about the huge desktops because we dont have those and Im used to seeing people with laptops. The largest one is 1920 x 1080 but my webpage was still a one-column layout. So, I had to redo, delete, modify, or add some code in my CSS to turn into a two-column layout on a larger screen like 1360px and up. Indeed, breakpoints for media queries were my breakdowns!

10_breakpoints_for_media_queries.png

Sub-step 4: Drink fluid design

I aimed for a fluid design and I hope you do too. This means a design that transforms from one screen along with different screen sizes. For example, the placement of the navigation menu. After reading an article, The large desktop experience in responsive design by Johannes Holl, I learned an off-canvas menu is a good feature to add in mobile and tablet screen sizes (especially if the pages content is long). While fixed top navigation bar on laptops and a left-hand navigation bar on large desktops are nice to have so that visitors can easily look for anything. I applied them all except for the left-hand navigation bar through pure CSS only.

11_fluid_design.png

Another example is sizing the images which was difficult to do for me because I want them to have fixed sizes on different screens to satisfy my design preferences. Therefore, determining the breakpoints for the media queries is hugely dependent on your design. But, here were my breakpoints for my portfolio:

  • small screens (mobile): 320px-499px
  • medium screens (tablet): 500px-849px
  • large screens (laptops-desktops): 850px-1359px
  • larger screens (huge desktop monitors): 1360px-1920px

I based these off on guides from Media Queries for Standard Devices by Chris Coyier at CSS tricks, What is the ideal screen size for responsive design? by Shreya Bose, and What are the best screen sizes for responsive web design in 2022? by Shaun Anderson.

Step 3: Finally create the web design

So, you already got your logo, color palette, chosen fonts, designs for separating sections, styles, rough sketches of your portfolio layout, SVG images, content flow, and possible breakpoints for media queries. Lets go create the web design.

12_create_web_design.png

As Ive said from step one, my main advice is to keep it consistent. I learned it from the ebook, Designing User Interface by Hype. If you dont want to use Canva or Figma for some reason, then you can just use a pencil and paper. But it will be harder. Learning one of those design tools is worth it because you can see your actual design better. They let you create customized sizes based on your media query breakpoints so you can easily estimate how your designs will fit in particular screen size.

Step 4: Start to code

At this point, there should be a final web design to follow. The next logical thing to do is to code it.

Sub-step 1: Go through the Beta course at FCC

Doing the new Responsive Web Design Beta course at freeCodeCamp was an awesome experience! It helped me a lot to reinforce my learnings from different materials and finish my projects easier. Quincy Larson, the founder of FCC, seriously meant that it was a major update to their curriculum according to his article, "Learn Responsive Web Design by Building 20 Projects a Major freeCodeCamp Curriculum Update"

Sub-step 2: Install a text editor

Learn how to code in a text editor like VS Code. Lots of useful features like changing all the same words at once and the code can be viewed better than on CodePen (I dont know about other Integrated Development Environments - IDE).

13_install_text_editor.png

However, I learned from a valuable staff from freeCodeCamp, through his reply to my post at the FCC forum that some people get problems with file management and hosting so it's okay for the meantime to do the project at an IDE like CodePen.

Sub-step 3: Overcome overwhelming

I truly respect his opinion. I acknowledge and recognize that he's already an advanced developer and has experienced a lot in the field. But, I think if you find it overwhelming you can start or go slowly, and there's nothing wrong with "getting behind". Everyone has their own pace. Everyone does not start as a master. Everyone has their strengths and weaknesses.

13.5_one_step_at_a_time.png

It takes patience. So do baby steps. Calming yourself down helps. It let us think clearer. Once we have our brain and heart at ease, lets start learning from helpful tutorials. There are introductory videos from VS Code itself. Its not an easy task for everyone as each person has their own learning capacity. So, just go through the tutorials one by one or ask for help from people you know or in forums like from freeCodeCamp and The Odin Project (TOP). TOP is a free high-quality learning platform like FCC. Other amazing communities are willing to help you. Believe me, or should I say, trust the process. The time and effort to learn how to use an editor before starting any projects or just anything complicated as a beginner is super worth it. Get over with the overwhelming soon by slowly starting to get a hang of it. I believe everyone can do it one step at a time with consistency, persistence, and faith in ourselves, everyone, and everything else that matters.

Mentioning TOP, I remembered that their "Foundations" course has "Installation" as a preceding step to learning HTML. They encourage and teach students to install and learn how to use code editors before starting to code. I also remember taking the course "Introduction to HTML" taught by Colleen Van Lent. She was so good at teaching and explaining, it made me deep dive into web development. Maybe one of the reasons it wasn't a big problem for me how to learn to use a code editor and do Github hosting because an amazing teacher did so well in introducing me to them.

Sub-step 4: Learn Github basics

Another major thing to learn before learning HTML is how to use Github even just the basics.

14_learn_github_basics.png

Remember, do it one step at a time. If youre serious about learning web development like me, then this is a must to learn. I dont know it in-depth yet, but I started using it after like five days of working on my project. I was able to share easily my portfolio with other people so it was also easy to get feedback from them. Another reason is it shows how frequent our activities are, like how often do we do our projects? I think its nice to show off to potential employers, partners, or clients that were always grinding!

Sub-step 5: Maximize and minimize comments

Learn how to maximize and minimize the use of comments. I learned to maximize the use of comments from Shay Howes free online course, Learn how to code HTML and CSS. I very much liked how more organized the code was when comments were introducing every group of styles for the main sections. When theres a style, effect, or design I found complicated to do, I used comments to explain how it worked. So, when I start to forget it and I want to use it in another project, I can easily go back and understand how I did it. Aside from that, I used it to create a table of contents on the very top for easier CSS navigation. Creating it made me understand the flow of my code better. Lastly, I added credits on the bottom part of my CSS to list all the cool resources I used for my project. I honestly couldnt have done it without them so Im so grateful.

15_maximize_minimize_comments.png

On the other hand, I got the idea of minimizing comments from the same seasoned developer and staff at FCC. He replied to my post at the forum and taught me that we shouldnt use comments too often because the main purpose of utilizing them is to communicate brief necessary information to possible readers of your code. Brief means just a phrase or a few words. Necessary in the sense that the comment summarizes or describes a section or a part of your whole code. He mentioned about self-documenting code. To quote his words, (It is a) code that tells you what it is doing. It is broken into logical chunks, put in well named files, formatted correctly, and given meaningful names. Well written code tells a story. In the end, he said to me that if using comments frequently can help me learn, then I just have to continue doing it; Anyway, learning to self-document code will just go prevalent when I go over JavaScript.

In conclusion, if youre just a beginner like me who likes hundreds of lines of comments because CSS got too long making us go crazy a lot of times, then I advise you to maximize and minimize. Go to a copy of your CSS file then there you create your explanations through comments. Your main CSS file should just have concise comments that are in a few words or phrases describing the main and sub-sections of your code. I really wished I knew this sooner.

Sub-step 6: Inspect, detect

16_detect_inspect.png

Heavily use the inspect method because it allows us to change stylings on an element temporarily. If we want it, we can just copy and paste it into our editor. Its tiring to jump between the browser and editor all the time. Another reason is the easier fixing of styles. I lost my mind when I tried a bunch of ways to find out why the styles arent applying. This has happened to me a lot. But when I discovered that theres a line identifier in inspect element mode, my life was saved again from brain explosion. Yes, beginner things. Some possible reasons are the new style has lower specificity than the other old ones, or the new style was added way before the old style so the old one will take effect. Lets always remember that CSS cascades from top to bottom.

Sub-step 7: Apply Grid and Flexbox

But when should we use Grid or Flexbox?

17_apply_grid_flexbox.png

In my case, I used both of them in one design most of the time. Like I used Grid and flexbox with everything from the navbar and buttons down to the layout like rearranging sections in a manner suitable to different screen sizes. There are a bunch of articles or readings that explain when to use the two.

Sub-step 8: Avoid brain explosion with markers and whiteboard

When coding the layout, use markers and a whiteboard. Yes, theyre old-fashioned but still golden. Paper, pen, and pencils will do too. My mind was spinning when I was applying grid and flexbox. When my brain has reached its limit like I cant illustrate clearly where sections are supposed to be, I try to draw the layout on the board with markers. This let me see and understand my layout code more. While sketching it, I can answer easily layout questions like Which line of a column or row this element should go?

18_ avoid_brain explosion_with_markers_whiteboard.png

Sub-step 9: Appropriately name classes

Know how to name classes. This is one of the things I really wished I knew before. Maybe I knew but just forgot it. Anyway, this is important! I tried my best to avoid adding classes to elements with a style name, like:

<div class = red-round-button></div>

You never know, you might change the actual color or shape in the future. Many articles are talking about this topic. I found a good one on freeCodeCamp news/articles, CSS Naming Conventions that Will Save You Hours of Debugging by Emmanuel Ohans.

Sub-step 10: Validate code from time to time

19_validate_code.png

Sometimes check HTML and CSS code at W3Cs validator. It is quite helpful and scary to use. Helpful because it let us know exactly where we possibly went wrong in our code so its easy to fix. Scary because of the chance of knowing there are possible errors and we have to redo, modify or delete our code again. I only knew my HTML warnings when Im so done with my project. I found it difficult to modify my code again because I thought everything was intact. So, to avoid having the same bad situation, check the code from time to time. Especially, if there are major updates!

Step 5: Reflect on the learnings

I know this is not necessary. But for me, writing the things Ive learned makes me learn better. The knowledge is more engrained in my head and it forms a system that lets me pick up or reference back to any information with more ease. On the other hand, when I dont write them and I proceed to learn other major things, they go crazy messy in my head and I likely forget the lessons sooner.

20_reflect_learnings.png

One main question I ask myself when I do a reflection is What are the things Ive learned? I try to form my explanations of the lessons to make them more impactful to me. This is why I created this blog post. As they say, youve never truly learned if you cant even explain it on your own.

Step 6: Be proud and humble

Lets take pride in our achievement and share it with the world! The portfolio project was no easy task to accomplish if one has taken it seriously. If youre also the person who always targets quality when working, then the process will become hard. But thats what makes it fun. It makes us work with deep meaning. Not just for simply passing the course like how usually it is in reality. We study and work because wed love to have our dream careers. But sometimes, studying and working because we simply or badly need money is okay too. For me, finding the job that suits you or you like takes privilege and luck.

However, lets stay humble too. Too much pride in oneself can hinder growth. Helpful criticisms are blocked as theyre hard to handle or take in. Lets not forget what Aristotle said, The more you know, the more that you dont know. This is why I didnt add percentage bars of the skills like HTML and CSS because learning is forever. We could master a part of it, but I think we cant retain it forever, and well eventually forget some of it. And of course, knowledge always progresses, we cant always be at the top and catch up on all of them.

21_proud_humble.png

Thats it for my super long blog post covering a whole bunch of lessons I learned doing responsive web design. If youve come to this point, thank you so much for taking the time to read. If you found some things valuable, relatable, or wrong feel free to leave a comment or message. Id be so happy to know theres another human (not ready yet for extraterrestrial) being going through the same things, and I've been of help. Also, I'm open to criticism; I appreciate brutal honesty. They help me learn better.

Disclaimer

Whilst Jewel Keith (the "Author") has made every effort to ensure that the information provided on jewelkeith-jk.hashnode.dev (the "Site") is correct, it is not legal advice. The Author is still a beginner and not yet a professional web designer or developer, so the Site does not constitute professional and legal advice. Under no circumstance shall the Author have any liability to you for any loss or damage of any kind incurred as a result of the use of the Site. The Author does not vouch for third-party sites or any third-party services. The Author does not accept any liability that might arise from accessing the data presented on this Site. Your reliance on any information on the Site is solely at your own risk.


Original Link: https://dev.to/jewelkeith_jk/how-to-create-a-decent-portfolio-as-a-beginner-225e

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To