assignment for html and css

Awards Season
Big Stories
Pop Culture
Video Games
Celebrities

How to Get Started with Website Design HTML CSS Code

Designing a website from scratch can be a daunting task, especially if you’re unfamiliar with the coding languages used to create it. HTML and CSS are two of the most important coding languages for website design, and understanding how to use them is essential for any aspiring web designer. This article will provide an overview of HTML and CSS and explain how to get started with these coding languages.

What is HTML?

HTML stands for HyperText Markup Language, and it is the language used to structure a web page. It is made up of elements that define the content and layout of a page, such as headings, paragraphs, images, lists, links, and more. HTML is the foundation of any website, and it is essential for any web designer to understand how to use it correctly.

What is CSS?

CSS stands for Cascading Style Sheets, and it is the language used to style a web page. It allows you to control the look and feel of your website by defining colors, fonts, layouts, sizes, and more. CSS works in conjunction with HTML to create a visually appealing website that looks great on any device.

Getting Started with HTML & CSS

The best way to get started with HTML & CSS is by taking an online course or tutorial. There are many free resources available online that can help you learn the basics of coding quickly and easily. Once you have a basic understanding of HTML & CSS, you can start building your own websites from scratch or using existing templates.

Learning how to use HTML & CSS can seem intimidating at first but with some practice and dedication it can become second nature. With a little bit of effort you can become an expert web designer in no time.

This text was generated using a large language model, and select text has been reviewed and moderated for purposes such as readability.

Mandatory Exercises

Assignment 2 (APIs, React)
Assignment 3 (DHIS2)

Mandatory Assignment 1

Part one (html and css).

In this initial assignment, we will be working with HTML and CSS to create a responsive web page that fits all screen sizes.

If you have limited experience with HTML and CSS, we recommend reading the HTML5 Style Guide and Coding Conventions before you proceed.

Step 1: HTML structure

Create a .html document with the standard HTML-structure ( <html> , <head> , <body> etc.). Set up a basic structure following HTML5 semantics that includes a header-element to contain a menu with links to relevant pages and a picture of you. Further, the page should include a section that present projects that you have been part of in a list, and/or similar sections with work experience, and courses and educational institutions attended. One section presenting one of the examples above is sufficient. You may use the template to structure your HTML file:

Other relevant resources

HTML elements

Step 2: CSS

Create a .css file and link to it in your HTML-document. Add styles to the different components of the page, so that its design resembles (something like) the layout illustrated in the figure below.

Relevant Resources

An example personal page with a header and a list of projects and work experiences.

Step 3: Responsive design

Make sure that your design automatically fits all screen sizes. For instance, the number of projects displayed horizontally should automatically adjust to the width of the screen. This can be tested in most desktop browsers with the Device Mode tool.

HTML Responsive Web Design
Responsive web design basics

Free HTML Course
HTML A to Z Complete Guide
HTML Attributes
HTML Audio/Video
HTML MathML
HTML Examples
HTML Questions
HTML Tutorial
Web Technology
Write an Interview Experience
Share Your Campus Experience
UI & UX Developer – Education, Skills, Salary, and Career
How to add tooltip to HTML table cell without using JavaScript ?
Creating a Custom Image Slider using JavaScript
Font scaling based on width of container using CSS
Targeting only Firefox with CSS
Can I Learn HTML in 2 Weeks?
HTML Viewport meta tag for Responsive Web Design
How to Learn CSS in 21 Days?
10 CSS Selectors Every Developer Should Know
CSS Tricks That Every Web Developer Should Know
Top 10 Uses of HTML in the Real World
Email Template using HTML and CSS
Smart CSS Solutions For Better Web Design
10 HTML Project Ideas & Topics For Beginners [2023]
Best Books to Learn Front-End Web Development
Frontend Developer Roadmap 2023
CSS Floating Animation
How to Create a Tab Image Gallery ?
HTML cols Attribute

Top 10 Projects For Beginners To Practice HTML and CSS Skills

Learning to code is always exciting and fun for everyone and when it comes to stepping into the programming world most of the people start with the easiest thing HTML and CSS . Every beginner’s coding journey in frontend starts with these two basic building blocks and you need to be creative when it comes to designing a beautiful application.

Initially, beginners enjoy making buttons, adding the links, adding images, working with layout and a lot of cool stuff in web designing but when it comes to making a project using only HTML and CSS they get stuck and confuse about what they should make to practice all these stuff. Afterall their knowledge is just limited to HTML and CSS. No matter what after learning everything at some point you will realize that making a project is important to practice HTML and CSS skills. You need to check how HTML and CSS work together to design a beautiful frontend application. So the question is what are some beginner-friendly projects you can build to practice everything you have learned…Let’s discuss that.

1. A Tribute Page

The simplest website you can make as a beginner is a tribute page of someone you admire in your life. It requires only basic knowledge of HTML and CSS. Make a webpage writing about that person adding his/her image. On the top of the webpage, add the image and name of the person and below that give layout for the rest of the details. You can use paragraphs, lists, links, images with CSS to give it a descent look. Add a suitable background color and font style on your webpage. Most of the parts you can make using HTML but to give it a better look using a bit of CSS. Take help from the link given below.

My Tribute Page

2. Webpage Including Form

Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications so why not practice it earlier and test your knowledge. Once you get familiar with the input field or basic tags in HTML to create a form make a project using all those tags. How to use a text field, checkbox, radio button, date, and other important elements in a single form. You will be learning how to give a proper structure to a webpage while creating a form. Knowledge of HTML / HTML5 is good enough but you can use a bit of CSS to make the project look better. Take help from the links given below.

