This is a course project that i did when i was in UIUC.I developed an webpage for selling poker training courses. The original repo is at https://gitlab.com/yusenw2/mp1 I have also pushed the source code under mp2 directory to this repo for any reference if needed.
In this programming assignment, you will design and implement a single-page website with specified functionality and formatting using only HTML, SCSS, and Javascript. The content of the website is up to you. For example, the subject can be a company/organization, a product, or a personal/portfolio page. This assignment will give you first-hand experience with HTML5 (e.g. header, canvas, video), CSS3/SASS (e.g. use of webfonts, animations, layout), and Javascript(ES5 or ES6).
Your webpage will have to implement the features listed below. Note that the examples are only meant to illustrate the features. You do not have to make you webpage look similar to the examples. You just have to incorporate that feature in some form.
- Layout: All content must be laid out in a single page with full-width horizontal stripes/sections including a header and a footer - Example
- Sticky Navbar: A top navigation bar that sticks to the top of the window when scrolling - Example
- Position Indicator: Indicator of the current reading position visible in the navigation bar (see above gif for example). Make sure your implementation highlights the last menu item when you scroll to the bottom of the page. ( Implementation Tip : To figure out which menu item to highlight, you’ll have to figure out which section lies directly below the bottom margin of the navigation bar. You can use methods that give you the height and position of different divs to figure that out. You will want to recompute this whenever there is a scroll event.)
- Navbar Resizing: Navigation bar must be larger when users are at the top of the page. As users start scrolling down, it should resize and become smaller. Note that the text font size should also start larger and become smaller as users scroll down - Example
- Smooth Scrolling: Smooth scrolling when navigating to a different section using the navigation bar - Example
- Carousel: A section with a carousel/slider using a minimum of three slides. It should include the navigation arrows on the side - Example
- Multi-column layout: A section with Multi-column content - Example
- Centering: Content in each horizontal stripe/section must be horizontally centered. At least one element on the page must be vertically centered. The vertically-centered element should remain centered even if the dimensions of its outer element changes.
- Responsiveness: Your webpage should look good when resized to the following resolutions:
- 1920x1080
- 1366x768
- 1280x720
- 1024x768
- Background Image: A section which uses a fixed-position background image - Example
- Modal: A section which uses modal windows with additional content - Example
- Video: Embedded video using HTML5 video tag - Example
- CSS3 Animations: At least one use of CSS3 animations (e.g. fade in/out, transitions)
- At least one use of scalable vector icons through CSS (e.g. FontAwesome)
- Inclusion of social media icons
- Layout and Overall Design - 20%
- Code (follows HTML5, SASS/SCSS, ES5 or ES6 best practices) - 13%
- Smooth Scrolling - 10%
- Carousel - 10%
- Modal - 10%
- Responsiveness - 10%
- Position Indicator - 5%
- Navbar Resizing - 5%
- Multi-column layout - 5%
- CSS3 Animations - 5%
- Centering - 2%
- Video - 2%
- Sticky Navbar - 1%
- Background Image - 1%
- Scalable vector icons and inclusion of social media icons - 1%
- This is an individual assignment. No collaboration is permitted.
- It is not permitted to copy/paste code that is not your own. You are, however, free to look at different code sources for inspiration and clarity. All sources (code as well as reading material) that you reference to complete this assignment must be declared in the submission.
- No libraries are permitted.
- There should be no use of inline styling.
- No inline script tags should be used.
- HTML tables cannot be used for layout.
- If you think something you’re doing might not be acceptable, please ask on Piazza.
- You must utilize some SCSS features (variables, mixins, etc). A plain CSS file will receive less points.
- Clone the repository:
git clone https://gitlab.com/uiuc-web-programming/mp1.git mp1, thencd mp1 - Install dependencies:
npm install - Start the dev server:
npm start - Open a browser and go to
http://localhost:8080/to view your page. You should see "Welcome to MP1!" at the top of the screen. Note that if for some reason your port 8080 is occupied, it will default to 8081.
Here's what you will need to submit:
- Create a private repository on GitLab. Make sure "Initialize this repository with a README" is not checked.
- Change the remote url for the mp1 directory to the url of the new private repository you created.
git remote rename origin old-origin
git remote add origin git@gitlab.com:<your-gitlab-username>/mp1.git
- Commit and push your local changes to this new repository.
.gitlab-ci.ymlfile automatically makes a Gitlab CI pipeline run to deploy your code. After the pipeline finishes, your site should be live athttps://<your-gitlab-username>.gitlab.io/mp1. It may take up to 10-30 minutes for the site to go live after the first deployment.- Invite
uiucwpas a collaborator. This should be as a reporter, not as a guest, otherwise we can't see your code. - Fill out and submit the form here