Recently I needed a shadow around the image of my portfolio. So I asked around on how to do it, of course I google it as well. I found two options that I see them fit to every needs. One is on Canva and the other one is in native CSS. As Niall suggests. I chose the CSS option and I want to quickly go with you how to do it if you are a newbie like me. Here we go:
Create a transparent background.
If you like to have the shadow around the image, not on the box you should create a background to that image so that it’ll be ..well, nicer. You can do that by using Remove BG website which it’s free for a certain quality, you can access the website and upload your photo here
Before we begin I want to tell you that I also created a video tutorial that is under 2 minutes and it explains the below steps accordingly and I also added the code source on codepen here.
add a shadow to an image using CSS
Breaking points:
As usual I will break the process in points so that it will be easier to follow.
create a folder on your desktop, (or whatever place you see convenient) to stock your project
open your IDE (I am using VS Code)
open “new file”
choose the folder you created (the one in the desktop from number 1 in this list) and open it
create a new file ended in .(as of dot) html
write this code inside of the .html file<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><link rel=”stylesheet” href=”styles.css”><title>shadow in css</title></head><body><img class=”drop-shadow” src=”YOUR PHOTO NAME” alt=”your photo name “></body></html>
Create a file ended in.(as of dot) css, in the code above titled styles.css
Back to our .html file make sure you hooked up the stylesheet from the css file
link the photo you want in the html file, I am referring to this line in our .html file: <img class=”drop-shadow” src=”YOUR PHOTO NAME” alt=”your photo name “>
At this point we should check the project in our local host by opening the “live Preview option” on our IDE. If you haven’t already downloaded the extension you should, the complete documentation on extension for VS Code you can find it here.
inside our .css file write the following code:.drop-shadow {filter: drop-shadow(2px 4px 10px #222);}Of course you can play with pixels so that you have your desire shadow.
At this point, after you saved all the project in your IDE, you could see the final image having shadow around it.
Conclusion.
Having this in our hand we can use it for our project(s) and we also learned a new thing. I hope this small tutorial will help you in your future projects.
Hey, long time no see. It’s been almost three weeks since I haven’t wrote, so it’s good to be back.
As usual, I don’t make long introductions, so here we go.
1. You get exposure!
creating your portfolio you get to be known. Whether is for job hunting, connecting with other developers, or practice, people will get to know what you do and what you are passionate about. A portfolio can help you also to bring new customers if you plan to freelance, in fact, a portfolio nowadays stands almost like a Resume, and it’s a must if you ask me.
2. Is a method of self-discovery and confidence building
A portfolio can also help you in the future see the you develop your skills. You can look back and see what skills you knew, for instance, a year ago and add the skill you learn meanwhile. Having a portfolio you can ask for feedback from other devs and they can give you advice so that you’ll improve it.
3. It keeps you organized
For many of us, self – taught or students, time is important when it comes to programming. A portfolio can help you organize your accomplishments, can help you set goals and categorize your aspirations and it shows who you are and your personality.
4. It helps you implement what you are learning.
Building your portfolio helps you practice what you are learning and gives the feeling like in real life. It also helps you find a new way of working and you discover new things while you carry out the work.
These 4 reasons I discovered them by myself while I was building my Portfolio. It took me around 10 hours and I’ve created it during 10 days. It was a small personal challenge that I wanted to accomplish. You can see the work I’ve done here and the source code here.
If you’d like to know the methods and the way I created it let me know and I will write a full tutorial about it.
While there are plenty of tools to create a portfolio, you can develop your own.
I always thought that creating a portfolio it’s a difficult task and with a difficult task I tend to procrastinate, but this is another topic that I might tackle in a future article. Nevertheless, in time I learned that breaking difficult tasks into small steps will be easier to accomplish.
In this week’s article, I will give you three tools based on my experience to create your portfolio.
Why do you need a portfolio?
Nowadays a portfolio is more like a resume, for quite lots of companies it is imperative when you want to be hired, to present a portfolio. If you are interested in only what I used, and are in a hurry, you can skip reading the article and go at the end of it and see just the resources.
Hi, I am Luc, a web developer that struggles to beat his own results.
WordPress
While this option is at hand, fast, pre-built, and easy to use up to a certain point, it brings a certain limitation as of what you can do and what you can not do with your portfolio, that is unless of course, you don’t have a particular theme installed.
You can use plug-ins that will help you to ease your work and gain time. But in a long run, you will encounter difficulties and your website will diminish speed and performance. I did my best to improve my WordPress website, but Lighthouse from Google always gave me under 70%, I hope you can do better than this and you’ll share the results.
Customised portfolio
If you ask me, I would go with this option as you can build it from scratch. You can just let your imagination flow and you can always insert new things and implement whatever you are learning whenever you want.
The downside of this option is that it requires plenty of time to do it, and if you are like me that need jobs to bring food to the table then this option it’s not the best.
But, if you are willing to learn and give time then you can opt-in for this way of building your portfolio.
Customised Theme
One of the first portfolios I created was a customized simple one-page website theme hosted on GitHub. The second one it’s also hosted on GitHub.
This option is the best that I found at the moment.
A customized theme is a free downloaded theme into your local machine and customized at your taste.
The positive side of this option is that you see someone else’s code, you learn how to implement your code, you have access 100% to modify the content, you save time, and you learn by practicing.
One of the downsides is that you need to have at least a basic knowledge of HTML, CSS, and JavaScript, to modify the theme itself. If you don’t know where to start I wrote an article about my path that could help you, you can check it out here.
Conclusion
Build with the tool you feel more comfortable and it’s easy for you to get the thing done.
I prefer the customized theme as this is a way for me to improve my own knowledge of programming and as well to practice what I have already learned.
Use the right tools according to your portfolio project, what I mean by this is to not try to reinvent the wheel and keep things simple.
Keep in mind that there is no easy path to learn, so if the time allows you, build your portfolio from scratch.
Resources:
For WordPress, I use The Divi Theme. You can have a look here to see how it is. This link goes to my WordPress version portfolio built with Divi.
For a Customised Portfolio that you want to build from scratch, I don’t have a certain link, but you can find inspiration on these sites: Behance and Dribble
Customised Theme:
For my first theme portfolio, I used a Bootstrap Theme you can see here and my customised portfolio is here.
The second one I used is also a pre-made theme I downloaded and then customised it almost 90% and you can see various themes here. My actual Portfolio is hosted on GitHub and you can see the result here.
That’s it for this week, wishing you a productive week ahead, I hope you find this article helpful.
Setting goals gives you long-term vision and short-term motivation. By setting clearly defined goals, you can measure the achievement of those goals, seeing forward progress in what you think might be a long projects.
Hello, I am Luc, a web developer in his 40’s and I document my journey into web development career.
Seeing the big picture.
When it comes to a career both web development and financial goals go hand in hand. Make a step back, sometimes this helps to see the bigger picture and arrange by priority your goals. A Romanian artist by the name of Constantin Brancusi said that “the higher you go, the wider you see”, so stopping and focusing by writing down my goals helped me to get closer to them step by step.
Setting goals is effective.
Working towards a goal is a major source of motivation which improves performance. I give you four goal-setting principles that can help improve your chances of success, according to Locke and Latham article “Toward a Theory of Task Motivation” :
Clarity
Challenge
Commitment
Feedback
Clarity and specific goals eliminate the confusion.
Challenging goals helps you accomplish more.
Commitment helps you achieve the goals.
Feedback helps you improve it.
Setting a goal keeps you focused.
Setting a goal helps your mental boundaries, what I mean by this is that when you have a certain endpoint in your mind you’ll automatically stay away from distractions. It’s like preparing for your trip with the bus and you know that at 10:30 you’ll have to be at the bus station and you’ll organize your time in such a manner that you’ll be there to get the bus.
Goals help you measure your progress.
I tend to look at other developers’ progress and see if I can do that as well. I have to be real when it comes to reality check as I can’t compare to anyone and I don’t allow myself this luxury as each of every one of us have different circumstances and lives. I compare my own progress. I don’t see myself “arriving” until I am not there, thus avoiding discouragements. Nevertheless, measuring progress helps me see the advance that I’ve made and brings me closer to the end goal moving me in the right direction.
Goals help you overcome procrastination.
I’ve let this one the last on purpose as it’s the most important for me.
When it comes to procrastinating, I am a Jedi Procrastinator.
When you set a goal you make yourself accountable. On the other hand, this is going to do things not according to your mood and it brings a Reminder because they tend to stick in your mind. Learning to not succumb to my mood took me time, I am still fighting with it but I see over the years a great improvement.
A briefly personal view on Goals:
Setting goals can help us move forward in life and give us a roadmap to follow. Goals are a great way to hold ourselves accountable, even if we fail. Setting goals and working to accomplish them helps us define what we truly want from life.
Goals also helps us prioritize things.
We can definitely choose to wander in life without any goals, but setting goals can help us live the life we want and brings happiness.
Of course, we don’t have to live every moment of our lives planned out because we all need those days when we have nothing to accomplish, but having goals gives us also a purpose when we think everything else is falling apart.
Hopefully, this week’s article brought to you value and you enjoyed reading it. Until next time, keep your focus on your goals.
Now that you decided to continue to read, let me say that this week I started my new course on Vue. I am very impressed with how so little code can make so large difference, in comparison to native JavaScript. I am still waiting for one of my favorite teacher’s Vue course, and I thought it will be a nice way to wait by learning the basics at least until it will be released. I would love to compare Vue with React, but I hadn’t got to touch React, not just yet, so I will just say that in comparison to jQuery, which I did work with, it’s impressive.
Remember I often said, in my previous articles, that I don’t like long introductions? I just wrote one so excuse me. Let’s jump right into the core.
What is Vue.Js
According to Vue documentation itself, it is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
in my own words: Vue.js helps you make dynamic user interfaces for the web.
So, Why you should learn Vue if you are a newbie like me coming straight from Vanilla JavaScript.
Conventions
All the busy work is gone Bye-bye. Vue helps to avoid it, it has a lot of built-in solutions. It has effort in saving conventions like animations and management.
2. Developer’s best friend.
I was hesitating which one of the following three points to write first: documentation, graphical interface, or the CLI (command-line interface). Documentation won as I learned more from their documentation, so on that matter I installed the npm via CLI on my MacBookPro and it works like a charm.
Not to mention the fact that for a newbie like me, the way Vue is presenting the tools, which by the way there aren’t a lot to learn and it doesn’t need so much time to get familiar with, is tremendous.
I haven’t yet bumped into a real problem to ask the community’s help, I just started, so give some time, but as I’ve read in a LinkedIn community, they are pretty kind and helpful.
3. Popularity.
In just a few years Vue gained considerable popularity. Companies like Facebook, GitLab, Netflix, Adobe, Behance, Xiaomi, WizzAir, EuroNews and even Grammarly (which I use to correct my typos) are using Vue in their code base, so it’s a good starting point for it to increase chances of being hired.
4. Flexibility
This means that Vue can be used for Single Page Applications as well as to build small and interactive parts and to be integrated using different technology. It can be a full-featured framework that you used to build a whole project or it can be just a library in your project. Grammarly took advantage of it and built its signature interface while WizzAir built its amazing interface in its apps. One of the most outstanding platforms that get my attention is Adobe. If you want to build your portfolio on a Vue based platform, choose Adobe Portfolio, it’s amazingly fantastic. Okay, okay, I am sorry to be so excited but I can’t stop being impressed by the complexity and at the same time simplicity of Vue.
Basic JavaScript knowledge to learn Vue
In terms of learning Vue, I find this list of prerequisites so that someone out there could learn Vue.
So how much JavaScript should I know before learning Vue.js?
Have an overall understanding of how code is executed in JS (execution context, stack, event looping, hoisting).
How scopes work.
How JavaScript is a loosely typed language and how coercion works.
Operator precedence and associativity.
By value and by reference in JavaScript.
How “this” keyword behavior in different environments.
What are closures
Prototypical inheritance.
Function constructors and the “new” keyword
User Inputs
Event Handling
I couldn’t build a simple dynamic user interface for the web with my JavaScript knowledge at the time I decided to go with Vue and I went back to fundamentals. This is what I did to test myself and perhaps it will work for you as well:
Create a web page with a simple form, say, three inputs and a submit button
Validate each input of the form using JavaScript
If the form is invalid, show an error message and prevent submission
This simple task requires you to know the basics of UI programming:
- Basic JavaScript
– DOM querying
– DOM manipulation
– Event handling
After that I was good to go.
If you can do this, you know enough to get started with Vue. If you can’t, work on this first, as Vue won’t be helpful so much, not just yet.
Conclusion and a brief recap:
Vue it’s a progressive framework for building user interfaces, it’s developer-friendly, it is flexible, it gains in popularity increasingly, it’s simple to learn for a newbie into JavaScript knowing the fundamentals.
Just before I live you, I would like you to have a few links that helped me:
Grammarly (free and paid versions) = I use on a daily basis when it comes to correct the typos, and it’s using Vue (yes I know I said that before 🙂