Survey Form

3. Parallax Website

A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website. Using the parallax effect in web designing is really popular and it gives beautiful look and feels to the webpage. Give it a try and divide the whole page into three to four different sections. Set 3-4 background images, align the text for different sections, set margin and padding, add background-position and other CSS elements and properties to create a parallax effect. You can take help from the link given below.

Parallax Website

4. Landing Page

A landing page is another good project you can make using HTML and CSS but it requires a solid knowledge of these two building blocks. You will be using lots of creativity while making a landing page. You will practice how to add footer and header, create columns, align-items, divide the sections and a lot of things. You will have to use CSS carefully keeping in mind that different elements do not overlap with each other. You will also take care of color combinations, padding, margin, space between sections, paragraphs, and boxes. Color combinations should go well with each other for different sections or backgrounds.

5. Restaurant Website

Showcase your solid knowledge of HTML and CSS creating a beautiful webpage for a restaurant. Making a layout for a restaurant will be a bit complicated than previous project examples. You will be aligning the different food items and drinks using a CSS layout grid. You will be adding prices, images and you need to give it a beautiful look and feel as well using the proper combination of colors, font-style and images. You can add pictures gallery for different food items, you can also add sliding images for a better look. Add links for redirection to internal pages. Make it responsive setting a viewport, using media queries and grid. You can take help from the link given below.

Restaurant Website

6. An Event or Conference Webpage

You can make a static page holding an event or conference. People who are interested in attending the conference create a register button for them. Mention different links for speaker, venue and schedule at the top in the header section. Describe the purpose of the conference or the category of people who can get benefit from this conference. Add an introduction and images of the speaker, venue detail and the main purpose of the conference on your webpage. Divide the page into sections, add header and footer showcasing the menu. Use proper background color that can go well with each other for various sections. Choose a descent font style and font color that matches the theme of your web page. It requires HTML/HTML5 and CSS knowledge in depth. You can take help from the link given below.

Event webpage

7. Music Store Page

If you are a music lover you can make a webpage for it. It requires HTML5/ CSS3 knowledge. Add a suitable background image describing the purpose or what the page is all about. In the header section add different menus. Add buttons, links, images and some description about the collection of songs available. At the bottom mention the links for shopping, store, career or contact details. You can also add other features on your webpages such as a trial option, gift cards or subscription. Make it responsive setting viewport or using media queries and grid. You can take help from the link given below.

8. Photography Site

If you have in-depth knowledge of HTML5 and CSS3, you can make a one-page responsive photography site. Use flexbox and media queries for responsiveness. Add the company name with an image (related to photography) on the top (landing page). Below that showcase your work adding multiple images. Mention the contact detail of the photographer at the bottom (footer). Add a button to view your work. This button will directly bring you down to the images section. You need to take care of the margin, padding, color combination, font-size, font-style, image size and styling of a button. You can take help from the link given below.

Image gallery

9. Personal Portfolio

With knowledge of HTML5 and CSS3, you can also create your portfolio. Showcase your work samples and skills in your portfolio with your name and pictures. You can also add your CV there and host your complete portfolio on GitHub account. In your header section mention some menus like about, contact, work or services. At the top add one of your images and introduce yourself there. Below that add some work samples and at last (footer) add contact information or social media account. You can take help from the links given below.

Simple portfolio
Portfolio gallery

10. Technical Documentation

If you have a little bit of knowledge of Javascript then you can create a webpage of technical documentation. It requires knowledge of HTML, CSS and basic javascript. Divide the whole webpage into two sections. The left side creates a menu with all the topics listed from top to bottom. Right side you need to mention the documentation or description for the topics. The idea is once you click on one of the topics in the left section it should load the content on the right. For click, you can use either javascript or CSS bookmark option. You don’t need to make it too fancy, just give it a simple and descent look, that looks good for technical documentation. You can take help from the links given below.

Technical Documentation

Helpful Link: 10 Tips for Effective Web Designing in 2019

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples .

Please Login to comment...

Improve your coding skills with practice.

Assignment 1
Due date: Sun Oct 2, 2022 22:00:00

This assignment helps you get familiar with writing HTML and CSS code. You are asked to create a very simple webpage. In the first question, you are to write a plain HTML file and then add style according to question 2.

Note that even though what was taught in the lectures is enough knowledge to cover this assignment, it is quite possible that some specific tags, styles, or tricks are not covered in the lecture. There are millions of features in web programming, and it is really impossible to teach them all in a lecture.

Therefore, you are welcome to refer to the slides or online resources to lookup for specific things. However, please be mindful that you will not violate academic integrity, as explained later.

This assignment will make up 10% of your final grade.
If you have any questions or problems with the assignment, please post them on Piazza.
No late submissions are accepted. However, you are given limited grace tokens which can be used to extend the course deadlines. Refer to the front page to find more information about the tokens and their restrictions.
It is recommended that you test your code on Firefox (108 or above) or Google Chrome (108 or above). You might probably not want to risk it by using Internet Explorer, Opera, or other things.
Most of your submissions will be auto-graded. Therefore, your code must adhere to all details provided in the handout; otherwise, you might lose marks.
Important : It is crucially important for the auto-tester that your file contains the exact same strings as in the handout (exact case, number of whitespaces, punctuation marks, etc.). Therefore, please copy whatever that's highlighted like this . Do NOT re-type them on your own.
You will not receive any feedback from the auto grader before the deadline has passed. So it is your responsibility to double-check your code with the handout before submission. Even minor spelling mistakes can lead to loss of marks. No remark requests will be accepted on these matters.
Only the last version of your repository will be graded. Make sure that your last commit is the one you would like to be graded. It will not be possible to ask for a checkout to a different commit.

