HTML and CSS kind the muse of recent internet improvement. HTML defines how an online web page is structured, and CSS defines its fashion. Whereas each languages are comparatively simple to study, as soon as you already know the fundamentals, you’ll nonetheless have to sharpen your abilities with apply.
Code challenges are a good way to sharpen your programming abilities and mix them in several methods. Listed below are 11 HTML and CSS code challenges that’ll assist you take your abilities to the following degree. To get began, simply decide a problem, open up a workspace, and begin coding.
Notice that whereas these challenges are designed for inexperienced persons, you’ll nonetheless have to have a fundamental understanding of HTML and CSS. If you happen to want a refresher, use the programs under:
1. Create a tribute web page
Select a historic determine who’s significant to you and create a webpage devoted to them. The webpage ought to embody:
- A title or heading with the particular person’s identify
- A picture of the particular person
- A caption for the picture
- A timeline of the particular person’s life within the type of a record
This may be accomplished with solely HTML, however use CSS to offer it some fashion.
2. Create a Wikipedia web page
Wikipedia is without doubt one of the backbones of the web, and it has a comparatively easy format. Create a Wikipedia web page on the subject of your alternative. It ought to embody:
- A title or heading
- A desk of contents with hyperlinks to sections throughout the web page
- Superscript quantity hyperlinks that hyperlink to the corresponding quantity within the reference part
- An ordered record of references
3. Create an HTML and CSS-only search outcomes web page
Create a mock Google search outcomes web page. It ought to embody:
- The Google brand
- A search bar on the prime
- An inventory of search outcomes with clickable hyperlinks
Right here’s an instance of what it’d appear to be.
4. Create a survey kind
HTML types are an essential a part of many web sites. Create a kind for a survey on the subject of your alternative.
Embody a wide range of reply choices, together with textual content fields, dropdowns, radio buttons, checkboxes, and a submit button. Don’t overlook so as to add a title, and think about using CSS to enhance the look of your kind. Right here’s an instance.
5. Create a picture gallery
Picture galleries could be an important template for a lot of web sites—like pictures portfolios, as an example. Choose a theme you want (movies, crops, structure) and create a picture gallery utilizing float or show flexbox.
This gallery ought to comprise:
- A title or heading
- 8+ clickable photographs with descriptions
- A prime navigation bar
- A footer, full with social media hyperlinks
6. Create a parallax web site
A parallax web site has a hard and fast picture within the background that stays in place whilst you scroll by different components of the web page. It’s a preferred impact in internet design and provides a sublime feel and look to a web page.
Design a parallax webpage. Divide the web page into three or 4 sections. Set three or 4 background photographs and align textual content to every part. You’ll use margins, padding, and background positioning to create the impact. Right here’s an instance of a parallax web site.
7. Create a product touchdown web page
Many web sites are designed to showcase and promote merchandise. A product touchdown web page must be enticing, informative, and straightforward to learn to enchantment to customers. Your product touchdown web page ought to embody:
- An image of the product
- A header and footer
- Columns
- A number of sections
Take into account the colour scheme and be sure that parts don’t overlap one another.
8. Create a restaurant web site
A restaurant web site is much like a product touchdown web page in that it ought to showcase the restaurant and menu gadgets appealingly. It’s extra complicated, although, with photographs of various meals and drinks. First, create a responsive restaurant web site utilizing a viewport and media queries.
9. Create a chessboard
This problem teaches you find out how to create and format a desk. You’ll additionally have to discover ways to insert UNICODE characters.
Create a chessboard. The board needs to be alternating colours and an eight-by-eight grid. Listed below are the UNICODE characters you’ll want for the items.
- White King: ♔
- White Queen: ♕
- White Rook: ♖
- White Bishop: ♗
- White Knight: ♘
- White Pawn: ♙
- Black King: ♚
- Black Queen: ♛
- Black Rook: ♜
- Black Bishop: ♝
- Again Knight: ♞
- Black Pawn: ♟
10. Create an occasion or convention web site
This problem continues the theme of constructing enticing internet pages. This one will embody a registration button that hyperlinks to a registration kind. You’ll additionally want particulars and pictures of the speaker or performer and venue. Describe the occasion and embody a number of sections together with a header and footer. Take into account the colour scheme and use fonts which might be readable and replicate the theme of the occasion.
11. Create a portfolio web site
Take what you’ve discovered all through the opposite challenges and create a portfolio web site. The web site ought to replicate your abilities.
Embody a web page along with your resume, work samples, a photograph, and a prime menu with hyperlinks to an about web page, contact web page, and another pages you’d like to incorporate. Within the footer, embody your contact info and hyperlinks to your related social media accounts.
Constructing your HTML and CSS abilities
Code challenges are only one approach to construct your HTML and CSS abilities. You too can brush up with programs like Study HTML, Study CSS, and Study Intermediate CSS. These programs construct on each other, although you possibly can at all times bounce into an intermediate class if you have already got a superb base information of CSS.
Ability Paths are one other nice approach to study particular abilities. Our Study Tips on how to Construct Web sites Ability Path walks you thru HTML and CSS, together with responsive design and accessibility. You’ll finish the category with a sophisticated web site that you should use in your portfolio. We even have a standalone course on responsive design.
If you happen to really feel assured in your HTML and CSS abilities, it might be time to study one other language. Our course on JavaScript builds on HTML and CSS that can assist you make web sites much more responsive and dynamic. When you study JavaScript, we provide a course on Constructing Interactive JavaScript Web sites that brings all these abilities collectively.
This weblog was initially revealed in November 2021 and has been up to date to incorporate further HTML and CSS challenges for inexperienced persons.
Whether or not you’re trying to break into a brand new profession, construct your technical abilities, or simply code for enjoyable, we’re right here to assist each step of the best way. Take a look at our weblog publish about how to decide on the very best Codecademy plan for you to find out about our structured programs, skilled certifications, interview prep sources, profession companies, and extra.
