SF Dev Workshop - 2024

Assignment – 1 | HTML and CSS

Portfolio Website

INTRODUCTION
When we meet someone professionally, we introduce ourselves, we tell them about our
skills, experiences, etc. What if we do it with the help of a website? Here comes the role
of portfolio website. A portfolio website is an ultimate way to introduce yourself, showcase
your work, skills, and blogs and let others reach out to you. Your task in this first
assignment will be to design your own portfolio website with bright and appealing visuals
that will convince visitors to look for more details. You have to use only HTML and CSS
for this portfolio web-page.

SECTIONS OF THE WEBSITE

The first step is to think about all the sections needed in your portfolio website. Most
important sections are mentioned here:

1. Intro section

2. My Projects
3. Skills Achievements
4. Contact me

The website is a single page website (all mentioned sections will be on the same page).
ELABORATING SECTIONS

1. INTRO SECTION
Navbar

Your website's navigation bar is often the first touchpoint your visitors will interact with, so
it's crucial to ensure your navigation bar is as helpful and engaging as possible.

● Navigation Bar will have links to the various sections that will redirect visitors to the
different sections of the Page.
● Make sure that when a link is clicked it should scroll smoothly to that section on the
website. Navbar should be fixed at its position even after scrolling, add a portfolio logo
at the left of navbar, and use hover effects to decorate links.

HomePage
This page should be in two parts: left side you have to give your brief introduction and
tagline, (example: hello my name is XYZ, I am a web developer) design the fonts size,
family, weight in such a way that it looks attractive also add a ‘contact me’ button on the
left part that takes you to the contact me section explained later in the assignment, and
right part should have your photo (*) both sides should be arranged properly.

(This is a demo image taken from Google, don’t completely copy it)
2. MY PROJECTS SECTION

In this section, you have to present your skills and achievements in card format,
specifically designed to help you master CSS Flexbox.

● This section should have the title as “My Projects” with an attractive subtitle of your
choice.

● Every project card should have an image, title of the project, then a button which is
named

“Visit->” when this button is clicked, the color of the button should change.

Optional: On clicking, along with changing the color of the button, change the text on
button from “Visit->” to “Visited”.

● Add a hovering effect on each card. The color of the text must change on hovering the
card.

● You should create 6 cards in this section (3 in a row) in an arrangement as shown in

the picture below.
● The cards must be made using CSS Flexbox only (CSS Grids not allowed).
3.SKILLS & ACHIEVEMENTS SECTION
In this section, you have to create cards strictly with CSS Grid only.

● This section should have the title as ‘My Skills & Achievements’ with an attractive
subtitle of your choice.

● Every skill card should have an image (or icon), its title (name of the skill), and a very
short paragraph describing the skill and its importance (you can use lorem ipsum
here).
● When these cards are hovered upon, the background color and text color of the
hovered cards should change. You can also try to add some other interesting hover
effects of your choice, like enlarging cards or making text appear on hover.
● You have to arrange 6 cards in the way as shown in the picture. If you don’t feel
comfortable with CSS Grid, don’t worry, try doing it the easy way.

Easy Way (Notice both height & width vary in

each row)
 Hard Way

4. CONTACT ME SECTION

Let's say a visitor of your page finds your skills, blogs interesting and wants to contact you.
Here comes the role of this section. We will provide a form on the webpage where they can
give their details for us to contact them.

● Whole page should have a proper background image

● CONTACT FORM should have input space for name, email id, date for appointment,
message and then a submit button. Since we are working with just HTML and CSS,
the form is not supposed to work for now. Nothing is expected to happen on clicking
the submit button in form. We will learn about form handling and connecting with the
backend later in the workshop.
● Input tags should be styled with proper border radius, font style, color. Form should be
given with proper opacity so text looks clear even in presence of background image.
 (This is just a demo image)

Responsiveness
As a number of different devices keep coming up, the variety of screen types and screen
sizes are keep increasing. As a developer, it is important to make sure that the website UI is
just as properly formatted, well proportional and usable, on each screen ranging from mobile
phones to tablets to laptops to monitor screens and all the different available screen sizes
within these as well.
Now, if we start testing and modifying our website for each of the commercially available
screen sizes, then that won’t be feasible at all. This is where responsiveness comes into
play. It helps in making sure that the website does not break (overflowing texts, overlapping
components, too tightly packed content or too much blank space, unnecessary scrollbars
and so on) for a large range of screen sizes.
After developing the website for your laptop screen, try to make it responsive. Learn the
different ways to make each of the different types of components in a website responsive.
Understand and choose the ways which fit your application and implement them after
completing your webpage. Learning how to use media queries is very critical to make a
website responsive.
You may want to create a number of breakpoints in your website, but it is recommended to
use breakpoints only when you want to change the structuring of the content. For other
cases, try using responsive units: rem, %, vh, vw, etc. for dimensions and position, and rem,
em for font sizes. Using grid and flexbox wherever possible and playing around with their
properties can lead to very highly responsive components.

At this point, you aren’t expected to come up with perfectly responsive webpage in your first
try.

Just try to add as much responsiveness as you can.

Important Instructions:
* Do not use javascript or any language other than HTML and CSS. Usage of bootstrap,
material-ui or any other template or framework is not allowed.

* Most importantly, DO NOT COPY THE CODE from anywhere, you can take reference,
but try to write every line on your own – to learn the most. We won’t be releasing any
grade cards at the end of the assignment or the workshop. Whatever you do in these
assignments, stays between you and us. So, just use this opportunity to learn and
improve. As for the SF Tech Team selections, copying isn’t going to get you
anywhere…because we’ll know.

* While writing CSS, don’t limit yourself to just using pixels (px) as a measurement unit.
Read about other units like rem, em, %, vh, vw and understand how using particular
units in particular places can help you design better and make your website highly
responsive.

* Try to add interesting animations, creative styling and pattern wherever you can. Also,
try to choose your color combinations wisely and make sure that your website looks
neat with proper spacing, alignment and sizing of all components (we’re talking
margins and padding). Show off those creative and artistic skill!

* We understand a lot of you would be starting from scratch with no or minimal prior
knowledge of HTML or CSS. So, the assignment might look a bit overwhelming at first
glance and that is fine. Don’t think about the website as a whole, rather focus on one
section at a time. Start building and working upon the components in each section
one-by-one. Slowly, seeing the sections come to life visually should motivate you to go
further. Also, it’s okay if you’re not able to fully complete the assignment. Try to do as
much as you can in the given time.

* Lastly, web development is a vastly interesting and highly sought-after field that can
open up plethora of opportunities for you, in web dev as well as other software
domains. With everything shifting online and digital, the demand for skilled and
proficient developers is enormous. And this is your chance to get a head-start in this
widely potential field. So, give it your best shot because who knows where it might
lead you to.