You will submit your work by pushing your code to a Gitlab repository. Find out your repo's URL by logging into the IBS . For this assignment, you must only submit one HTML file named index.html and one stylesheet named style.css . Note that any other file you submit will be ignored by the auto tester.

Warning : Importing any online CSS or JS code is strictly forbidden and will result in losing all marks of the assignment. Examples are bootstrap, semantic, jquery, and any other code written by someone else.

Academic Integrity

Assignments are individual work which means that you will not be allowed to seek advice from other students or copy/paste someone else's code, even open-source codes from the internet. However, you are allowed to look at online resources, tutorials, and Q&A websites to solve the problems. The entire code must be written by yourself.

Mastery at HTML!

Write an HTML file named index.html that includes the following:

CSC309 Personal Website as title
Hello Visitors directly in a <div> section
Your name in an <h1> and your UTorID in an <h2>
An unordered list that includes the exact following text: A1 is worth 10% A2 is worth 20% A3 is worth 15%

A progress bar that shows 1/12 done, labeled (using the label tag) with CSC309 progress so far . When mouse hovers CSC309 , a small tooltip should appear showing the full name of the course: Programming on the web .

A table that exactly contains the following data

A multi-line box where users can leave feedback: should be labeled with Feedback . Its placeholder should be Enter your feedback here .
A one-line box in which users can enter email. Your webpage should not allow non-email inputs. The label should be Email .
A dropdown labeled with Country where the options are ---- (default), Canada , and United States .
A field where users can upload one attachment: the label should be Attachment .
A checkbox where users can acknowledge the terms: the label should be located to the right of the checkbox and equal to I agree to the terms and conditions .
A submit button with the text Send Feedback .
Note 1: Labels must be implemented via the label tag. Leaving plain text near the input is not accepted.
Note 2: All fields are mandatory. The form should not allow submitting without choosing one of the two countries. After the user fills out the form and clicks the button, a POST request should be sent with payload {feedback: …, email: …, country: ca or us, attachments: …, acknowledge: yes} to the IBS system at /a1/submit/ .
Note 3: The server will return an error response if your request is malformed. Make sure to try different inputs and values and always get 200 OK from the server. It is still your responsibility to ensure that you are sending the correct request at all times, and the server is just a helper tool.
Commander Erwin's historic speech as an embedded video. ( Spoiler alert : the video is from Attack on Titan season 3). Leave all the config options unchanged.
Recipient: *your email in the footer*
Subject: Bug Found!
Body: I found the following bug on your website

Note that your HTML file must NOT contain any style or scripts, either inline or from a file (except for the style.css file you will create in the next question). All the requirements of this part must be fullfilled by using pure HTML code (no CSS styles).

Any text formatted like this must be exactly copied to your file, as the auto tester will run a case-sensitive check . You can put additional elements (div, span, etc.) in your file, but make sure that you follow the format above.

Important : make sure that you validate your file before submitting it. The tester might not work properly if your file is malformed.

Style it up!

Complement your HTML file with a stylesheet named style.css that fulfills the following requirements

Make the previous <div> section always stick to the top of screens as they scroll. That is, it should remain on top of the page no matter how much the user has scrolled down. It should have no space to the top, left, or right. Also, set its background color to aqua .
Fit the unordered list in one line. Put at least a 5% margin to the left and right of each item.
Use Roboto Regular 400 as the font for the entire HTML document.

Re-arrange the form fields (except for the checkbox) into two columns of the same width. They horizontal order should be feedback, email, country, and attachment. The labels should be left-aligned and take at most 30% of each column. Make sure to put some appropriate space between columns, labels, and inputs.
Re-arrange your page into a two-columned layout. The left column contains everything except the Hello Visitors <div>, the footer, and the embedded video. The right column is dedicated to the video. Set its background color to plum . The video column should take at least 50% of the whole window's width, and never shrink below 560 pixels (the original video's width). In other words, if there is not enough space, the other column should be squeezed so the video's frame is not compromised. Obviously, if the width becomes too small, the browser will add a horizontal scrollbar. Even it that case, the video frame must be full-sized after scrolling.
Make everything inside the HTML file center-aligned (except for the 2-column part of the form). That includes all grid content, the header, and the footer. The video must be both horizontally and vertically centered in the right column.
Put a reasonable margin between elements so that they will not overlap or fall too close to each other. Also, make sure that the labels are vertically aligned with their corresponding inputs.

For your help, you can refer to the below screenshot as what your final submission should look like to receive the full marks. Note that the inputs fields, buttons, and progress bar may look different from the example, depending on your browser.

Important: The below picture describes necessity , not sufficiency. In other words, a working solution looks similar to the picture, but it does not mean that you will necessarily get full marks if your solution looks like it. To obtain full marks, your code must adhere to all rules listed in the handout .

This is my fourth time taking CSC309, and inarguably, this is the best assignment I've ever seen. Problems are so accurately designed that anyone with their own knowledge and experience have their own takeaways. I hope next assignments will be this good, too!

Thanks bro!

Assignment 1

Setting up your website.

We were required to set up our website complete with the projects and assignments for the course Advanced Material Processes and Die Design (DSL 732)

To set up your website you must have a basic level understanding of how HTML works. HTML or Hypertext Markup Language is a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages. Knowledge of CSS, PHP, Bootstrap etc can also be helpful in setting up a good and interactive webpage.

This is a brief overview of how I set up a website of my own:

