10 Things I Learned While Creating My Own Portfolio
As I had my mind set to start a front end development career, I needed as anybody who chose to take this path to have a personal space on the internet AKA portfolio, to showcase my work, give a solid idea about who I am and what skill set do I have for recruiters.
So like I previously mentioned, if I had to show what I’m capable of doing I needed to create some projects to include to my portfolio, so I had to think about ideas of projects, well.. it honestly didn’t take me so long to figure out a good idea for my first ever project. I needed a website, and I’m a developer hence I hired myself for this job.
I. Technical Skills
1. The element:last-child and element+element Selectors
I’ve been always confident about my knowledge about CSS but to my surprise I had to take some breaks to re-read about something basic and essential in this language which happens to be selectors.
- element:last-child selector : I’ve been thinking that p:last-child would always refer to the last <p> in the parent element even if another element comes after it which is wrong (that’s actually another selector which is element:last-of-type).
The :last-child selector matches every element that is the last child of its parent.
- element+element selector : I just discovered this selector, it came in handy when I was hesitant about giving a whole class to just a single element (an <h1> after another <h1>).
2. CSS Properties
As I said, I was way underestimating how big is the CSS world and just following some online courses was not in the slightest enough to go through every part of it:
- width: x ch : in fact it’s not the name of the property itself that I was kind of surprised about but the unity of measurement which is ch. You can set the width of an element with a number of characters, e.g width: 20ch, if you have a long paragraph that exceeds 20 character it will break the line and starts a new one.
- background-image : linear-gradient(direction, color-stop1, color-stop2, …) : I knew about this property but still never thought about using it before.
::after and ::before pseudo-elements : both of these pseudo-elements don’t work using them with a replaced element such as <img> or <input>.
- font-variant-numeric : I actually didn’t use this property but I stumbled upon it while I was searching for something else. So basically this property deals with fonts that give different spaces to numeric characters so if you have let’s say a <p> that dynamically changes its value it will engender some weird space between it and the element right next to it, therefore comes this property to give an equal space for every numeric character. Check the video below.
margin-block-start and margin-block-end : those properties get default values which I had to re-initiate as they generated some weird spacing to some elements (<li> and <h1>). check out the documentation for detailed information -I call them the hidden margins-.
3. Height Matters In Certain Cases of Responsive Design
A lot of developers would jump straight away to resize the window horizontally whenever the word “responsive” comes to their mind because of course it’s the width that matters in most cases but it wasn’t enough in mine. I designed my website in a way that the height has an important role to play and I haven’t thought about it until I resized the window vertically when I was working on the blog section which contains 6 squares including random articles and by shrinking the window up the squares didn’t look as aesthetic as they should be, same goes for elements that have a fixed position.
So it’s a rule of thumb for me now :
“If height matters in my design, I should keep in mind its responsiveness vertically”.
4. Conditional Rendering In React
A basic feature of React yet when I put my knowledge of the library into the field it gave me a better understanding of when it should be used, e.g I was creating an input component to add to my contact form and as the form had 3 types of inputs (text, email and textarea) I had to add a props to the component and depending on the value of it the component will render a different type of input.
/* Just a very simplified version of what I meant since I had other props and event handlers for some animations in my actual code (using the <p> as placeholders/labels and they animate whenever the input gets focus or blur events *///CustomInput.jsrender() {
const inputClass = this.props.inputClass;
switch(this.props.type) {
case 'text':
return(
<div>
<p>{this.props.placeHolder}</p>
<input type="text" name={this.props.name} />
</div>
);
break;
case 'mail':
return(
<div>
<p>{this.props.placeHolder}</p>
<input type="email" name={this.props.name} />
</div>
);
break;
case 'txtArea':
return(
<div>
<p>{this.props.placeHolder}</p>
<textarea type="text" name={this.props.name}></textarea>
</div>
);
break;
default:
return(<div>Not supported type</div>);
}
}/*ContactForm.js*/<form>
<CustomInput type="text" name="name" placeHolder="Name"/>
<CustomInput type="mail" name="email" placeHolder="Mail"/>
<CustomInput type="text" name="subject" placeHolder="Subject"/>
<CustomInput type="txtArea" name="deal" placeHolder="So what's the deal ?"/>
<input type="submit" value="Send" />
</form>
5. More Components == Cleaner Code
My plane was to make a 5 pages portfolio and I had in mind that every page should look as simple as possible thus 5 pages means 5 simple components, however I noticed that a lot of repetitive chunks of code and it began to get messy that’s when I started decomposing every part of my pages to sub-components and the code looked way readable, cleaner and appealing to the eye of reader (Javascript and CSS codes). So it’s better for me to have 15 files with a small portions of code than only 5 files with a mess of a repetitive and complex code.
6. Chrome’s DevTools Are Life Savers
- device toolbar : actually I wasn’t rich enough to buy every single gadget that had a different screen size to test the look of my website on it -I highly doubt I would even if I was rich to be honest- so here is when the device toolbar come to the rescue. Many thanks to the Chrome developers !
- audits : well I just happen to discover this feature while watching a Youtuber reviewing some portfolios, it’s a really helpful tool to keep an eye on while developing a website because it points the developer to the weak points of the page you’re working on such as SEO and performance.
II. Non Technical Skills
1. To Plan What To Do Next Right After Finishing My Daily Tasks
I felt more organized and somehow more enthusiastic waking up knowing what I’m working on that day rather than starting it without a clear goal. The satisfaction was doubled when I had to go to bed having in mind that I’ve finished what I’ve planned the night before thus better productivity.
2. I Better Work Only One Single Hour Per Day Rather Than Not At All
Who hasn’t that inner voice telling them to procrastinate and take the day off and then the same thing keeps happening the day after and so on ? I’ve been telling myself to work-out in the past, but each day I kept giving myself excuses to delay and then I don’t do anything by the end of the day, I felt really bad and kind of ashamed of myself before going to sleep every night until I decided to make a change which was a deal with myself :
“You’re right working out is so hard and exhausting, but let’s just do it, you don’t need to put your 100% effort on it the first time you try, you got to just start it and NOW !”
Now it has been more than 4 months since I made that deal and I still didn’t skip a work-out session to this day !
Same thing has been going for the development of my website, I kept delaying then I had to try to make another deal with myself and it worked out !
3. To Take Small Breaks
Sometimes I had to deal with some complicated parts of code or I had some weird animation that worked but not as intended. Focusing on resolving those issues for so long was a part of the problem actually, it was so stressful and I was rather ruining the code instead of fixing it. So I had to just get off the chair and go do something else, eat some fruit, talk to family, clean my room or anything else as long as it doesn’t include coding. That helped me tremendously to feel refreshed and in a way better mood to solve my problems.
4. To Keep Looking For Inspiration
In the process of design I kept working on a new version of each page then modify and add on it or just completely remove something and start designing it from the start until I come with a better looking version, so by the end of this phase I thought everything was perfectly fine, I’m ready to code and I won’t get back to edit the design again. Even so starting to code and getting a taste of what it looks in the browser, I had the urge to keep looking for more inspiration because some details -small details- looked like they aren’t as good as they were on the board of my prototyping tool. So even if the design is complete there should be a window for small tweaks and research to add value to some of the details of the project.
Here are my main sources of inspiration :
Conclusion
Working on my first professional project was really fun, I learned a lot even if it was a simple and minimal designed portfolio. Now that it’s ready to get published I feel more enthusiastic and hungry for more creativity and productivity, it’s time to make it shine with some awesome projects.
LET’S GO !
