Yes, but try to just look at the website.
For this project, I’ve chosen as the website that I’m going to build simply by looking at it and coding what I see, is a website that was built by Traversy Media on YouTube — The Acme Web Design Project.
Here is the website for the video: https://www.
youtube.
com/watch?v=Wm6CUkswsNw&index=3&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CUI’ve chosen this for my website because I figured that since it was easy to watch the website being created in the video, that if I got stuck when I attempted to code this on my own, I could always consult the video in order to continue.
Also, in the video description located below the video (you might have to click on the “SHOW MORE” button to see it), you’ll see a section called, “CODE DOWNLOAD.
” This will allow you to download the actual code files that you see being built in the video.
But instead of looking at the code itself, open these files in your web browser to see the actual website.
Regardless, this project can be any website that you believe that you have the ability to code.
It doesn’t have to be the one I used.
Any styling options or any other content changes are up to you.
But your website must be responsive and your HTML must be semantic.
Project 5 — Acme PhotographyThe goal for this project is to simply code along with the video, but you’ll want to take notice on how to get the website to be automatically populated with pictures.
This is another project that comes from Traversy Media on YouTube.
Here is the website: https://www.
youtube.
com/watch?v=XsEnj-1hG2o&index=6&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CUAny other styling options or any other content changes are up to you.
But your website must be responsive, and your HTML must be semantic.
Project 6 — Welcome To The BeachWelcome To The Beach ProjectThe goal for this project is the same as the last one.
All you’re going to do is simply code along with the video, but you’ll want to take note on how he is able to make the main picture size itself to the browser.
This project very well might serve well as a template for other projects you may run across in the future.
This video comes from Traversy Media’s YouTube Channel.
Here is the website: https://www.
youtube.
com/watch?v=hVdTQWASliE&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=9Any styling options or any other content changes are up to you.
But your website must be responsive, and your HTML must be semantic.
Project 7 — Mobile First Response Responsive Contact FormThe goal for this project is to try to code this website by just looking at it.
Very similar to the “Code A Website By Eye” project that we reviewed earlier.
This video comes from Traversy Media’s YouTube Channel.
Here’s the website: https://www.
youtube.
com/watch?v=Sb5qOa3R4hY&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=19If you would prefer to follow along with this video, take notice that as the browser is resized, at a certain point, the contact section moves from the left-side of the form, to the top of the form.
The good thing about this project is that you’ll have the video and also you’ll be able to download the code in case you get stuck attempting this on your own.
Any other styling options or any content changes are up to you.
But your website must be responsive, and your HTML must be semantic.
Be mindful that your users might want to be able to advance through your form by using the tab button on their keyboards.
Also, it might be helpful to the user to add some focus as they advance through the form.
I know I would certainly appreciate it.
Project 8 — Build A Technical Documentation WebsiteThe goal for this project is to build a technical documentation website.
Real world examples of this might be an online manual, or a health care member’s online manual.
Apple uses a technical documentation layout to present their Swift programming language: https://swift.
org/getting-started/A technical documentation website is a website that when viewed at full size, a menu is placed to the left of the content.
The left-side menu can scroll independently from the content.
The content can scroll independently from the menu.
But, when a menu item is clicked, the content moves to that section of the document.
And when the browser is resized, some websites make it so that the menu on the left jumps on top of the content each in its own scrollable section.
Here is a screenshot example of a technical documentation website:An example of a technical documentation pageAny other styling options or any content changes are up to you.
But your website must be responsive, and your HTML must be semantic.
The idea for this project came from FreeCodeCamp.
Here is their example of a technical documentation website: https://codepen.
io/freeCodeCamp/full/NdrKKLProject 9 — The Parallax EffectThe goal for this project is to code along with the video, but take notice on how the content seems to run over the picture when the user scrolls the website.
This is another project that might serve you well as a template for other projects you may encounter in the future.
This video comes from Traversy Media.
Here is the website: https://www.
youtube.
com/watch?v=JttTcnidSdQ&index=11&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CUTake some time and have fun styling this page as you see fit.
Learn about opacity and how if affects your images.
Learn about how to color your images with a overlapping color.
There is a lot of potential of having a lot of fun with CSS in this project.
But, you’ll want to make sure your website is responsive and semantic, but looks cool as well.
Project 10 — The This is Not iTunes ProjectThe goal for this project is entirely up to you — you can try to build this webpage on your own, or you can follow along with the video.
This video comes from Traversy Media.
Here is the website: https://www.
youtube.
com/watch?v=GJXXf3_dcng&index=4&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CUThis video uses some jQuery to build its website.
I’ve not studied jQuery, so I’ve decided to skip it.
If you’re interested, follow the video and you’ll learn how to add jQuery to your website.
I believe the jQuery is used in the video to achieve a scrolling effect.
I wonder if there isn’t a CSS transition, or animation that can achieve the same effect?The styling and content changes are up to you.
Responsiveness and Semantics are the goal.
Project 11 — Hands On With CSS GridThe goal for this project is to learn about CSS Grid.
The video comes from Traversy Media.
Here is the website: https://www.
youtube.
com/watch?v=M3qBpPw77qo&index=35&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CUIn the video, you’ll see that the website is made by using CSS Grid for layout.
But can you achieve the same layout with CSS Flexbox, or with CSS Floats — or a combination of all three?.Once again, its time to explore layouts and how they work together.
Also, in the video, you’re led to code the website mobile first and then expand to larger screens.
If you’re unfamiliar with mobile first design, then you’ll want to take notice of how the website is made in this manner.
Watch the video to learn about CSS Grid.
If you want to explore, try to create the same website using CSS Flexbox and CSS Floats.
The styling and content decisions are up to you.
Responsiveness and semantics are always the goal.
Project 12 — The Tribute PageThe goal for this project is to create a webpage that serves as a tribute to a person, living or deceased, that you admire.
The layout and styling and anything else is up to you.
If you’re looking for inspiration, here’s a website that might help you: https://www.
w3schools.
com/w3css/w3css_templates.
asp.
Your webpage must be fully responsive and semantic.
Your webpage must include a list of accomplishments or a timeline of key achievements in your person’s life.
Your webpage must have at least one link to a website where your user can learn more about your highlighted individual.
Place a short paragraph on your tribute page that briefly explains why you chose this person to tribute.
Thank you to FreeCodeCamp for the idea for this project.
Here’s FreeCodeCamp’s original version of the Tribute Page: https://codepen.
io/freeCodeCamp/full/zNqgVxProject 13 — Product Landing PageThe goal for this project is to create a product landing page.
Your website needs to have the following:Please create a navigation bar that stays at the top of the website even if the user is scrolling.
Please include a form that will accept the entry of a user’s email address.
The website will know if the email address was entered incorrectly, and the website will require the user’s email to join the company’s mailing list.
The form will not be submitted without an email address.
Please include a product section that will showcase at least three products along with their features that will help a visitor make an informed decision as to which of your products they should purchase.
Please include a video, or a few videos that depict examples of how your products are used.
The videos can be tutorials, or they can be videos of your product being used.
Please include a section that showcases three pricing cards of three separate models of product.
Each card will include the name of the product, the price, and three or more redeeming features.
Please include a footer section that will have information about the company, like address, phone number, driving directions to the storefront, etc.
Any styling options or content changes are up to you.
But responsiveness and semantics are the goal.
Thank you to FreeCodeCamp for the idea for this project.
Here is FreeCodeCamp’s version of the Product Landing Page: https://codepen.
io/freeCodeCamp/full/RKRbwL.
Project 14 — Personal Portfolio PageThe goal for this project is to create a personal portfolio page.
If you’re looking for inspiration for your layout, here are some template ideas for you: https://www.
w3schools.
com/w3css/w3css_templates.
asp.
What content will you add to your personal portfolio page?.Will you highlight your abilities as a developer and overload your visitors with the languages you’ve mastered?.Will you highlight what you’re knowledge and fortitude will bring to an established company dynamic?.Will you showcase your resume or your CV?.Either way the choice is yours.
Any styling and any content changes are up to you.
As always, responsiveness and semantics are the goal.
Thank you to FreeCodeCamp for the idea for this project.
Here is FreeCodeCamp’s version of the personal portfolio page: https://codepen.
io/freeCodeCamp/full/zNBOYG.
Project 15 — Color Me AwesomeThe goal for this project is to display colorful cells in a way that is responsive.
A bit of backstory: There is a website that highlights all of the color names that are available in CSS.
The website is called neil orange-peel, and you can find the website here: http://colours.
neilorangepeel.
com/.
From what I understand this has been a valuable resource to web designers and developers for years.
You’ll create cells that contain a color name, like “blue,” and the background-color of that cell will be the color in the name.
So, the cell for “blue,” will have a blue background.
Keep in mind the color of your text.
Dark text will be illegible on a dark background.
The cells must be responsive and they must adjust themselves to the size of the screen they’re being viewed on.
An example of the cells in the Color Me Awesome projectHere is a resource with the color names that you can use for this project: https://www.
w3schools.
com/colors/colors_names.
asp.
Will you design your cells alphabetically by name, or will you design that your cells appear in hue order?Project 16 — Flash Card Quiz GameThe goal for this project is to create a website that presents a series of flash cards, where the answer is revealed after a period of time, or the user clicks on a button to reveal the answer.
The questions and answers can be about any subject you desire.
Bonus Points: Can you make it so that JavaScript keeps score and reports the score to the user?Styling and content is completely up to you.
Responsiveness and semantics are the key.
Project 17 — The Hall of PresidentsThe goal for this project is to create a responsive website that displays the portraits of the Presidents of the United States.
Each picture should include information about each President.
The information can be presented in any way you wish, but it always has to accompany the portrait as it is position for responsiveness.
If you were to view such a website on a mobile phone’s web browser, each Presidential portrait might be positioned one on top of another.
Styling and content are completely up to you.
Responsiveness and Semantics are the key.
Project 18 — We’re Getting The Band Back TogetherThe goal for this project is to create a web page about your favorite band.
It doesn’t matter if the band is still together or has since broken up.
You can use this layout for inspiration: https://www.
w3schools.
com/w3css/tryw3css_templates_band.
htmYour band’s website must include a form of some kind.
Include any form element or elements that you wish: input fields, text areas, checkboxes, radio buttons, oh!.and don’t forget your Submit button.
You can create a one-page scrolling website, or a multi-page website.
Try to use something that you’ve learned in one of the previous projects.
As usual, styling and content are your choice.
Responsiveness and semantics are key.
Project 19 — Movie TimeThe goal for this project is to create a website that displays your favorite YouTube videos.
YouTube provides an embed code for this purpose.
The website that you create can be a collection of videos that you’d like to watch, maybe placed in the order of how you would like to watch them.
Maybe, you can include a checkbox that signifies that you have watched that video, and you can keep you place.
Any styling or content are completely up to you.
But as always, responsiveness and semantics are key.
Project 20 — Who Are The People In Your Neighborhood?Build a mock website for a local businessThe goal for this project is to create a mock business website for a local business in your hometown.
I came across the idea for this project by looking at the area around my house on Google Maps.
As I zoomed out, I started seeing names of local businesses — some of them, I haven’t heard of or even knew that they were there.
You might want to conduct a search on the business you’ve chosen to make your mock website for.
You might find that they already have a website — how would you make it differently?.You might find they have assets with Facebook, or Twitter that you can use in your mock website.
Styling and content — up to you.
Responsiveness and semantics are the goal.
How would you present your website to the business you’ve chosen?.Maybe this business could be your very first client?.Who knows?If you have some cool HTML and CSS project ideas that might be helpful to people, send a comment and let me know about it.
Let’s make this article a valuable resource for HTML and CSS projects for everyone.
Until next time, take care,Joe, the Older Coder.
.