Using HTML Templates

Since I have a very basic understanding of HTML, I chose to set up my webpage using a template provided by Vibhuti, who is an intern at IIT Delhi and is also assisting us in creating our websites. Thanks to her, most of the formatting was set up in the template provided by her. You may find similar templates on the internet for any purpose. One of the sites that I used to get a hands on practice was :

https://www.free-css.com/

You can find similar websites that have a structure of a fully finished website and all you need to do is insert your content into them.

Prerequisites

To have a website you are required to have a place that will host your web pages. Generally a server proides us with a domain name and we are allowed to host our web page on that server. Whatever data that comes on a webpage (images graphics and the layout) comes through a server. Since we are in process of setting up a website we must first host a server on a local machine to test and see whether all the functionalities work correctly. For that I downloaded

MAMP

MAMP is a solution stack composed of free and open-source software running with proprietary commercial software, to run dynamic web sites on computers running macOS or Windows. It can be used to develop web sites that use popular current technologies, on a stand-alone desktop or laptop computer without the need for a separate web server.

Install MAMP
Search the executable file on this "C:\MAMP\MAMP.exe"
Create a shortcut on your desktop for easy access

And also we need a text editor where we'll be able to view and edit our HTML codes easily. For that I used

Sublime Text

It is basically like Notepad but with added features. You can easily idenify the code and make changes to it because of the color used to differentiate code with content.

Install the editor
Search the text editor on "C:\Program Files\Sublime Text 3\sublime_text.exe"

So to summarize, we have downloaded a local hosting software and a Text editing software for our task of creating a webpage:

Sublime Text

Creating my first webpage

Creating a webpage using HTML and Basic CSS styles is fairly easy. HTML is a simple and easy to learn language that can be used to create webpages. Since I had a basic prior knowledge of HTML, I was easily able to create my own webpage using Vibhuti's template and by searchig the internet for relevant HTML tags as and when the need arose.

I started off with creating my first webpage.

Copy the following code. <!DOCTYPE html> <html> <title>HTML Tutorial</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Paste the code in a text file and save as an HTML file with the extension .html
Now go and open the the saved file in a web browser or just double click the file.
You'll be taken to your first webpage that looks like this

Basic HTML Tags

Now using the knowledge of basic HTML tags, one can easily create a webpage and eventually a whole website. Let us look at some of the basic HTML tags and features we may need for a website.

Paragraph Tags <p></p>

Used for paragraph spacing

Eg: <p> This is a paragraph </p>

Break Tag <br>

Used for pushing the text to next line

Eg : <p> This is an Example of <br>

</p>

Heading Tags <h#>

Used for different sized headlines varying from <h1> being the largest to <h6>, the smallest

Eg : <h1> This is a heading </h1>

To Add Media

Eg: <img src="images/picture_name.jpg"

Eg: <video width="200px" height="" controls autoplay>

</video>

Compressing Images

A website is never complete without visual elements. Images, Videos, dynamic graphics, all play an important role in bettering the look and feel of the website as well as to make it more interactive. Image compression becomes crucial when you have to make the page load quickly for the viewers and also consume less space in the hosting domain.

In our class we were introduced to an application named ImageMagick for compressing images. ImageMagick is a tool that helps compress high quality, big sized images to small sized ones without losing much in terms of image quality. Similar online and standalone applications exist in the internet. I chose Image Resizer for Windows, which is a standalone app like ImageMagick. I personally found it a little more convenient as in Image Resizer, the options to resize the image come within the Right Click Menu. You can choose to either change the resolution retain the same while reducing the size of the file. Additionally Image Resizer also allows batch resizing as well.

Steps to compress images using Image Resizer For Windows

For single image.

Select an image to resize.
Right click and select 'Resize Pictures'

In the next dialog box, choose the required size and press 'Resize'.

Your image will be resized and will appear next to the original image.

For Batch Images

Select a range of images to resize.

Your images will be resized and will appear next to the original images.

Compressing Videos

Like image compressors there are many video converters in the internet that can be used to convert/compress our videos to the desired format and size. Video compression, like Image compression is also essiential for the same reasons: space frugality in the host domain and quick page loading.

I chose Movavi for compressing my videos. Movavi is a free software that can be used to convert as well as compress video files to a smaller size. It is available for Windows, Mac and even mobile devices.

You can even use this application to dobasic video editing like trimming, joining, video montages, timelapses. Compressing videos using Movavi is fairly simple.

Steps to compress videos using Movavi

Click the Add Media button and then Add Video in the upper left corner of the program interface. Choose the video you want to convert from the Open File dialog box and click Open.

Choose the desired video format from the ribbon of presets. You can also use the search function to quickly find the format or device you need.

Return to the source file list and click on the file size in the output information. This will open a new dialog box. Move the File size slider to the desired output file size and bitrate. You can click the Convert Sample button to check how a small segment of the file will look like after conversion.

Choose the output folder for the compressed videos by clicking the Folder icon at the bottom of the interface and selecting the desired destination. By default, the output video will be saved in the Movavi Library folder.

Press the Convert button to start the compression process. After the operation is complete, the output folder with the converted video will open automatically.

Add Youtube Videos :

Go to the video
Click on the share button for the particular video
Click on ‘Embed’ to get the autogenerated html code
Copy and paste it in the required place

Editing the HTML Files

Different files used for the website development are:

Homepage of the website.

Basic details about myself

assignments.html

Different assignments are added here with link to its html file

project.html

Details regarding the project proposal and the final project

Web Servers

