Udacity Full Stack Nano Degree Project2
The second project of the Udacity Full Stack Web Developer Nanodegree program called "Build a Portfolio Site".
This project demonstrates the usage of HTML, CSS to create a static webpage, Portfolio.This project also includes BOOTSTRAP involved in the displays My Portfolio about my Buddies as the webpage.
- Demo
- Download
- Prerequisites
- Documentation
- Running Documents Locally
- References
- Bug And Feature Requests
For a demo, check out Live Demo.
The files for the project, may be downloaded here.
Within the download you'll find the following directories and files:
MovieTrailer-master.zip/
├── css/
│ └── main.css
├── images/
│ └── sriram.jpeg
│ └── vijju.jpeg
│ └── eissah.jpeg
│ └── giri.jpeg
│ └── dp.jpeg
├── index.html
└── README.md
Get it from review here
This course is the longest of the program clocking in at 33.5 hours. It was made up of five blocks:
- Sizing Elements
- Intro to HTML and CSS
- Responsive Web Design Fundamentals
- Responsive Images
Below is a short summary of each block; just be adviced that this in no way is a comprehensive or detailed explanation of the content covered.
The first block covered the CSS box model and semantic elements in HTML5. It was followed by a related problem set.
The second block started with a repetition of HTML, CSS, and Boxes. Responsive layout and CSS Frameworks were introduced and a framework for responsive layouts were created.
The Html consists of differnet tags mainly
<html>, <head>, <body> body again divided into
<header>, <main>, <footer> it have some selectors they are clearly explained here CSS_HERE It then dealt with other frameworks, including Bootstrap. To segment the knowledge of Bootstrap many quizzes were given. Finally went through how to customize Bootstrap to include only selected features and why minified versions are prefered.
The third block started off with a discussion about why responsiveness matters and several web sites were showed on mobile. Then showed how to set up the workflow using Chrome's Dev Tools for device emulation as well as remote debugging on mobile devices.
It then explained why starting small and building up is the way to go, covering things like pixelation, DPR, CSS pixels, viewports and relative sizes. Targets and tap target sizes were also discussed.
The fourth lesson in this block covered common responsive layouts and how these make the transition from design to code a lot easier. The patterns covered were column drop, mostly fluid, layout shifter, and off canvas.
The first lesson was a short repetition covering the importance of responsive images and how to setup remote debugging on mobile.
The second lesson covered different ways to size images with CSS. It also introduced some lesser known CSS units. Apart from this it treated different types of images, like JPEG, PNG and SVG, and when to use which and why. Lastely it described how to optimize images and the related workflow using Grunt.
The third lesson covered using markup as images. It covered everything from CSS background images, Unicode symbol characters to icon fonts.
The fourth and last lesson covered how to make fully responsive images using the image element srcset and sizes attributes, the picture and source elements. It also covered accessibility with regard to images.
- Open and Edit index.html
- Add your custom images to images folder
- set path of images to
tag in index.html
- to make any changes to style, open css folder, main.css and edit
- Save file.
Code must be in format, if HTML, you have to visit visit formater and make it formatted. if CSS, you have to visit css formater and make it formatted.
Now, copy the index.html file path and paste the url in browser.(file:///C:/Users/vijaybabu/Desktop/FullStackNanoDegreeCourseFiles/ProgrammingFundamentalsAndWeb/portfolio/Portfolio3335/index.html)
-Html from Udacity_here.
-Html, Css, Bootstrap from w3schools_here .
-project requirements Project_review.
Have a bug or a feature request? Please feel free to open an issue.