This project is designed to help you prepare for your upcoming web development course and refresh your skills. By finishing this project, you'll be better prepared for the fast pace of our curriculum covering the skills necessary for you to become a full-stack developer.
Note from the Instructor: You should have received email instructions on where to submit your project. If you have any questions, please get in touch with your point of contact.
Most of all, it will get you back in the swing of coding!
- About the Assignment: Create Your Homepage!
- Setup Your Environment
- Configure Your Repositories
- Your Tasks
Click to Expand
A homepage is a great professional asset for any software developer, and for anyone working in tech. You are going to create a static webpage as your own homepage using HTML and CSS.
This site can be a part of your professional portfolio and a great asset in developing your career.
You will be evaluated in the following fashion:
-
Setup and Configuration. It is normal for setting up a development environment to take time and effort. When you start your job, they'll expect you to take at least a day to get set up! So, give yourself time to do this. Be patient. It counts for 30% of your assignment grade!
-
Add content and clean up the page. This is work to get you going. It counts for 20% of your assignment grade.
-
Give your page structure with flexbox! This is 50% of your assignment grade.
-
Bonus! Make your page responsive! so it looks good on a mobile device. Use the reference site as an example of how your page should look. This is an extra 20%!
In this project, you will develop your own portfolio website.
As an example, we are going to follow the basic page structure on the homepage of software engineer Brittany Chiang, inspired by these sites found on this list of portfolio pages
The index.html page in this repository (a collection of files hosted here on Github) contains the skeleton of your site. You will also define your own CSS classes to stylize your website. We are using the BEM CSS Methodology, which is an industry-standard method for organizing your CSS.
Note from the Instructor: You should constantly be googling new terms/concepts during class, or, be writing them down to ask about and/or google later!
The page design for this homepage project has several key elements:
- A Navigation bar
- A Center Column with:
- A Hero section
- Content sections "below the fold".
- A left column with a sidebar.
- A right column with a sidebar.
Note how all the critical information on this page is above the fold which means that everything on the site loads without having to scroll down the page.
Note from the Instructor: "Above the fold" page load time and performance are critical issues when developing real-world web apps with React.js or any other tool.**
For now we are focusing on simple page layout and design and don't have to worry about performance but it's good to start thinking about these things.
In this assignment you'll be working with CSS Flexbox, to bring this page to life and give it structure!
Click to Expand
You will need the following things:-
A programming text editor. I highly recommend installing Visual Studio Code, as a popular text editor leveraged both among industry teams and in the course.
-
A web browser. I highly recommend using Google Chrome. Chrome and Chrome Devtools (part of the web browser) are industry standards for frontend development and we'll be using them in the course.
-
A Github account. You will be submitting your pre-work by submitting a link to a github repository containing your work..
Click on the links above for installation/setup instructions for all operating systems.
Click to Expand
-
Fork this repository so that you have a main copy of this set of files under your own Github account.
-
Use
git cloneto make a copy of your own forked repository (from your Github account) to your local directory (on your device) -
Open up the local copy of this repository using Visual Studio Code. Rename the "Per-Scholas-React-Course" to "Per-Scholas-React-Course-{your full name here without spaces in CamelCase}" as a local directory to contain your final README.md file and other files.
-
Save and push changes to your own Github account
-
Install the Visual Studio Code Liveserver extension. You will use this to host your website as you work.
- Ensure the
index.htmlandstyles.cssfiles from this project are included in your forked copy on your own github repository.
Click to Expand
- Review how to open Chrome Devtools.
- See how you can use Chrome Devtools to view and change your CSS!!. You should be doing this as you work - it's a LOT faster than making changes in your text editor. Prototype the changes using Devtools, then add them in your text editor!
Click to Expand
-
Replace all of the sample text with your own words and about yourself. This doesn't have to be perfect -- just be sure there are no spelling or grammar errors.
-
Use a web-safe font for section headings and section paragraphs (the main content/text of each section).
There is an example of this in the styles.css file for the assignment.
-
Make the "Get in Touch"
<a>tag (also called a link or href) a mailto link so that people can email you! If you're not comfortable using your real email address, just use a made-up email address like "test123@test123.com". -
Make the background color of your main content section (the center column) different from the side columns.
-
Remove the numbers ("1", "2", etc) from the ordered list in your header nav section. See here. FYI the "header nav section" is the small menu in the header reading "About, Experience".
-
Make the header nav section links relative links to their main content sections, i.e. clicking on "About" should take you to the "About" section of your page. Google "relative links" if the above link isn't helpful.
(Click to Expand)
Give your page structure with flexbox!
IMPORTANT: You may not use CSS frameworks for this assignment. Write your own CSS. Feel free to find examples of relevant CSS to reference - many are linked to in this README.
This is the guts of your assignment. Use CSS Flexbox to structure your portfolio page! We want a similar structure to the example site. I recommend reading A complete guide to Flexbox. Additional resources are here, and here. Break this task down like so:
I've added some background colors to help you visualize the page structure. I HIGHLY recommend adding background colors to help you visualize as you apply flexbox styles to structure the page.
- First, apply flexbox to put the header at the top of the page, and everything else below the header. This might help.
- Then, use flexbox to create your three column-layout (left, center, right). This might help.
- Next use flexbox to create the "content sections" of the center column. This might help.
- Now make sure your first "Hero Section" with the large text is styled well.
Making a responsive site which looks good on tablets and mobile devices is a critical job skill for frontend developers. Make your portfolio page mobile-friendly!! Again, the reference site does an excellent job in this regard and should be your guide. Again, Chrome Devtools is your friend while doing this. Here are some resources