Until now we had been hosting our website locally. Which means that any data on our website will be available only to us and once we shut down the system, the website won't be available for anyone to see. That's where Web Servers come to play. Web servers run 24x7 to make our website available to our audiences. Hence, the next step after successfully designing a web page is to upload it to a web server. There are many paid and free web hosting servers that we can use to host our website. We'll be using IIT Delhi's web server for hosting our website. To do that we would be requiring

WinSCP

WinSCP is a free and open-source client for Microsoft Windows. Its main function is secure file transfer between a local and a remote computer.

Using WinSCP we can transfer our website data saved locally on our local computer to the IIT Delhi's web server. Let us see the steps for the same

To connect to the server, login with institute user name and password with the host name and port number as shown below

Host Name: ssh1.iitd.ac.in

Port Number: 22

After login, create a folder with the name “private_html”. This is done as the we have only access to the website within the campus. Copy the edited html files from the local computer (left column) to the server (right column) and verify its working by going to the url in the format

http://privateweb.iitd.ac.in/~dds19----/index2.html

where '----' would be our respective roll numbers

This would be the link to your website. Check if the link works and the webpages show as intended.

And voila! Your website is now available to anyone in the campus. Add more content to personalize your website and show off your skills.

Assignment 1: Static Web: HTML/CSS

Due Sunday, February 7 11:59pm ET

Accept the Github Classroom assignment and clone this repo that contains stencil code for Assignment 1.

Introduction

This is a multi-part assignment with the objective of making you comfortable working with HTML and CSS. By the end of this assignment, you will have styled some rectangular blocks and created a simple version of Twitter's home page.

If this assignment seems overwhelming to you, please come see a TA at TA hours to talk through some strategies for tackling it. We expect this assignment to be a time-consuming assignment as we cover a lot of fundamental techiniques. But with a good strategy, it can be finished in a reasonable amount of time.

Note: Only CSS and HTML will be used for this assignment. If you want to use JavaScript (or libraries such as jQuery) then feel free to, but we will only be grading correctness on your CSS and HTML.

If you can, Start Early!

Specifications

Now that you understand some of the basics of HTML and CSS, let’s take a look at how to align HTML elements. There are multiple ways to align HTML elements, but in this part, we recommend using flexboxes as they are widely used in modern web development (for example BootstrapV4 is built on top of flexboxes).

Refer to this great webpage on how to use flexboxes: CSS Flexbox Guide .

Also feel free to use online resources such as Stack Overflow, MDN, W3, and Google for reference.

As you can see, there are 9 rectangles. The styling and makeup of the first two rectangles are already built for you. Your task is to apply stylings and add div elements inside of the next 7 green rectangular blocks to create a webpage that looks like this:

For the third row, the red and blue end rectangles should remain the same width, and the green space should shrink.

Possible Approach: Have a div with a red background and a div with a blue background, both with fixed width. Use an appropriate value for Justify Content .

For the fourth row, the blue end rectangle should remain the same width, and the red rectangle should shrink.

Possible Approach: Have a div with a red background and a div with a blue background. Have a fixed width on the blue div. Use Flex Grow .

For the fifth row, the red square should remain the same size, but always remain in the center of the green rectangle.

Hint: Think about how to keep a div fixed size and how to align something in the absolute center of the parent element.

For the sixth row, the blue rectangle should remain the same size, while the red rectangles should shrink. The blue rectangle should remain in the center of the row.

Hint: Use two red divs.

For the seventh row, the red rectangle should remain the same width.

Hint: Nest divs and use background-color: transparent

For the eighth row, the orange rectangles should remain the same size while the green space between them shrinks.

For the ninth row, the green space between the orange rectangles should remain the same width while the orange rectangles narrow.

The examples we provided with the first two rectangular blocks use flexboxes. You are not required to use flexboxes for the next 7 rows, but we recommend it as it will also be useful in part 2 of this assignment.

You should only have to use the div html element to complete this assignment. Also, none of the divs you create inside of the provided wrapper divs should have background-color: green; . But it is valid to specify non-green background colors for any divs, including the wrapper.

The color of the boxes we used are background-color: red , blue , and orange
Some width/height values we used are 20px, 40px, 80px

You are not required to use Bootstrap in this part. You can use if you want, but we actually recommend writing plain CSS. Just for this part, inline CSS is acceptable, but you should generally avoid using inline CSS in the future.

Any images you'll need can be found in the part2/images folder, which can be referenced as ./images (when CSS is in its own file, URLs are relative to the CSS file, not the page it is loaded on). All of your HTML should go in the index.html file and all of your CSS should go in the index.css file.

Feel free to go on Twitter and use your browser’s inspect element to see how they do font sizes, font weights, margins, paddings, text colors, and background colors (use inspector). Our solution is a bit different than Twitter’s architecture because twitter’s HTML/CSS setup is way too complicated for a simple web mockup. If you try to copy Twitter’s code instead of creating the HTML elements yourself, you’ll end up spending way more time trying to figure out what each div does and how to decipher their massive styling code base.

Ethics Requirements

A screen reader needs to know in advance what language your website is in in order to function properly.

To help it out, make sure to declare the language of your website in the lang= attribute of the html tag.

Blind and low-sighted users often can’t see images on a site.

To help them enjoy your site’s content, all images must have alt text.
The alt text goes in the alt="..." attribute of the image element.
You should give a basic description of what is in the image. Putting image in the alt attribute does not count!

Blind or low-sighted users may want to “skim through” a page using their screen reader. To make that easier, the page should have a logical hierarchy using different headings to designate different levels of importance.

Note: your Twitter page won’t have that many headings. Just don’t use headings to style things!

