This content originally appeared on DEV Community and was authored by DEV Community
Finally, after pouring blood and sweat on my portfolio, I’ve 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 I’m 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, it’s 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)
I’ve 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 don’t have the same goal as mine and you’re 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!
This is what artists usually advise people when practicing to draw better. It means to look into other people’s 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 people’s cool portfolios, I can’t 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 it’s an actual personal portfolio is helpful. It made me realize that the webpage’s overall look would likely be based on my brand identity and I’ve noticed this in amazing portfolios I’ve 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 don’t know why I added that, it just looks good.” Here’s my logo explanation:
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.” It’s 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 I’m 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.
I’m 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.
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. I’ve created a public Youtube playlist where I’ve compiled tutorial videos on how to use Figma from freeCodeCamp since they don’t have one.
Figma is free to use unlike others and that’s one of the reasons I’m 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.
Next was typography. I chose Montserrat because I read an article entitled “Top 10 Best Google Fonts So Far For 2021” by Nestify, saying it’s popular and easily readable. I didn’t 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 Medium’s 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.
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 I’ll introduce myself from beginning to the end of my portfolio. I made a draft talking about my projects, myself, skills, education, and contact. I couldn’t 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 I’m currently learning, and what kind of projects I’m 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.
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 you’re curious how I edited my display picture, I watched a tutorial from Design with Canva.
I converted all of my PNG images into SVG format because actual courses are talking about how they can help increase a website’s performance. Anyway, I used the yellow waves background for the headings. I thought they make good dividers. I discovered it through Brett’s 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 page’s layout for different screen sizes.
Sub-step 3: Know the possible breakpoints for media queries
Now, this is one of my huge mistakes. I didn’t 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 don’t have those and I’m 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!
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 page’s 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.
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. Let’s go create the web design.
As I’ve 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 don’t 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 don’t know about other Integrated Development Environments - IDE).
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.
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, let’s start learning from helpful tutorials. There are introductory videos from VS Code itself. It’s 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.
Remember, do it one step at a time. If you’re serious about learning web development like me, then this is a must to learn. I don’t 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 it’s nice to show off to potential employers, partners, or clients that we’re 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 Howe’s 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 there’s 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 couldn’t have done it without them so I’m so grateful.
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 shouldn’t 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 you’re 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
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. It’s 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 aren’t applying. This has happened to me a lot. But when I discovered that there’s 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. Let’s always remember that CSS cascades from top to bottom.
Sub-step 7: Apply Grid and Flexbox
But when should we use Grid or Flexbox?
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, they’re 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 can’t 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?”
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
Sometimes check HTML and CSS code at W3C’s 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 it’s 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 I’m 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 I’ve 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 don’t write them and I proceed to learn other major things, they go crazy messy in my head and I likely forget the lessons sooner.
One main question I ask myself when I do a reflection is “What are the things I’ve 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, you’ve never truly learned if you can’t even explain it on your own.
Step 6: Be proud and humble
Let’s 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 you’re also the person who always targets quality when working, then the process will become hard. But that’s 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 we’d 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, let’s stay humble too. Too much pride in oneself can hinder growth. Helpful criticisms are blocked as they’re hard to handle or take in. Let’s not forget what Aristotle said, “The more you know, the more that you don’t know.” This is why I didn’t 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 can’t retain it forever, and we’ll eventually forget some of it. And of course, knowledge always progresses, we can’t always be at the top and catch up on all of them.
That’s it for my super long blog post covering a whole bunch of lessons I learned doing responsive web design. If you’ve 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. I’d be so happy to know there’s 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.
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-13T16:21:12+00:00) How to create a decent portfolio as a beginner?. Retrieved from https://www.scien.cx/2022/02/13/how-to-create-a-decent-portfolio-as-a-beginner/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.