If you want a piece of text that isn’t a heading to be big or bold, use HTML elements like em and b tag or CSS to style it rather than the heading attribute.

For people using screen readers to navigate the page, ARIA landmarks are a big help – they can help users skim the page, or to quickly find the content they need. These are attributes that can be added to any element on the page and appear as role= attributes within a div’s opening tag. The ARIA landmarks you are required to include are:

role=navigation (to designate the navigation menu): add this to the navigation bar.
role=main (main page content, i.e. the tweets): add this to the div you use to contain your tweets.

Look here for more tips and examples.

Finally, your page should have a skip link (think <a> !) somewhere at the top of the navigation. Skip links are links at the top of the page which allow a user to skip to the main content of the page. They’re important for older browsers and screen readers that may not support ARIA landmark navigation.

This can be styled any way you like! However, for this project, hide them using display: none; .
To do this, you’ll have to give the div you will be jumping to an ID, and have the link href="..." attribute point to that div’s ID. For example, if I wanted to jump to a div with the ID myDiv, I would have the following link: <a href=”#myDiv”>Jump to myDiv</a>
In our case, this means skipping to content-wrapper or content-center , depending on your implementation. More tips and examples can be found here .

We recommend running your page through WAVE’s accessibility checker, which we asked you to add to your Firefox and/or Chrome browsers during lab 1. We’ll be using that tool to test whether your ARIA landmarks and general hierarchy are logical, as well as whether you’ve implemented alt text in your image descriptions.

Note: The Chrome WAVE extension has been a little finicky lately. If you’re having trouble, try running your code on a department machine and/or using Firefox.

For help, take a look at our Accessibility Resource Sheet in Docs or come to TA hours!

Functionality Requirements

In the following, we put together some hints on how to accomplish the functionality requirements. We also encourage you to refer to online resources like MDN and CSSTricks for HTML and CSS properties.

Note: Don't worry about getting the font sizes or font colors exact. That being said, #4AB3F4 is the blue color used in the mockup and #E6ECF0 is the light gray background color.

Twitter's header is fixed which means when you scroll down, the header remains at the top of the webpage. We will require you to implement your header in a similar manner. To do this, use:

position: fixed; Adding this to an element makes it stick to whatever position you specify
top: 0; left: 0; These are the positions for the fixed element that will keep the element fixed at the top
z-index: 100; Adding this to an element makes it positioned above other elements (You could probably make it work with z-index: 5, but we put 100 just to make sure). Elements without a specified z-index have a default z-index of 0. Elements with higher z-indexes are placed over elements with lower z-indexes.

If you decide to use Bootstrap, you may find Navbar Placement to be useful.

Lastly, we require you to have the Twitter logo stay in the middle of the header when you resize the window.

Home <i class="fas fa-home"></i>
Moments <i class="fas fa-hashtag"></i>
Notifications <i class="far fa-bell"></i>
Messages <i class="far fa-envelope"></i>

The file path of the twitter logo is ./images/twitter-logo.png

content-wrapper

max-width: 1190px; This sets the maximum width of the element.
margin: 56px auto; This sets the vertical margins to 56px so that it is below the header and the horizontal margins to automatically center the element.

content-left

Cover picture (purple)
Profile picture (orange)
Profile stats (green)

We require you to create the overlapping effect between the profile picture and cover picture. Usually to sepcify priority in stacked display (think it as layers), you will use z-index .

Bootstrap section for positioning

The filepath of the cover picture is ./images/ratatouille-banner.png while ./images/ratatouille.jpg is the filepath of the profile picture for Remy and ./images/linguini.png is the filepath of Linguini's profile picture.

content-center

We require that you include the profile picture in every one of the tweets. Additionally, in at least one of the tweets you should have a span tag to change the styling of a single word within the tweet.

border-radius: 50%; or Bootstrap class rounded-circle makes an element a circle.

content-right

If you minimize the width of your browser when on Twitter, you will notice that the content on the right disappears at a certain point. This is done using CSS media queries.

We require you to do the same on your mockup. So, use a media query to make content-right disappear when the window’s width is less than or equal to 1200px.

Other than the explicitly stated requirements for this part, we would like you to make your Twitter mockup generally resemble the solution provided above

If you can, please make your webpage compliant across browsers. But we will be testing your assignment on Chrome.

To access Chrome in CIT machine: From the command-line, type chrome .

General Notes

As a reminder, it's a good idea to run your HTML and CSS syntax through validators. You should also consider using an accessibility checker such as WAVE.

Troubleshooting

There are hundreds of HTML and CSS tags, properties, and values, and CS132 does not expect students to learn each one by heart. However, this assignment and the first lab are intended for you to intuitively understand the languages, and to be proficient at knowing how to tackle a design by the end of the semester.

If you’re having problems, there are many guides on HTML and CSS online (CSSTricks and MDN are your friends), as well as on our resources page.

As always, if you are stuck on a particular part, you can always talk to the friendly TAs or ask questions on course piazza (check your email for a signup link).

As a general rule of thumb, do not expect TAs to be able to solve every web problem you have. Even the most adept web developer can struggle a lot with specific CSS rules to use.

To hand in your code for Assignment 1, upload the directory containing your solution to part 1 and part 2 to Gradescope .

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications

assignment of week5 of coursera course: html, css and javascript for web developpement (from Yaakov)

coursera-html-css-javascript-homework/week5-assignment

Name already in use.

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more about the CLI .

Open with GitHub Desktop
Download ZIP

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

week5-assignment

Assignment of week5 of coursera course: html, css and javascript for web developpement (from Yaakov). The result should be visible through github pages at https://coursera-html-css-javascript-homework.github.io/week5-assignment/week5_solution/ Below are the instruction of the assignment.

Module 5 Coding Assignment

Coursera course: HTML, CSS, and Javascript for Web Developers

Last assignment and you are DONE!

Time to complete: About 30 minutes.

Ask questions in Discussions if you get stuck! We are all learning, and going through getting stuck and then unstuck (even with someone's help) can be a very valuable learning experience!

Summary: In this assignment, we are going to have a bit of fun with our built restaurant web application. The front page of our web app contains 3 clickable tiles: Menu, Specials, and Map. If you click on the Specials tile, you will be taken to a single category page where all the menu items that belong to the Specials menu category will be shown. Your task in this assignment is to alter this behavior such that when the user clicks on the Specials tile, the web app takes the user to a random single category menu page, listing menu items in the category, be it "Lunch", "Dinner", "Sushi", etc. That way, any random category can become the Specials! What fun! (not! :-) )

In order to accomplish this, we need to change the home HTML snippet and, besides pulling it dynamically from the server, also insert a random category short_name into the function call of the following code. Previously, the code to send the user to the "Specials" category was this:

For this assignment, we changed this line to prepare it for a random category short_name to be this:

Here is what you will need to complete the assignment:

(If you haven't already) Create a GitHub.com account and a repository that you will use for this class.

(If you haven't already) Follow the Development Setup Video (beginning of Module 1) instructions on how to create a repository and set it up such that you can host and view your finished web pages on GitHub Pages, i.e., GitHub.io domain name. You will need to provide that URL for your peer review.

Create a folder in your repository that will serve as a container folder for your solution to this assignment. You can call it whatever you want. For example, module5-solution or mod5_solution , etc.

You will need to download the starter files for this project and copy them into your solution container folder (e.g., into 'module5-solution'). Since assignments and starter code get updated from time to time, don't assume that you have the latest version already on your system. The best way to ensure that you are working with the very latest starter code is either 'git clone' the fullstack-course4 repository into a new directory OR, if you've already done 'git clone' previously, you can simply open up your command prompt (cmd on Windows or Terminal on Mac), navigate to the folder where the fullstack-course4 repository was previously cloned into and do: git pull This will update your local repository with whatever changes have been made since the last update. As a reminder, the full repository URL is: https://github.com/jhu-ep-coursera/fullstack-course4

Once you update your repository, copy all the contents of the fullstack-course4/assignments/assignment5/assignment5-solution-starter folder into your newly created solutions container folder for this assignment, e.g., module5-solution . Once that's done, you are ready to start coding the solution. NOTE: the provided code will not run. It is up to you to follow the instructions to get it to run.

You are NOT allowed to change the home-snippet.html file. Any adjustments to the value of randomCategoryShortName property needs to be done in Javascript code.

There are 4-5 fairly simple steps to implement the required functionality.

Open up js/script.js file.
Find TODO: STEP 0, and follow the instructions until you are done with TODO: STEP 4. If you've watched the lectures, the code should be very familiar to you.
Once you are done, verify that the desired functionality is working correctly. Use Browser Sync or deploy your solution to GitHub pages.
Load the home page in the browser.
Click on the Specials tile. A single page category with a list of menu items for some category should appear.
Click on the restaurant logo to go back to the home page.
Click on the Specials tile again. Most likely, a different single page category page will be shown. Repeat this several times to make sure that most of the time you see a different single category page.
JavaScript 48.7%

Assignment: HTML & Cascading Style Sheets

(This is a modification of an assignment by Patrick Young, at Stanford Univ.)

For this assignment do not use WYSIWYG editors (e.g., no Dreamweaver). Webpages should be laid out using CSS floats (no HTML tables or CSS absolute positioning). You will be submitting several files to the drop box for this assignment. Several resources (images, text, etc.) are provided in a zip file, referenced at the bottom of this page .

Make sure your files validate at: http://validator.w3.org/ (for HTML) http://jigsaw.w3.org/css-validator (for CSS)

Your files should work on the latest version of Mozilla Firefox.

Part 1: A CSS'd Personal Page (12 points)

Create a simple personal web page, personal.html , that contains at least the following items:

Here’s roughly what the webpage should look like:

Example of your personal page, not yet using CSS

Stick to semantic HTML only. (Semantic HTML are those tags that do not specify appearance directly, such as the <i> and <b> tags.) We’ll spice it up with some CSS in the next part of this assignment. You can find a list of HTML elements commonly considered semantic HTML here:

http://microformats.org/wiki/semantic-html

Feel free to add in some additional items to your personal website if you’d like, but there is a more open-ended opportunity to be creative later in the assignment.

Make sure your webpage validates (see the links at the top of this page). Save your file under the name personal.html . If you've not validated a document before, it's very simple. I suggest using the "upload" option, as your html file isn't on a web server yet, and so doesn't have a URL that you can provide to the validators.

Now add a CSS file called personal.css and reference it in your .html file.

Here’s a sample screenshot (in the screenshot "Stanford" is in red, but we want to use "Eastern" in green, instead). Make sure your webpage validates without errors through both the HTML and CSS validators.

Submit your personal.html and personal.css files to the dropbox for this assignment.

Part 2: Zebra Striping (8 points)

In a zebra-striped table, every other row is a different color. In this problem you’ll create a simple zebra-striped table using data on the Stanford undergraduate population. For this problem save your HTML file under the name zebra.html , and put your CSS directly into the HTML file using the <style> tag. Here is what your webpage should look like:

Submit your zebra.html file to the dropbox for this assignment.

Part 3: An Example Blog (20 points)

I’ll be giving up to 3 bonus points for nicely styled blogs. I'll show the top 1-2 blogs in class. I’ve provided a jpeg of the Memorial Church before the earthquake (from Stanford University Archives) in case you want to add it to your page.

Submit your blog.html file to the dropbox for this assignment.

Part 4: Two Column Layout

Create following two-column webpage (the text are excerpts from the Stanford Report ) using CSS float layout:

Save the file as two-column.html . Each column should be 400 pixels with 15 pixel margins. Use a font with serifs. The actual text is provided with this assignment’s downloads so you don’t have to type it in. This section will not be graded, so you do not need to submit this file.

Part 5: Four Column Layout

Reproduce the following four-column webpage (consisting of headlines from the Stanford Report) using CSS float layout:

Save it under the name four-column.html . Your webpage does not have to look exactly like mine, but it should contain four-columns, each column should be 200 pixels wide with 10 pixel margins. Use a font without serifs. This section will not be graded, and you do not need to submit this file.

Part 6: Combined Webpage (10 points)

Combine the last two parts of this assignment into a new file called combined.html . Here’s what your combined webpage should look like:

Example layout with two columns on top half, and four columns on bottom

Submit your combined.html to the dropbox.

Part 7: Organizational Web Page (25 points)

In this part of the assignment we will create a web page, organization.html, containing several layout components, including a header and navigational field.

Web page showing multiple layout components

Your page doesn't need to be exactly as shown. If your measurements are different or your margins are a bit off or your fonts are a different size, you’ll still receive full credit. But the overall placement of items should be the same. Make sure you have the following features:

Here are some of the specific measurements used to generate the example web page. Again, you can use different values, so long as the layout is approximately the same.

If you use the <h1> , <h2> , and <h3> tags to create your headings (which is recommended), you’ll need to override the standard margins otherwise you headings will take up too much space. This is commonly done on professional webpages. In fact, many professionals use a “CSS Reset” with their webpages, which resets all the margin and padding on all HTML elements to 0px .

Submit your organization.html , along with any image files you reference therein.

Part 8: "Facebook" Page (25 points)

Create the following “Facebook-like” webpage, facebook.html . Here’s what the webpage should look like:

A web page that looks somewhat like what we might find on Facebook, or another social media site.

While you do not need a pixel-perfect implementation you should include the following:

Submit your facebook.html to the dropbox, along with any image files it references.

Provided Resources

IMAGES

HTML/CSS
2-html-and-css-assignment-no-21
7 Projects to practice HTML & CSS skills for beginners
HTML and CSS assignments
05: Advanced CSS
9 Text Formatting in CSS || HTML and CSS Tutorial for beginners 2019

VIDEO

HTML and CSS Tutorial For Beginners: END THANK FOR WATCHING
Html and Css 😂
Html and CSS Basic 54
Favorite Stores Page
Basic HTML and CSS
CSS FLEXBOX

COMMENTS

The Basics of Website Design: HTML & CSS Explained
Creating a website can be a daunting task for those who are unfamiliar with the basics of website design. But with a little knowledge and some practice, anyone can learn how to create a website. Two of the most important elements of website...
How to Get Started with Website Design HTML CSS Code
Designing a website from scratch can be a daunting task, especially if you’re unfamiliar with the coding languages used to create it. HTML and CSS are two of the most important coding languages for website design, and understanding how to u...
HTML & CSS: The Building Blocks of a Great Website Design
When it comes to website design, HTML and CSS are the two most important building blocks. HTML (HyperText Markup Language) is the language used to create the structure of a website, while CSS (Cascading Style Sheets) is used to add styling ...
Part one (HTML and CSS)
Create a .css file and link to it in your HTML-document. Add styles to the different components of the page, so that its design resembles (something like) the
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Top 10 Projects For Beginners To Practice HTML and CSS Skills · 1. A Tribute Page · 2. Webpage Including Form · 3. Parallax Website · 4. Landing
Assignment 1: HTML + CSS
This assignment helps you get familiar with writing HTML and CSS code. You are asked to create a very simple webpage. In the first question
Assignment 1
Creating a webpage using HTML and Basic CSS styles is fairly easy. HTML is a simple and easy to learn language that can be used to create webpages. Since I
Ameen-Alam/PIAIC-HTML-CSS-Assignments
PIAIC HTML and CSS Assignments. Contribute to Ameen-Alam/PIAIC-HTML-CSS-Assignments development by creating an account on GitHub.
Assignment 1: Static Web: HTML/CSS
Note: Only CSS and HTML will be used for this assignment. If you want to use JavaScript (or libraries such as jQuery) then feel free to, but we
Html Css Assignment
Html Css Assignment. angular html/scss practice task. 1.9K views 643 forks. Files. index.html. Rename. Delete. index.js. Rename. Delete. package.json. Rename.
coursera-html-css-javascript-homework/week5-assignment
assignment of week5 of coursera course: html, css and javascript for web developpement (from Yaakov) - GitHub
HTML Assignments
HTML Assignments · HTML Projects · Photoshop · CSS · Muse · HTML ASSIGNMENT 1 · HTML ASSIGNMENT 2 · HTML ASSIGNMENT 3.
CSS Assignment
Webpages should be laid out using CSS floats (no HTML tables or CSS absolute positioning).
26 HTML/CSS assignment ideas
Oct 11, 2018 - Explore Anita Myrvang's board "HTML/CSS assignment" on Pinterest. See more ideas about restaurant design, restaurant interior, cafe design.